🍁【JavaWeb】第五章 jQuery（上篇）

文章目录

• 9、内容过滤选择器
• 10、属性过滤选择器
• 11、表单过滤器
• 12、元素的筛选
• 13、jQuery属性操作之html()、text()、val()方法
• 14、jQuery属性操作之attr()和prop()

9、内容过滤选择器

1）：contains(text) 匹配包含给定文本的元素

//查找所有包含code的div元素
$("div:contains("code")");

2）：empty 匹配所有不包含子元素或者文本的空元素

//空元素即起始标签和结束标签中间没有东西
$("div:empty")

3）：parent 匹配含有子元素或者文本的元素

//即找非空的
$("div:parent")

4）：has(selector) 匹配含有选择器所匹配的元素的元素

Hello
Hello again!

//给所有包含p元素的div元素加上一个text类
$("div:has(p)").addClass("text");

结果：

Hello

10、属性过滤选择器

1）[attribute] 匹配包含给定属性的元素

//查找所有含有id属性的div元素$("div[id]");

2）[attribute=value] 匹配给定的属性是某个特定值的元素

//查找所有id属性值为sletter的div元素$("div[id='sletter']");

3）[attribute!=value] 匹配所有不包含指定的属性，或者属性不等于特定值的元素

//查找所有name属性不是newsletter或者没有name属性的input元素$("input[name!='newsletter']").attr("checked",true);

4）[attribute^=value] 匹配给定的属性是以某些值开始的元素

//查找所有name以news开始的input元素$("input[attribute^='news']");

5）[attribute$=value] 匹配给定的属性是以某些值结尾的元素

//查找所有name以letter结尾的input元素$("input[name$='letter']");

6）[attribute*=value] 匹配给定的属性值是以包含某些值的元素

//查找所有name包含man的input元素$("input[name*='man']");

7）[attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同事满足多个条件时使用

//查找所有含有id属性，并且它的name属性是以man结尾的input元素$("input[id][name$='man']");

11、表单过滤器

1）：input
匹配所有的input、textarea、select和button元素

$(":input");

2）：text
匹配所有的单行文本框，即找

$(":text");

3）：password
查找所有的密码框元素

$(:"password");

4）：radio
查找所有的单选按钮

$(":radio");

5）：checkbox
查找所有的复选框

$(":checkbox");

6）：submit
查找所有的提交按钮

$(":submit");

7）：image
查找所有的图像

$(":image"):

8）：reset
查找所有的重置按钮

$(":reset");

9）：button
查找所有的按钮

$(":button");

10）：file
查找所有的文件域

$(":file");

11）：hidden
匹配所有不可见的元素，或者type为hidden的元素

//不可见元素，如style="display:none"...$(":hidden");

12）：enabled
匹配所有可用元素。所谓可用不可用，如给input标签加一个disabled=“disabled”，如此本来能输入的框框就变的不能输入了

//查找所有可用的input元素
$("input:enabled");

13）：disabled
匹配所有不可用元素

$(":disabled");

14）：checked
匹配所有选项中的被选中元素（单选框、复选框等，不包括select中的option）

$(":checked");

15）：selected
匹配所有选中的option元素

$("select option:selected");

综合练习：

对表单内可用的input文本框赋值
对表单内不可用的input文本框赋值
获取多选框选中的个数
获取多选框，每个选中的value值
获取下拉框选中的内容
可用：
不可用：
可用：
test1test2test3
下拉框测试test1test2test3

多选下拉框加油努力奋斗牛的

each方法是jquery对象提供的用来遍历元素的方法，在遍历的function函数中，有一个this对象，这个this就是遍历到的dom对象。

运行效果：

12、元素的筛选

• eq(index)，功能跟 :eq() 一样，即获取给定索引的元素

//获取匹配到的第二个p元素$("p").eq(1);

• first()，功能跟 :first 一样

//获取匹配的第一个li元素$("li").first();

• last()，功能跟 :last 一样

//获取最后一个li标签$("li").last()

• filter(exp) ，留下匹配的元素

//保留带有selected类的p元素（class筛选）$("p").filter(".selected");

• is(exp)，判断是否匹配给定的选择器，只要有一个匹配就返回true

//判断复选框的父元素是不是form$("input[type='checkbox']").parent().is("form");//true

• has(exp)，功能跟.has一样，返回包含有匹配选择器的元素的元素

//测试素材代码
div1
div2
div3 div中的span
//查找含有span标签的div标签的长度
$(function(){alert( $("div").has("span").length );
}
);
//1

• not(exp)，删除匹配选择器的元素，功能跟 :not 一样

//从p元素中删除带有selected的id的元素
Hello
Hello again
--------
$("p").not($("#selected")[0]);
//这里的[0]是变成dom对象，但测试了一下，加不加都能成功

• children(exp)，返回匹配给定选择器的子元素，功能跟parent>child一样

//查找body中的每个class为one的div子元素$("body").children("div.one");

• find(exp)，返回给定选择器的后代元素，功能跟”祖先 后代“选择器一样

//从所有段落开始，搜索下面的class为min的span元素
//复习：
//$("p span");
$("p").find("span.min");

• next()，返回当前元素的下一个兄弟元素，功能跟prev + next一样

//找到每个段落后面紧邻的同辈div元素$("p").next("div");

• nextAll()，返回当前元素后面的所有兄弟元素，功能跟prev~siblings一样

//给第一个div元素后面的所有兄弟元素加个类

$("div:first").nextAll().addClass("addClass");

运行结果：

• nextUntil()，返回当前元素到指定元素为止的元素（开区间）

------------
$(function(){$("div":first).nextUntil("span").addClass("addClass");
}):

运行：

• parent()返回父元素

//查找每个段落元素的父元素$("p").parent():

• prev()，返回当前元素的上一个兄弟元素

//返回每个段落的前一个同辈元素$("p").prev();

• prevAll()，返回当前元素前面的所有兄弟元素

//给最后一个div之前的所有兄弟元素加上class属性$("div:last").prevAll().addClass("9527");

• prevUntil()，返回当前元素到指定匹配的元素为止的元素，向上匹配，和nextUntil()方向相反

//给最后一个span元素，到前面的h2元素之间的元素加class属性$("span":last).prevUntil("h2").addClass("addClass");

• siblings(exp)，返回所有兄弟元素

//返回span元素的所有兄弟元素，即前后都算$("span").siblings();

• add()，把add匹配的选择器元素加到当前的jQuery对象中

//本来只返回div元素，加入add后，返回的元素中多了span，可以用下标取出验证$("div").add("span");

//查找所有的span元素和id为two的元素$("span").add("#two").css("background-color","#bfa");

13、jQuery属性操作之html()、text()、val()方法

• html()方法：
  设置和获取起始标签和结束标签之间的内容，跟dom属性innerHTML一样

• text()方法：
  设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样

• val()方法：
  设置和获取表单项的value属性值，跟dom属性的value一样

不传参数是获取，传递参数是设置

举例：

divTag div中的span
获取表单项内容并重新赋值

   

运行效果：

val方法还能同时设置多个表单项的选中状态：

单选：radio1radio2
多选：checkbox1checkbox2checkbox3
下拉多选：mul1mul2mul3mul4
下拉单选：sin1sin3sin3

运行效果：

当然也可一起来操作，不分单选、多选、下拉

$(":radio,:checkbox,#multiple,#single").val(["radio2","checkbox1","checkbox3","mul2","sin3"]);

14、jQuery属性操作之attr()和prop()

二者都可以设置和获取属性的值，区别如下：

多选：
checkbox1
checkbox2
checkbox3

所以：
二者都可以设置和获取属性的值，区别如下：

• attr()方法不推荐操作checked、readOnly、selected、disabled……
• prop()方法只推荐操作checked、readOnly、selected、disabled，它的出现就是弥补了attr()

//使用prop操作全部不选中
$(":checkbox").prop("checked",falsse);

此外，attr方法还可以操作非标准的属性，比如设置和获取自定义属性abc

//设置
$(":checkbox:first").attr("abc","abcvalue");

小练习–全选、全不选

//给全选绑定单击事件
//全不选则prop为false$(function(){$("#checkedAllBtn").click(function(){$(":checkbox").prop("checked",true);});
});//反选
$(function(){$("#checkedNoBtn").click(function(){//each函数遍历$(":checkbox").each(function(){//this代表当前遍历到的dom对象this.checked = !this.checked;	});
});

//实现：当所有name=items的复选框被选中的时候，全选框被自动选中//获取全部复选框个数
var allCount = $(":checkbox[name='items']").length
//获取被选中的复选框个数
var checkedCount = $(":checkbox[name='items']:checked").lengthif(allCount == checkedCount){$("#checkedAllBox").prop("checked",true);
}else{$("#checkedAllBox").prop("checked",false);
}
//后面这个if语句整体优化：
$("#checkAllBox").prop("checked",allCount == checkedCount);

之间旧的实现思路复习：