jQuery_代码007

本文介绍: jQue ry是Jav aSc rip t的工具库，对原生Jav aSc rip t中的DOM操作、事件处理、数据处理等进行封装,提供更便捷的方法。

jQue ry

jQue ry是Jav aScrip t的工具库，对原生JavaScrip t中的DOM操作、事件处理、数据处理等进行封装,提供更便捷的方法。

引入

https://www.boot cdn.cn/

https://jquery.cu i sh i feng.cn/

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
<head&gt;
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 通过cdn在网络中实时获取源码内容 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <!-- 导入本地的jquery文件 -->
    <script src="jquery.min.js"></script>
</body>
</html>

工厂 函数 – $()

“$()”函数用于获取元素节点，创建元素节点或将原生JavaScript对象转换为jquery 对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。

原生JavaScript对象与jQuery 对象的属性和方法不能混用。可以根据需要，互相转换 :

原生JavaScr ipt转换jQuery对象

$(原生对象)，返回 jQuery 对象
jQuery对象转换原生JavaScript对象

方法一 : 根据下标取元素,取出即为原生对象
var div = $(“div”)[0];

方法二 : 使用jQuery的get(index)取原生对象
var div2 = $(“div”).get(0);

jQuery获取元素

标签 选择器：$(“div”)

ID 选择器： $KaTeX p a rs e error : E x pe cte d ‘EOF’, go t ‘#’ at position 3: (“#̲ d 1″) 类选择器：$ (“.c1”)
群组选择器：$(“body,p,h1”)

层级选择器

后代选择器： $(“di v .c1”)
子代选择器： $(“di v>span”)
相邻兄弟选择器： $(“h1+p”) 匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2
通用兄弟选择器： $(“h1~h2”) 匹配选择器1后所有满足选择器2的兄弟元素

过滤 选择器，需要 结合其他选择器使用。

对象:first
匹配第一个元素例:

(

”

)

对象

匹配最后一个元素例

(“p:first“) 对象:last 匹配最后一个元素例:

$(“ p : f i rs t “) 对象 : l a s t 匹配最后一个元素例 :$ (“p:last”)
对象:od d
匹配奇数下标对应的元素
对象:even
匹配偶数下标对应的元素
对象:eq(index)
匹配指定下标的元素
对象:lt(index)
匹配下标小于index的元素
对象:gt(index)
匹配下标大于 index的元素
对象:not(选择器)
否定筛选,除()中选择器外,其他元素

基本 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="title">静夜思</h1>
    <h2>李白</h2>
    <ul>
        <li>窗前明月光</li>
        <li class="item">疑是地上霜</li>
        <li class="item">举头望明月</li>
        <li>低头思故乡</li>
    </ul>
    <p>静夜思</p>
    <span>李白</span>
    <!-- 导入本地jquery -->
    <script src="jquery.min.js"></script>
    <script>
        $('#title').css("color","yellow").css('text-align','center')
        $('.item').css('basckground-color','pink')
        $('p,span').css('font-size','52px')
        console.log($('#title'))
    </script>
</body>
</html>

过滤 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 id="title">静夜思</h1>
    <h2>李白</h2>
    <ul>
        <li>窗前明月光</li>
        <li>窗前明月光</li>
        <li>窗前明月光</li>
        <li class="item">疑是地上霜</li>
        <li class="item">疑是地上霜</li>
        <li class="item">疑是地上霜</li>
        <li class="item">举头望明月</li>
        <li class="item">举头望明月</li>
        <li class="item">举头望明月</li>
        <li>低头思故乡</li>
        <li>低头思故乡</li>
        <li>低头思故乡</li>
    </ul>
    <!-- jquery连接 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // 选中第一个item元素       $('.itme:first').css('color','#096') 
        // 选中最后一个item元素        $('.itme:last').css('color','yellow')
        // 选中li里面的奇数下标的元素
        $('li:odd').css('color','green')
        // 选中li里面的偶数下标的元素
        $('li:even').css('color','red')
        // 选中li里面下标为5的元素
        $('li:eq(5)').css('color','#6cf')
        // 选中li里面下标小于5的元素
        $('li:lt(5)').css('color','#6cf')
        // 选中li里面下标大于于5的元素
        $('li:gt(5)').css('color','#6cf')
        // 选中li里面不是item的元素        $('li:not(.item)').css('color','#6cf')
    </script>
</body>
</html>

操作元素内容

可以和之前的表单一起使用

html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法
 text() //设置或读取标签内容,等价于innerText,不能识别标签
val() //设置或读取表单元素的值,等价于原生value 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
    <input type="text">
    <button>点击提交</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // 修改div的内容
        $('div').html('<b>记得多看书')
        $('button').click(function(){
            alert($('input').val())
        })
    </script>
</body>
</html>

操作标签属性

attr(“attrName”,“value”)

设置或读取标签属性
prop(“attrName”,“value”)

设置或读取标签属性
注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked 是否书写
rem oveAttr(“attrName”)

移除指定属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        我已经阅读并同意
        <input type="checkbox" name="" id="check" checked="true">
        <a href="#">已同意</a>
        协议
    </p>

    <input type="submit" name="" id="rad" value="注册">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $('#reg').click(function(){
            // attrname 属性名
            // alert($('#check').attr('checked'))
            // alert($('#check').prop('checked'))
            $('#check').prop('checked')? alert('注册成功'):alert('请勾选协议')
        })
    </script>
</body>
</html>

操作标签样式

为元素添加 id/class属性,对应选择器样式
针对类选择器,提供操作class属性值的方法

addClass(“className”) //添加指定的类名
 rem oveClass(“className”)//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass(“className”)//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
        .tset{
            border: 5px solid rgb(red, green, blue);
        }
    </style>
</head>
<body>
    <div class="test"></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        // 增加一个box类
        $('div').addClass('box')
        // 删除
        $('.box').removeClass('test')
    </script>
</body>
</html>

3.操作行内样式

css(“属性名”,“属性值”) //设置行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        $('div').css('height','300px').css('width','300px').css('background-color','#096')
        $('div').css({
            'height':'300px',
            'width':'300px',
            'background-color':'#096'
        })
    </script>
</body>
</html>

元素的创建，添加，删除

创建：使用$(“标签语法”)，返回创建好的元素

var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式

作为子元素添加

$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

作为兄弟元素添加

$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

移除元素

$obj.remove();	//移除$obj

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="btn">干掉敌人</button>
    <script src="./js/jquery.min.js"></script>
    <script>
        // 给body标签末尾添加一个子元素
        $('body').append('<div id="water">干掉他</div>')

        // 给body标签开头添加一个子元素
        $('body').prepend('<div id="water">杀掉他</div>')

        $('#water').before('<div class="bro">杀掉他</div>')

        $('#water').after('<div class="bro">杀掉他</div>')

        $('#water').click(function(){
            $('.water').remove()
        })
    </script>
</body>
</html>

动画 效果

显示和隐藏
```
show(speed,callback)/hide(speed,callback)
```
- speed可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
- callback 可选。show 函数执行完之后，要执行的函数
下拉和上推效果，显示隐藏的被选元素（ 只针对块元素 ）
```
slideDown(speed,callback)/slideUp(speed,callback)
```
通过使用淡隐淡现方式显示效果，显示隐藏的被选元素
```
fadeOut(speed,callback)/fadeIn(speed,callback)
```

数据与对象遍历

$(selector).each() 方法规定为每个匹配元素规定运行的函数
```
$(selector).each(function(index,element){})
```
必需。为每个匹配元素规定运行的函数。
- index – 选择器的 index 位置
- element – 当前的元素
$.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理
```
$.each(Object, function(index, data){});
```
必需。为每个匹配元素规定运行的函数。
- index – 选择器的 index 位置
- data– 当前的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <script src="./js/jquery.min.js"></script>
    <script>
        $('li').each(function(index,obj){
            console.log(index,obj)
        })

        let name = ['小明','小刚','小红','小兰']
        console.log(name)
        $(name).each(function(index,obj){
            console.log(index,obj)
        })
    </script>
</body>
</html>