湛江网站制作网站,沙漠风网站建设公司,做网站说什么5.0啥意思,无锡连夜发布最新通告一、单个选择器
选择器是jQuery的核心。
一个选择器写出来类似$(#dom-id)。 美元符号定义 jQuery 为什么jQuery要发明选择器#xff1f;回顾一下DOM操作中我们经常使用的代码#xff1a;
// 按ID查找#xff1a;
var a document.getElementById(dom-id);// 按tag查找#dom-id)。 美元符号定义 jQuery 为什么jQuery要发明选择器回顾一下DOM操作中我们经常使用的代码
// 按ID查找
var a document.getElementById(dom-id);// 按tag查找
var divs document.getElementsByTagName(div);// 查找p classred
var ps document.getElementsByTagName(p);
// 过滤出classred:
// TODO:// 查找table classgreen里面的所有tr
var table ...
for (var i0; itable.children; i) {// TODO: 过滤出tr
}
这些代码实在太繁琐了并且在层级关系中例如查找table classgreen里面的所有tr一层循环实际上是错的因为table的标准写法是
tabletbodytr.../trtr.../tr/tbody
/table
很多时候需要递归查找所有子节点。 tbody标签是一个语义标签。 tbody标签在HTML中主要用于表示表格的主体部分。它包含了表格中的所有行这些行又由tr表格行标签定义而tr标签内部则包含td表格数据或th表格头部标签来定义单元格。 tbody标签是可选地即使你不在代码中显式地包含它浏览器在渲染时仍会隐式地创建它。因此即使你省略了tbody标签表格的行和单元格仍然会被正确地渲染和显示。 目的提高代码的可读性和可维护性 jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点 1-1、按ID查找
如果某个DOM节点有id属性利用jQuery查找如下
// 查找div idabc:
var div $(#abc);
注意#abc以#开头。返回的对象是jQuery对象。 1、jQuery对象
jQuery对象类似数组它的每个元素都是一个引用了DOM节点的对象。
以上面的查找为例如果id为abc的div存在返回的jQuery对象如下
[div idabc.../div]
如果id为abc的div不存在返回的jQuery对象如下
[]
总之jQuery的选择器不会返回undefined或者null这样的好处是你不必在下一行判断if (div undefined)。 2、jQuery对象DOM对象
jQuery对象和DOM对象之间可以互相转化
var div $(#abc); // jQuery对象
var divDom div.get(0); // 假设存在div获取第1个DOM元素
var another $(divDom); // 重新把DOM包装为jQuery对象 通常情况下你不需要获取DOM对象直接使用jQuery对象更加方便。
如果你拿到了一个DOM对象那可以简单地调用$(aDomObject)把它变成jQuery对象这样就可以方便地使用jQuery的API了。 注意 虽然 div 和 another 都表示同一个 DOM 元素但它们是不同的 jQuery 对象实例。 如果您想检查两个 jQuery 对象是否包含相同的 DOM 元素您可以使用 .is() 方法或者比较它们的 .get() 结果。
if (div.is(another)) { console.log(div 和 another 包含相同的 DOM 元素);
} else { console.log(div 和 another 不相等);
} // 或者使用 .get() 方法并比较 DOM 元素
if (div.get(0) another.get(0)) { console.log(div 和 another 指向相同的 DOM 元素);
} else { console.log(div 和 another 不相等);
} 1-2、按tag查找
按tag查找只需要写上tag名称就可以了
var ps $(p); // 返回所有p节点
ps.length; // 数一数页面有多少个p节点 1-3、按class查找
按class查找注意在class名称前加一个.
var a $(.red); // 所有节点包含classred都将返回
// 例如:
// div classred.../div
// p classgreen red.../p
通常很多节点有多个class我们可以查找同时包含red和green的节点
var a $(.red.green); // 注意没有空格
// 符合条件的节点
// div classred green.../div
// div classblue green red.../div 1-4、按属性查找
一个DOM节点除了id和class外还可以有很多属性很多时候按属性查找会非常方便比如在一个表单中按属性来查找
var email $([nameemail]); // 找出??? nameemail
var passwordInput $([typepassword]); // 找出??? typepassword
var a $([itemsA B]); // 找出??? itemsA B
当属性的值包含空格等特殊字符时需要用双引号括起来。
按属性查找还可以使用前缀查找或者后缀查找
var icons $([name^icon]); // 找出所有name属性值以icon开头的DOM
// 例如: nameicon-1, nameicon-2
var names $([name$with]); // 找出所有name属性值以with结尾的DOM
// 例如: namestartswith, nameendswith
这个方法尤其适合通过class属性查找且不受class包含多个名称的影响
var icons $([class^icon-]); // 找出所有class包含至少一个以icon-开头的DOM
// 例如: classicon-clock, classabc icon-home 1-5、组合查找
组合查找就是把上述简单选择器组合起来使用。
如果我们查找$([nameemail])很可能把表单外的div nameemail也找出来但我们只希望查找input就可以这么写
var emailInput $(input[nameemail]); // 不会找出div nameemail tag 属性 同样的根据tag和class来组合查找也很常见
var tr $(tr.red); // 找出tr classred ....../tr tag class 1-6、多项选择器
多项选择器就是把多个选择器用,组合起来一块选
$(p,div); // 把p和div都选出来
$(p.red,p.green); // 把p classred和p classgreen都选出来
要注意的是选出来的元素是按照它们在HTML中出现的顺序排列的而且不会有重复元素。
例如p classred green不会被上面的$(p.red,p.green)选择两次。 二、层级选择器空格
因为DOM的结构就是层级结构所以我们经常要根据层级关系进行选择。
如果两个DOM元素具有层级关系就可以用$(ancestor descendant)来选择层级之间用空格隔开。例如
!-- HTML结构 --
div classtestingul classlangli classlang-javascriptJavaScript/lili classlang-pythonPython/lili classlang-luaLua/li/ul
/div
1、要选出JavaScript可以用层级选择器
$(ul.lang li.lang-javascript); // [li classlang-javascriptJavaScript/li]
$(div.testing li.lang-javascript); // [li classlang-javascriptJavaScript/li]
因为div和ul都是li的祖先节点所以上面两种方式都可以选出相应的li节点。 2、要选择所有的li节点用
$(ul.lang li);
这种层级选择器相比单个的选择器好处在于它缩小了选择范围因为首先要定位父节点才能选择相应的子节点这样避免了页面其他不相关的元素。
例如
$(form[nameupload] input);
就把选择范围限定在name属性为upload的表单里。如果页面有很多表单其他表单的input不会被选择。 3、多层选择也是允许的
$(form.test p input); // 在form表单选择被p包含的input 三、子选择器
子选择器$(parentchild)类似层级选择器但是限定了层级关系必须是父子关系就是child节点必须是parent节点的直属子节点。还是以上面的例子
$(ul.langli.lang-javascript); // 可以选出[li classlang-javascriptJavaScript/li]
$(div.testingli.lang-javascript); // [], 无法选出因为div和li不构成父子关系 四、过滤器:
过滤器一般不单独使用它通常附加在选择器上帮助我们更精确地定位元素。观察过滤器的效果
$(ul.lang li); // 选出JavaScript、Python和Lua 3个节点$(ul.lang li:first-child); // 仅选出JavaScript
$(ul.lang li:last-child); // 仅选出Lua
$(ul.lang li:nth-child(2)); // 选出第N个元素N从1开始
$(ul.lang li:nth-child(even)); // 选出序号为偶数的元素
$(ul.lang li:nth-child(odd)); // 选出序号为奇数的元素 五、表单相关
针对表单元素jQuery还有一组特殊的选择器 :input可以选择inputtextareaselect和button :file可以选择input typefile和input[typefile]一样 :checkbox可以选择复选框和input[typecheckbox]一样 :radio可以选择单选框和input[typeradio]一样 :focus可以选择当前输入焦点的元素例如把光标放到一个input上用$(input:focus)就可以选出 :checked选择当前勾上的单选框和复选框用这个选择器可以立刻获得用户选择的项目如$(input[typeradio]:checked) :enabled可以选择可以正常输入的input、select 等也就是没有灰掉的输入 :disabled和:enabled正好相反选择那些不能输入的。
此外jQuery还有很多有用的选择器例如选出可见的或隐藏的元素
$(div:visible); // 所有可见的div
$(div:hidden); // 所有隐藏的div
