位置: 编程技术 - 正文
jQuery中选择器的基础使用教程(jquery选择器的作用)
编辑：rootadmin推荐整理分享jQuery中选择器的基础使用教程(jquery选择器的作用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:jquery选择器的优势有哪些,jquery选择器的优势有哪些,jquery选择器的分类有哪些,jquery选择器的优势有哪些,jquery选择器的分类有哪些,jquery选择器的基本语法,jquery选择器的分类有哪些,jquery选择器的分类,内容如对您有帮助，希望把文章链接给更多的朋友！
其实选择器就像开罐器一样，会用这个工具的人，自然吃的到甜头，但不会用这个工具的人，不管罐头里面的面筋土豆有多美味，吃不到就是吃不到，就如同jquery再怎么强大，也只能看着荧幕，而不知该如何下手，不过虽然选择器不难，也容易上手，但老实说，我用了一年多下来，还是觉得自己只有用皮毛而已，所以希望藉着这一系列的笔记，让自己能更长进一些DOM怎么吃DOM可以说是JavaScript与网页之间的联系管道，他提供了一个模型，让JavaScript能藉由此模型来改变或操作整个网页，
我这边就简单介绍一下DOM模型，有个元素class名为one的是父元素，底下有三个儿子元素<p>，每个元素都视为一个节点，也可以看成一个树形图，因为我认为有些东西是Google会讲得比我好，所以还想知道更多纠结的父子关系...，可以去这，那边有很好的说明，这边就不多加解释，而当Jquery利用选择器抓取到DOM元素以后，就会将他包装成一个Jquery object，并且回传$('#MyDiv')<-- 他是一个物件这里有个观念十分重要，因为许多初学者，甚至是一些从Jquery开始学起Javascript的开发者(包括我)，常常会把以下两个程序码搞混在一起
如果你执行这段程序码出来，??会发现console出来的结果，用JavaScript取出来的结果是DOM，可是一样的div用Jquery取出来的却是个包装过后的物件，换句话说，你不能直接对包装过后的Jquery物件增加DOM的事件，而是要用Jquery提供的事件，有人会说，那意思是不是说以后只能河水不犯井水，往后互不干涉，从此分道扬镳呢&#; 到也不是
只要跟上述程序码一样就可以取得DOM的元素了$()工厂不管是如何选择，我们都会用相同的函式$()，就如之前所讲的，他能接受CSS选择器的语法做为参数，而最主要的三个参数分别为tag name、ID与class，当然，这三个参数可以再与其他CSS语法做结合
而上述函式都会如同第一章所介绍的，都有隐式迭代的特色，而为了做到跨览器的支援，Jquery的选择器包含了CSS1-3，所以不用担心一些比较特别的浏览器(对就是IE6)不能执行，除非浏览器没有开启JavaScript接着接下来我简单介绍几个用法 index == 1才可以增加CSS，这个好处就在于可以在里面做很多复杂的逻辑运算当然Jquery还有太多太多选择器可以使用，像还有.next()、.parent()、.children()一般常用的这几个，其实就很够用了我认为，再多的选择器有时候好像只是展示不同的写法，但其实只要能抓取到你想要的元素，解决问题你甚至想要这样写$('div').children().children().children().children().children()也不会有人说不行..
实例一个网站中有种的文章分类，我们设计一个类似WordPress显示各文章分类的名称及其文章数量的栏目，当用户进入一个页面时，默认显示前面5个分类的名称以及最后一个分类——其他分类，用户可以通过单击“显示全部分类”按钮来显示全部分类，同时一些推荐的分类会加下划线显示，按钮中的文字会改变为“显示部分分类”，再次单击“显示部分分类”后会回到之前的页面状态。
首先为了实现这个功能，我们需要写出相应的 html
在Html写后好再添加一些简单的css，然后就可以开始jQuery的编写。
下面的代码将实现页面加载完毕后选取相应的对象并隐藏，这里选取的是第6个分类到第9个分类4个对象，因为需要控制隐藏和显示的便是这四个分类。
$('ul li:gt(4):not(:last)')的意思便是获取索引值大于4的li元素并且去掉最后一个，需要注意的是索引值是从0开始，所以这样便可以获取第6到第9个分类。
下面将会获取“显示全部分类”按钮，并且给该按钮添加一个事件，单击该按钮后显示所有分类
.show()是用于显示元素的动画，另外由于给超链接添加onclick事件，因此需要添加return false语句阻止该超链接跳转。
写到这里，我们不难发现，jQuery的选择器跟css选择器有相近之处，其原理都是先以选择器选择对象，再添加操作，不过jQuery的选择器明显比css的丰富和简便得多，这也是使用jQuery能大大提高网站开发效率的重要原因。
接着上面的例子，根据文章开头设定的条件，在单击“显示全部分类”的按钮后，部分推荐的分类会添加下划线，同时按钮中的文字会变成“显示部分分类”，因此我们还需要在.show()和return false之间添加以下代码：
.text()用于改变对象中的文字，filter()可以用于选出推荐对象，这里推荐的是前端，CSS，jQuery，CMS，然后使用addClass()为它们添加“feature”类，因为我已预先写feature类的css，所以以上推荐对象在单击按钮后便会加上下划线。至此，可以说基本完成了这次需要的jQuery，当然用户单击“显示部分分类”后的效果还没有写上相应的jQuery。但有了前面的一段jQurey代码，相信写出单击“显示部分分类”后的代码应该不难。
在单击“显示部分分类”后的效果中其中一个是需要去掉推荐分类的下划线效果，我们可以使用removeClass()，用法与addClass相同。
现在余下的问题是如何把两段代码写在一起，由于用户在两个事件上单击的是同一个按钮，因此事件仍然是在刚才的按钮元素上，要使两种状态在一个元素上进行，我们可以使用判断：
整个完整的jQuery代码如下：
上面的判断语句，用法与一般的高级编程语言相近，但放在jQuery这个以轻便闻名的js库中不免显得繁琐，其实在jQuery中有更为轻便的方法去实现上面的例子，即toggle()方法，代码如下：
具体的效果可以看demo note-selector
以WordPress为例讲解jQuery美化页面Title的方法 这里选取的例子，便是WordPress中比较有名的美化超链接Title效果，一般的title效果是把鼠标放到a元素中便会显示一个黄底色框，而且是延时显示，这样显
jQuery插件formValidator实现表单验证 本文实例为大家分享了formValidator实现表单验证的具体代码，供大家参考，具体内容如下测试效果：所需的库文件：实现代码：%@pagelanguage="java"contentType="
jQuery实现页面评论栏中访客信息自动填写功能的方法 首先简单说一说仿登陆的具体操作，用户第一次登陆时会出现用于填写评论者资料的框，当用户评论完成后，将会以cookie的方式记录评论者资料，一年
标签: jquery选择器的作用
本文链接地址:https://www.jiuchutong.com/biancheng/387233.html 转载请保留说明！
