jquery快速入门(三)
捕获内容和属性
1.DOM 操作
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容,如果不带值则是返回值,如果带值则是修改值,如:$('p').text('我要修改原来的文本');
html() - 设置或返回所选元素的内容(包括 HTML 标记),如果不带值则是返回值,如果带值则是修改值,如:$('p').html("<b>Hello world!</b>");
val() - 设置或返回表单字段的值,如果不带值则是返回值,如果带值则是修改值,如:$('input').val("修改input框的默认value值");
获取属性 - attr() 或 prop()
对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法,如果带有属性值则是修改属性值,如果不带属性值则是返回属性值:如 $('a').attr('href' : 'www.guiqingyuang.com');
对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。
例:<a href="https://www.runoob.com" target="_self" class="btn">少时诵诗书</a>
例子里 <a> 元素的 DOM 属性有: href、target 和 class,这些属性就是 <a> 元素本身就带有的属性,或者说在 IDE 里能够智能提示出的属性,这些就叫做固有属性。处理这些属性时,建议使用 prop 方法。
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是空字符串。
例:<a href="#" id="link1" action="delete" rel="nofollow">删除</a>
例子里 <a> 元素的 DOM 属性有: href、id 和 action,很明显,前两个是固有属性,而后面一个 action 属性是我们自己自定义上去的,<a> 元素本身是没有这个属性的。处理这些属性时,建议使用 attr 方法。
attr 方法还支持同时修改多个属性,如:<a href="http://www.runoob.com" id="runoob">教程坎坎坷坷</a>
$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
// 通过修改的 title 值来修改链接名称
title = $("#runoob").attr('title');
$("#runoob").html(title);
});
});
1.如果有相应的属性,返回指定属性值。
2.如果没有相应的属性,返回值是 undefined。
text()、html() 以及 val() 的回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
例:$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(function(i,origText){ //这里function传两个参数,第一个是下标,第二个参数是原来的值
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
例:$("#btn2").click(function(){
$("#test2").html(function(i,origText){ //这里function传两个参数,第一个是下标,第二个参数是原来的值
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
例:$(document).ready(function(){
$("button").click(function(){
$("#runoob").attr("href", function(i, origValue){ //这里function传两个参数,第一个是下标,第二个参数是原来的值
return origValue + "/jquery";
});
});
});
jQuery - 添加元素
添加新的 HTML 内容
添加新内容的四个 jQuery 方法:
- append() - 在被选元素的结尾插入内容 如: $("p").append("追加文本");
- prepend() - 在被选元素的开头插入内容 如: $("p").prepend("在开头追加文本");
- after() - 在被选元素之后插入内容 如: $("img").after("在后面添加文本");
- before() - 在被选元素之前插入内容 如: $("img").before("在前面添加文本");
append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML
例:
$('#lia').click(function(){
var la1 = '<p>文本内容</p>'; // 使用 HTML 标签创建文本
var la2 = $('<div></div>').text('文本内容222'); // 使用 jQuery 创建文本
var la3 = document.createElement('h1');
la3.innerHTML="我是通过dom创建的文本";
$('span').prepend(la1, la2, la3);
});
通过 after() 和 before() 方法添加若干新元素
例:$('#btnnn').click(function(){
var laa1 = '<h2> 20120120 </h2>';
var laa2 = $('<i></i>').text('我是使用jq方法添加的文本');
var laa3 = document.createElement('button');
laa3.innerHTML = '我是添加的按钮';
var bsns = $('#huaaa').after(laa1, laa2, laa3);
console.log('bsns==>', bsns);
})
删除元素
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素) remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
例:$('#btna').click(function(){ //这里是移除所有带有listarr类的li标签和标签里面的内容
$('#hua>li').remove('.listarr');
})
empty() - 从被选元素中删除子元素
例: $(function(){
// remove 删除内容包括标签
// $('#btna').click(function(){
// $('.box-aa,p').remove();
// });
// empty(m铁) 删除内容,保留标签
$('#btna').click(function(){
$('.box-aa,p').empty();
});
})
获取并设置 CSS 类
附:jquery中 first() 与 :first 的区别
首先 jQuery 中默认有的方法是 .first(),而 :first 是 jQuery 选择器支持的语法 $('div:first')。
实际上,.first() 方法就是 .eq(0) 的封装而已。
比如 p:first 就是第一个P元素,p:last就是最后一个P元素(相对于整个页面)。除了这两个之外的怎么办?可以通过eq来遍历。如.eq(2)
操作 CSS
addClass() - 向被选元素添加一个或多个类
$(function(){
$('#btn').click(function(){
$('.lia1,.lasta,p').addClass('on');
$('.lia2,.listall').addClass('on1');
});
$('.lia1,.lasta,p').addClass('on1 on2');//添加多个类
})
removeClass() - 从被选元素删除一个或多个类
例: $('.lia1,.lasta').removeClass('ass vvb df');
toggleClass() - 对被选元素进行添加/删除类的切换操作
例:$('.lia1,.lasta').toggleClass('ass vvb df');
css() - 设置或返回样式属性
例: $('#btn').click(function(){
// 获取css属性
var aa = $('li').css('backgroundColor');
console.log('aa==>', aa); //默认情况只获取第一个li的属性,要获取其他的需要使用伪类的nth-child()来获取
var bb = $('li:nth-child(5)').css('backgroundColor');
console.log('bb==>', bb);
//但是nth-child()方法并不好,所以使用eq()来遍历,需要注意的是是从下标0开始算的,不是像nth-child()直接写位置的
var cc = $('li').eq(3).css('backgroundColor');//这里eq(3)的实际位置是内容004的位置。
console.log('cc==>', cc);
//设置css属性
$('li').eq(4).css({
'backgroundColor':'#45ffff',
'border':'solid 1px #f00'
})
})
尺寸方法
width() width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() outerHeight() 方法返回元素的高度(包括内边距和边框)。
需要注意的地方,设置了 box-sizing 后,width() 获取的是 css 设置的 width 减去 padding 和 border 的值。
.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}
- width() 获取为: 60
- innerWidth() 获取值为: 80
- outWidth() 获取值为: 100
jquery快速入门(三)的更多相关文章
- jquery快速入门三
事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...
- day 48 jQuery快速入门
jQuery快速入门 jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Ev ...
- jQuery 快速入门教程
内容目录 jQuery 入门 什么是jQuery 如何使用jQuery jQuery的运行原理 如何选择jQuery版本 ready() 准备就绪时执行代码 jQuery 核心:选取元素 使用jQue ...
- jquery快速入门(二)
jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...
- jQuery快速入门专题
jQuery入门专题 本人博客特点:最高重要等级为*****(五红星),依次减少代表重要性相对较低! 一.jQuery简介 jQuery 是一个 JavaScript的一个库,也就是说jQuery是基 ...
- jQuery简单入门(三)
3.事件和动画 A. 事件 Aa. DOM加载 1.为什么使用jQuery加载DOM方法? 以javascript的window.onload()方法加载DOM的先决条件是:必须等待被请求页面的资源全 ...
- jquery快速入门(四)
jQuery 遍历 向上遍历 DOM 树 parent() parent() 方法返回被选元素的直接父元素.该方法只会向上一级对 DOM 树进行遍历. parents() parents() 方法返回 ...
- jquery快速入门(一)
一.jquery加载文档 jquery加载文档(也叫入口函数) $(document).ready(function(){ // 这里写 jQuery 代码... }); 简写方式: $(functi ...
- JQuery快速入门-简介
一.什么是JQuery? jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.它的作者是John Resig,于2006年创建的一个开源项目,随着 ...
随机推荐
- BZOJ_1146_[CTSC2008]网络管理Network_主席树+树状数组
BZOJ_1146_[CTSC2008]网络管理Network_主席树 Description M公司是一个非常庞大的跨国公司,在许多国家都设有它的下属分支机构或部门.为了让分布在世界各地的N个 部门 ...
- 虚拟机console基础环境部署——系统基础环境
1. 概述2. 工具类安装2.1 安装vim2.2 安装tree2.3 安装expect2.4 安装lsof3. 编译环境类安装 1. 概述 本系列博客是在最小化安装CentOS6.5的基础上,通过配 ...
- Ceilometer + Aodh + Gnocchi 介绍
一. Ceilometer 1. 概述 Openstack ceilometer主要用于监控虚拟机.服务(glance.image.network等)和事件.虚拟机的监控项主要包括CPU.磁盘 ...
- Linux下可以ping ip地址但无法ping域名解决方法
分析:当前系统无法解决域名至ip地址故障. 步骤阅读 2 三:解决过程: 1.分析dns故障: 2.物理机可以ping 地址,但无法ping域名: 3.检查/etc/resolv.conf: 注: ( ...
- Spring py登陆模块(包含 记录登陆时间,记录ip,增加积分)
嘛基于最近的复习准备写个关于spring登陆模块的小程序 虽然小但是五脏俱全呐 话不多说让我来介绍一下今天的登陆程序. 这些是 基于Spring JDBC 的持久层实现 基于Spring 声明事物的业 ...
- 大白话5分钟带你走进人工智能-第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回归
第十五节L1和L2正则几何解释和Ridge,Lasso,Elastic Net回归 上一节中我们讲解了L1和L2正则的概念,知道了L1和L2都会使不重要的维度权重下降得多,重要的维度权重下降得少,引入 ...
- 线性表概述及单链表的Java实现
一.线性表概述 线性表是指一组数据元素之间具有线性关系的元素序列,它表现为:除第一个元素没有直接前驱元素.最后一个元素没有直接后继元素外,其余所有元素都有且仅有一个直接前驱元素和直接后继元素. 根据存 ...
- Actor模型-Akka
英文原文链接,译文链接,原文作者:Arun Manivannan ,译者:有孚 写过多线程的人都不会否认,多线程应用的维护是件多么困难和痛苦的事.我说的是维护,这是因为开始的时候还很简单,一旦你看到性 ...
- mybatis 增加热加载xml
由于在本地开发环境上每次修改mybatis xml文件都需要手动重启服务,调试的很麻烦,所以需要热加载xml文件来避免浪费时间,于是网上搜一下资料,看了下有一大堆,但试了下真正能跑起来没有(大都代码没 ...
- 数据结构与算法(九):AVL树详细讲解
数据结构与算法(一):基础简介 数据结构与算法(二):基于数组的实现ArrayList源码彻底分析 数据结构与算法(三):基于链表的实现LinkedList源码彻底分析 数据结构与算法(四):基于哈希 ...