jQuery(简介、特点、使用方法、【重点】jQuery的选择器：是jQuery的灵魂、jQuery的属性：操作标签的属性)

m-TT

已于 2022-11-08 09:25:09 修改

阅读量470

点赞数 3

分类专栏： js 文章标签： jquery javascript 前端 html

于 2022-11-03 17:43:05 首次发布

本文链接：https://blog.csdn.net/weixin_44892365/article/details/127672148

版权

https://www.jq22.com/chm/jquery/index.html

一.jQuery

1.简介：是一个对JavaScript进行了封装的库，简化了用户使用javascript

2.特点：写得少、做的多

3.使用方法：

（1）在页面中引入jQuery库：引入外部的js文件

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

（3）$(function(){})：jQuery代码的入口函数。

原始写法：$(document).ready(function(){})----window.onload

简写为：$(function(){})

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<style>
    #box{
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <br>
    <div id="box"></div>
    <script>
        $(document).ready(function(){})
        // document.querySelector('#hide').addEventListener('click',function(){
        //     document.querySelector('#box').style.display = 'none'
        // })
        // 可以将$换成jQuery
        $(function(){
            // 隐藏 hide()
            $('#hide').click(function(){
                $('#box').hide(2000)//hide(2000)过渡时间为2秒
            })
            // 显示 show()
            $('#show').click(function(){
                $('#box').show(2000)//show(2000)过渡时间为2秒
            })
        })

    </script>
</body>

二.jQuery的选择器：是jQuery的灵魂

1.基本选择器

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

（2）类选择器：$('.class')

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

（4）通配符选择器：$('*')

（5）合并选择器：$('#id,.class')

强调：css()函数的作用：是jQuery中用于设置元素CSS样式的函数

a.css('样式属性名','属性值')：设置单个样式

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>
    <script>
        $(function(){
            $('#one').css('background-color','red')
        })
    </script>
</body>

b.css({'属性名1'：'属性值1'，'属性名2'：'属性值2'……})

eq(index):匹配一个给定索引值的元素。页面中元素的索引值从0开始

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="one">八百里秦川</p>

    <p>钟楼</p>
    <p>鼓楼</p>
    <p>回民街</p>

    <h1>会计</h1>
    <h2>出纳</h2>
    <script>
        // $(function(){
        //     $('#one').css('background-color','red')
        // })
        $(function(){
            $('p').css({'backgroundColor':'yellow','color':'pink'})

            // 改变第一个p背景色和字体颜色
            $('p').eq(0).css({'backgroundColor':'red','color':'black'})
            // 改变最后一个p的字体颜色
            $('p').eq(2).css({'color':'skyblue'})

            // 改变所有<h1>
            $('h1,#one').css({'backgroundColor':'red'})
        })
    </script>
</body>

2.过滤选择器：是通过特定的过滤规则来筛选出所需的DOM元素。

2.1基本过滤选择器

(1):first---选择第一个元素

(2):last---选择最后一个元素

(3):not(select)---去除所有与给定选择器相匹配的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 第一个
            $('li:first').css('color','red')
            // 最后一个
            $('li:last').css('fontSize','30px')
            // 除id='n1'之外的其他元素文字都为蓝色
            $('li:not(#n1)').css('color','blue')
        })
    </script>
</body>

(4):even---匹配所有索引值为偶数的元素，从0开始计数

(5):odd---匹配所有索引值为奇数的元素，从1开始计数

(6):eq(index)---匹配一个给定索引值的元素

(7):gt(index)---匹配所有大于给定索引值的元素

(8):lt(index)---匹配所有小于给定索引值的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>春</li>
        <li>夏</li>
        <li id="n1">秋</li>
        <li>冬</li>
    </ul>
    <script>
        $(function(){
            // 匹配索引为偶数的元素
            $('li:even').css('fontSize','50px')
            // 匹配索引为奇数的元素
            $('li:odd').css({'fontSize':'10px','color':'purple'})

        })
    </script>
</body>

2.2内容过滤选择器

(1):contains(text)---匹配包含给定文本的元素

(2):empty---匹配所有不包含子元素或者文本的空元素

(3):has(selector)---匹配含有选择器所匹配的元素的元素

(4):parent--- 匹配含有子元素或者文本的元素

<head>
    <script src="./js/jquery-3.4.1.js"></script>
</head>
<body>
    <div>

最低0.47元/天解锁文章