一、jQuery选择器
1.基本选择器
- 元素选择器，语法
$("html标签名")，例：查找所有div下span元素的个数$("div,span").size(); - id选择器，语法
$("#id的属性值")，例：查找Id为"div1"的元素个数$("#div1").size(); - 类选择器，语法
$(".class的属性值")，例：查找所有样式是"class1"的元素的个数$(".class1").size();
2.层次选择器
选择器名称 | 语法 | 解释 |
后代选择器 |
| 选择A元素内部的所有B元素 |
子选择器 |
| 选择A元素内部的所有子B元素 |
- 改变
<body>内所有<div>的背景色为红色：$("body div").css("background-color","red"); - 改变
<body>内子<div>的背景色为红色：$("body > div").css("background-color","red"); - 改变id为one的下一个
<div>的背景色为红色：$("#one + div").css("background-color","red");
3. 属性选择器
选择器名称 | 语法 | 解释 |
属性选择器 |
| 包含指定属性的选择器 |
属性选择器 |
| 包含指定属性等于指定值的选择器 |
复合属性选择器 |
| 包含多个属性条件的选择器 |
- 查找所有含有id属性的div元素个数：
$("div[id]").size(); - 查找所有name属性是newsletter的input元素，并将其选中：
$("input[name='newsletter']").attr("checked","checked"); - 查找所有含有属性id且属性title值包含"es"的div元素，并将背景色改为红色：
$("div[id][title*='es']").css("background-color","red");
4. 基本过滤选择器
选择器名称 | 语法 | 解释 |
首元素选择器 |
| 获得选择的元素中的第一个元素 |
尾元素选择器 |
| 获得选择的元素中的最后一个元素 |
非元素选择器 |
| 不包括指定内容的元素 |
等于索引选择器 |
| 指定索引元素 |
偶数选择器 |
| 偶数，从0开始计数 |
奇数素选择器 |
| 奇数，从1开始计数 |
1)查找UL中第一个元素li和最后一个元素li的内容
$("ul li:first").text();
$("ul li:last").text();
2)查找所有选中未选中的input元素个数
$(":checkbox:not(:checked)").size(); //未选中
3)查找表格中第二行的内容，从索引号0开始
$("table tr:eq(1)").text();
//html()强调的是标签中的内容，如果标签中有子标签，则会显示出来，而text()强调的是标签
//中的文本内容，不会显示子标签
4)点击表格第二列
$("#table1 td:eq(1)").click();
5)改变索引值为偶数的 div 元素的背景色为红色
$("div:even").css("background-color","red");
6)改变索引值为奇数的 div 元素的背景色为 红色
$("div:odd").css("background-color","red");5. 表单属性过滤选择器
选择器名称 | 语法 | 解释 |
可用元素选择器 |
| 获得可用元素 |
不可用元素选择器 |
| 获得不可用元素 |
选中选择器 |
| 获得 单选/复选框 选中的元素 |
选中索引选择器 |
| 获得下拉框选中的元素 |
<script type="text/javascript">
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值"
$("#b1").click(function () {
//表单元素有2个不可编辑的属性
//disabled,不可用，不可编辑并且背景色为灰色，这个表单元素不提交给服务器
//readyonly,只读,不可编辑并且背景色为白色，会提交数据给到服务器。
//获取文本框的选择器有2两种：
//第一种：$("input[type='text']")
//第二种：$(":text")
$(":text:enabled").val("设置input标签的value值");
});
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function () {
$(":text:disabled").val("设置input标签的value值");
});
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
$("#b3").click(function () {
//jq对象.length属性，获取符合的标签元素的个数，jq对象本质就是js对象数组
//alert($("input[type='checkbox']:checked").length);
alert($(":checkbox:checked").length);
});
// <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
$("#b4").click(function () {
//jq对象.text([value]);//获取或设置标签体文本内容，text()相当于js对象的innerText
alert($("select > option:selected").text());
});
</script>
二、jQuery的DOM操作
1. jQuery对DOM树中的文本和值进行操作
API方法 | 解释 |
| 获得/设置元素的文本内容 |
| 获得/设置元素的标签体的所有内容 |
| 获得/设置表单元素value属性相应的值 |
2. jQuery对DOM树中的属性进行操作
API方法 | 解释 |
| 获得/设置属性的值 |
| 获得/设置属性的值(checked，selected) |
| 删除指定的属性 |
<ul>
<li id="bj" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
//获取北京节点的name属性值
alert($("#bj").attr("name"));
//设置北京节点的name属性的值为dabeijing
$("#bj").attr("name","dabeijing");
//新增北京节点的description属性 属性值是didu
$("#bj").attr("description","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name");
//获得hobby的的选中状态
//alert($("#hobby").attr("checked"));//不行
alert($("#hobby").prop("checked"));//false，代表没有选中
//attr适合操作一般大多数属性，prop适合获取操作属性值为boolean的属性
//设置复选框选中
$("#hobby").prop("checked",true);
$("#hobby").attr("checked",true);
3. jQuery对class进行操作
API方法 | 解释 |
| 获取/设置指定的CSS样式 |
| 给指定的对象添加新的类样式，指定类样式名字即可 |
| 删除指定的类样式 |
| 切换样式，如果没有类样式，则添加，如果有类样式，则删除 |
| 判断是否有类样式名 |
// <input type="button" value="给id为one设置属性class的值为second" id="button1"/>
$("#button1").click(function () {
//设置样式
$("#one").attr("class","second");
$("#one").addClass("second");
//移除样式
$("#one").removeClass("second");
//切换样式
$("#one").toggleClass("second");
});
// <input type="button" value=" 通过css()获得id为one背景颜色" id="button2"/>
$("#button2").click(function () {
alert($("#one").css("background-color"));
});
// <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="button3"/>
$("#button3").click(function () {
$("#one").css("background-color","green");
});
4. jQuery创建插入对象
API方法 | 解释 |
| 创建A元素对象 |
| 父标签.append(最后一个子标签)，添加成最后一个子元素，两者之间是父子关系 |
| 父标签.prepend(第一个子标签)，添加成第一个子元素，两者之间是父子关系 |
| 当前标签.before(兄弟标签)，添加到当前元素的前面，两者之间是兄弟关系 |
| 当前标签.after(兄弟标签)，添加到当前元素的后面，两者之间是兄弟关系 |
5. jQuery删除对象
API方法 | 解释 |
| 删除指定元素 |
| 清空指定元素的所有子元素 |
/*删除标签2种方式
* jq对象.remove() 自杀，将自己干掉删除
* jq对象.empty() 清空子元素
* */
//删除<li id="bj" name="beijing">北京</li>
$("#bj").remove();
//删除所有的子节点 清空元素中的所有后代节点(不包含属性节点)
$("#city").empty();6. jQuery效果
1.隐藏显示HTML元素
$("p").hide()
$("p").show() style="display:none;"
display:block是将对象块状化;display:none是不显示
切换隐藏显示
$("p").toggle()
2.淡入淡出HTML元素
淡入:
$("#div1").fadeIn();
$("#div1").fadeIn("slow");
$("#div1").fadeIn(3000);
淡出:
$("#div1").fadeOut();
$("#div1").fadeOut("slow");
$("#div1").fadeOut(3000);
三、jQuery遍历函数
1. jQuery祖先
-
parent()：返回被选元素的直接父元素 -
parents()：返回被选元素的所有祖先元素，一路向上直到文档的根元素 (<html>) -
parentsUntil()：返回介于两个给定元素之间的所有祖先元素
$("span").parent(); //返回每个 <span> 元素的的直接父元素
$("span").parents("ul"); //返回所有 <span> 元素的所有祖先<ul>元素
$("span").parentsUntil("div"); //返回介于<span>与<div>元素之间的所有祖先元素2. jQuery后代
-
children()：返回被选元素的所有直接子元素 -
find()：返回被选元素的后代元素，一路向下直到最后一个后代
$("div").children(); //返回每个 <div> 元素的所有直接子元素
$("div").find("span"); //返回属于 <div> 后代的所有 <span> 元素3. jQuery同胞
-
siblings()：返回被选元素的所有同胞元素 -
next()：获得匹配元素集合中每个元素紧邻的同辈元素 -
nextAll()：获得匹配元素集合中每个元素之后的所有同辈元素 -
prev()：获得匹配元素集合中每个元素紧邻的前一个同辈元素 -
prevAll()：获得匹配元素集合中每个元素之前的所有同辈元素
$("h2").siblings(); //返回 <h2> 的所有同胞元素
$("#div1").next(); //返回 <div> 的下一个同胞元素(只返回一个元素)
$("div2").nextAll(); //返回 <div> 的所有跟随的同胞元素
$("h1").nextUntil("h3"); //返回介于 <h1> 与 <h3> 元素之间的所有同胞元素
prev(),prevAll()以及prevUntil()方法的工作方式与next()方法类似,只不过方向相反而已,它们返回的是前面的同胞元素4. jQuery遍历(过滤)
-
first()：返回被选元素集合的第一个元素 -
last()：返回被选元素集合的最后一个元素 -
eq()：返回被选元素中带有指定索引号的元素(索引号从0开始)
$("div p").first(); //获得 <div> 元素内部的第一个 <p> 元素
$("div p").last(); //选择 <div> 元素中的最后一个 <p> 元素
$("p").eq(1); //选取第二个 <p> 元素
