前端 -- jQuery

jQuery引入

• 下载链接: [jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

• 引入: <script src = 'jquery.js'> </script>

jQuery对象和dom对象

• jQuery找到的对象称为 --> jQuery对象

• 原生js找到的标签称为 --> dom对象

• dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法

• dom对象和jquery对象互相转换:

  • jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]

  • dom对象转jquery对象 -- $(dom对象)

jQuery选择器

基本选择器(同css一样)

• 不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象

• 通过 .text() 可以拿到标签里面的文本内容

1. id选择器

   • $("#id值")

2. 标签选择器

   • $("标签名")

3. class选择器

   • $(".类名")

4. 配合使用

   • $("div.c1") 找到有c1 class类的div 标签

5. 所有元素选择器

   • $("*")

6. 组合选择器

   • $("#id, .className, tagName")

7. 层级选择器

   • x和y可以为任意选择器

   • $("x y"); x的所有后代y（子子孙孙）

   • $("x > y"); x的所有儿子y（儿子）

   • $("x + y"); 找到所有紧挨在x后面的y(一个)

   • $("x ~ y"); x之后所有的兄弟y

• 选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本筛选器(选择之后进行过滤)

<ul>
    <li id="1">南山</li>
    <li id="2">
        <a href="">百度</a>
        宝安
    </li>
    <li id="3">坪山</li>
    <li id="4">罗湖</li>
    <li id="5">
        <a href="">华为</a>
        福田
    </li>
    <li id="6">龙岗</li>
</ul>
​
:first  -- 示例:$('li:first')  // 第一个
:last       // 最后一个
:eq(index)  // 索引等于index的那个元素
:even  　　　// 匹配所有索引值为偶数的元素，从 0 开始计数
:odd        // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)     // 匹配所有大于给定索引值的元素
:lt(index)     // 匹配所有小于给定索引值的元素
:not(选择器)    // 排除所有满足not条件的标签
:has(选择器)    // --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签

本网刊登的文章均仅代表作者个人观点，并不代表本网立场。文中的论述和观点，敬请读者注意判断。

本文地址：http://www.xlkjgs.com/notes/js/1755.html