jQuery

最新推荐文章于 2024-08-23 20:55:13 发布

陛下，再来一杯娃哈哈

最新推荐文章于 2024-08-23 20:55:13 发布

阅读量77

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_46420078/article/details/121728755

版权

1、jQuery是一个快速的、简洁的JS库。理念：写得少，做得多

2.（1）原生写法

$(document).read(function(){
jQuery 代码；
})

'$':是jQuery的全局对象，代表的是jQuery

$(document).ready(function(){   //原生写法
            $('#dd').css({'width':'200px','height':'200px','backgroundColor':'red'})
        })

（2）简写：

$(function(){
jQuery代码；
})

 $(function(){   //简写
            $('#ddd').css({'width':'200px','height':'200px','backgroundColor':'green'})
        })

3、jQuery选择器

（1）id选择器：$('#id属性名')

$(function(){
            $('#one').css('backgroundColor','yellow')
        })

（2）全选选择器：$('*')表示选择所有的元素

$(function(){
        $('*').css('backgroundColor','#ccc')
    })

（3）类选择器：$('.class属性名')

$(function(){
            $('.one').css('backgroundColor','yellow')
        })

（4）标签名选择器：$('标签名')

$(function(){
            $('p').eq(0).css('backgroundColor','blue')
        })

4、过滤选择器

（1）：first :选取第一个元素

$(function(){
      $(p:first).css('color','red')  
    })

（2）：last :选取最后一个元素

$(function(){
        $(p:last).css('color','yellow')
    })

（3）：not（选择器）：选择不是给的选择器的元素

$(function(){
        $('p:not('#p1')').css('color','red')
    })

(4)通过索引选择

$('p:even').css('backgroundColor','#bbffaa') //索引为偶数的元素    
$('p:odd').css('color','blue')  //索引为奇数的元素
$('p:eq(3)').css('color','yellow')  //索引等于3的元素

5、属性过滤选择器

（1）[attribute] :选择拥有此属性的元素

//选择拥有name属性的input元素
$('input[name]').css('color','red')

（2）[attribute = value] :指定属性值为value的元素

//选择name属性值为userName的input元素
$('input[name = userName]').css('color','red')

（3）[attribute^=value]:选择指定属性值为value开头的元素

//选择id属性值是以addr开头的input
$('input[id ^= addr]').css('coloc','pink')

（4）[attribute$=value]:选择指定属性值为value结束的元素

 //选择id属性值是以AA结束的input
$('input[id $= AA]').css('color','blue')

6、子元素的过滤选择器

（1）：nth-child（index/even/odd）：选择每个父元素下的（index/even/odd）子元素

//选择div的所有索引为偶数的子元素
$('div :nth-child(even)').css('color','pink')
//选择div的所有索引为2的倍数的子元素
$('div :nth-child(2n)').css('color','blue')

（2）：first-child：选择父元素下的第一个子元素

//选择id为two的父元素的第一个子元素
$('#two :first-child').css('color','green')

关注