jQuery选择器深度解析.docx
- 文档编号：6799196
- 上传时间：2023-01-10
- 格式：DOCX
- 页数：43
- 大小：1.83MB
jQuery选择器深度解析.docx
《jQuery选择器深度解析.docx》由会员分享，可在线阅读，更多相关《jQuery选择器深度解析.docx（43页珍藏版）》请在冰豆网上搜索。
jQuery选择器深度解析
jQuery选择器2
jQuery选择器的分类2
基本选择器3
Id选择器的特殊：
只返回单个元素，这个由html的规定决定的。
3
class选择器4
基本选择器的大例子4
层次选择器7
用空格分开的层次选择器的特点7
+层次选择器8
等价关系9
层次选择器的大例子9
过滤选择器12
基本过滤13
基本过滤的例子13
内容过滤16
内容过滤的例子16
可见性过滤18
可见性过滤的例子18
属性过滤20
属性过滤的例子20
子元素过滤23
子元素过滤23
表单对象属性过滤26
表单对象属性过滤例子26
表单选择器29
表单选择器的例子29
jQuery的text和html的区别31
js里面的innerText和innerHtml的区别32
html的知识：
文本框不能输入32
html的知识：
下拉列表的类型33
视频问题34
问题34
问题1jQuery中基本选择器34
问题2jQuery拥有这么多的选择器，该怎么进行选择？
好像有些内容是重复的35
jQuery选择器
jQuery选择器的分类
基本选择器
$（“id”）,根据id值找到匹配的元素，最多只返回一个元素（如果该元素存在），如果不存在，则返回一个空的jQuery对象。
$（“.class”），根据css的class属性来返回一个集合，无论该css类是否真的存在，只要定义在元素中就能被jQuery查询到。
Id选择器的特殊：
只返回单个元素，这个由html的规定决定的。
注意跟css的区别，css可以控制所有id相同的元素的样式
jQuery1.html
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
$（document）.ready（function（）{
//结果是1，而不是2,有多个相同id的元素只返回单个元素
alert（$（"#test1"）.length）;
alert（$（"#test1"）.text（））;
alert（$（"#test1"）[0].href）;
}）;
class选择器
jQuery4.html
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
$（document）.ready（function（）{
//在这个html中没有class为test的css，但是jQuery并不关心是否存在相应的css，只关心元素是否有名为test的class修饰
alert（$（".test"）.length）;//结果为2
}）;
基本选择器的大例子
jQuery5.html
DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http:
//www.w3.org/TR/html4/loose.dtd">
$（document）.ready（function（）{
$（"#button1"）.click（function（）{
//id选择器
$（"#one"）.css（"background","red"）;
}）;
$（"#button2"）.click（function（）{
//里面隐藏了循环
//class选择器
$（".mini"）.css（"background","green"）;
}）;
$（"#button3"）.click（function（）{
//里面隐藏了循环
//标签选择器
$（"div"）.css（"background","orange"）;
}）;
$（"#button4"）.click（function（）{
//里面隐藏了循环
//所有的元素
$（"*"）.css（"background","blue"）;
}）;
$（"#button5"）.click（function（）{
//里面隐藏了循环
//组合
$（"span,#two,.mini"）.css（"background","pink"）;
}）;
}）;
基本选择器
id为one，class为one的div
id为two，class为one,title为test的div