订阅博客
收藏博客
微博分享
QQ空间分享

jquery各种选择器和方法的使用

频道:前端 标签: 时间:2019年07月25日 浏览:39次 评论:0条
作者: 三只松果

一、创建一个jQuery对象

最基本的三种选择器

1、var $p = $("p");  "p"为标签名字,该语句为创建一个p标签的对象

2、var $div1 = $("#div1") ;  "#div1"为元素的id,该语句通过id获取一个对象

3、var $div1 = $(".div1") ;   ".div1"为元素的class名,该语句通过类名获取一个对象

4、var $div1 = $("*") ;  表示选择网页内的所有元素


层级选择器

1、$('div > p')选择所有div元素里的子元素p(选不到子元素中的p)

2、$('div p')选择所有div元素里面的p元素

3、$('.prev + div')选取prev后面的第一个的div兄弟节点

4、$('.prev ~ div')选取prev后面的所有的div兄弟节点


基本筛选选择器

1、$("li:first")找到第一个li

2、$("li:last")找到最后一个li

3、$("li:even")even 选择所引值为偶数的元素,从 0 开始计数

4、$("li:odd")odd 选择所引值为奇数的元素,从 0 开始计数

5、$("li:eq(2)")选择索引值为2的li节点

6、$("li:gt(2)")选择索引值大于2的所有节点

7、$("li:lt(2)")选择索引值小于2的所有节点


内容筛选选择器

1、$("li:contains('3')")选择所有li元素中内容包含3的节点

2、$("li:has(span)") 选择所有li元素中包含span标签的节点

3、$("a:parent")选择包含有子元素或者内容的a类型元素

4、$("a:empty")选择没有包含任何元素或内容的a元素


注意事项:

1. :contains与:has都有查找的意思,但是contains查找包含“指定文 本”的元素,has查找包含“指定元素”的元素

2. 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合 条件的。

3. :parent与:empty是相反的,两者所涉及的子元素,包括文本节点


可见性筛选选择器

1、查找id = li2的DOM元素,是否可见 show($('#li2:visible'));

2、查找id = li2的DOM元素,是否隐藏 show($('#li2:hidden'));


属性筛选选择器

1、查找所有li中,属性id=li2的元素$('li[id=li2]')

2、查找所有li中,有属性id的li元素$('li[id]')

3、查找所有li中,有属性id中的值等于或以“five”为前缀的li元素 $('li[id|=five]')

4、查找所有li中,有属性id中的值包含一个连字符“空”和“five”的li元素 $('li[id~=five]')

5、查找所有li中,属性id的值是用go开头的$('li[id^=fi]')

6、查找所有li中,属性id的值是用od结尾的 $('li[id$=od]')

7、查找所有li中,有属性id中的值包含一个ve字符串的li元素 $('li[id*=ve]')

8、查找所有li中,有属性id中的值没有包含"li2"的li $('li[id!=li2]')


子元素筛选选择器

image.png


表单元素选择器

1、input 选择器基本上选择所有表单控件 $(':input')

2、匹配所有input元素中类型为text的input元素 $('input:text')

3、其他的根据第二条类推


表单对象属性筛选选择器

1、$('input:enabled')查找所有可用的input元素

2、$('input:disabled')查找所有不可用的input元素

3、$('input:checked')查找所有被勾选的input元素


特殊选择器this

$('p').click(function(){

     //把p元素转化成jQuery的对象 

        var $this= $(this) 

        $this.css('color','red')


    })

this等价于$('p')


二、jquer属性和样式


1、.attr()与.removeAttr()

attr()有4个用法:

1.1. attr(传入属性名):获取属性的值
1.2. attr(属性名, 属性值):设置属性的值 3.attr(属性名,函数值):设置属性的函数值 4.attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , ... ... }

1.3removeAttr()删除方法.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移 除一个属性(attribute)


2、.html()与.text()

2.1、.html()不传入值时,返回元素的HTML内容

2.2、.html( htmlString ) 为匹配的元素设置HTML值

2.3、.html( function(index, oldhtml) )用函数返回值设置元素的html值

2.4、text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代

2.5、.text( textString ) 用于设置匹配元素内容的文本

2.6、.text( function(index, text) ) 用来返回设置文本内容的一个函数


3、.val()方法

3.1、val()无参数,获取匹配的元素集合中第一个元素的当前值 

3.2、val( value ),设置匹配的元素集合中每个元素的值
3.3、val( function ) ,一个用来返回设置值的函数


4、增加样式.addClass()和移除样式.removeClass()和切换样式.toggleClass()

4.1、$("li").addClass("newClass")为li增加一个样式,当增加多个样式时用空格隔开

4.2、以函数返回值的方式增加样式

$("li").addClass(function(index,className){

        if (-1 != className.indexOf("li")) { 

                $(this).addClass("testClass")

        } })

4.3、移除样式类比上面添加样式

4.4、给所有的tr元素加一个class="c"的样式 $("#table tr").toggleClass("c");如果样式c已存在就移除c样式


5、样式操作.css()

获取:

5.1、.css( propertyName ) :获取匹配元素集合中的第一个元素的样式 属性的计算值

5.2、.css( propertyNames ):传递一组数组,返回一个对象结果


设置:

5.3 、.css(propertyName, value ):设置CSS

5.4、 .css( propertyName, function ):可以传入一个回调函数,返回取到 对应的值进行处理

5.5、 .css( properties ):可以传一个对象,同时设置多个样式

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。