jQuery笔记梳理

最新推荐文章于 2024-07-06 22:48:04 发布

做最幸福的

最新推荐文章于 2024-07-06 22:48:04 发布

阅读量777

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_44794280/article/details/121377737

版权

jquery 专栏收录该内容

1 篇文章

订阅专栏

1.jQuery引入方式？

<script src="jQuery文件路径"></script>

2.jQuery与js相互转化？
js---->jQuery
$(js对象)---->可以将js对象转化为jQuery对象。
jQuery----->js
jQuery对象的本质是一个数组，该数组中的每一个对象都是js对象。

console.log($("#ipt").length)//查看jquery的长度
        //利用jquery的长度得到
        console.log($("#ipt")[0].value);

3.jQuery选择器(重要)

基本选择器

选择器名称	语法	解释
标签选择器(元素选择器)	$(“html标签名” ）	获得所有匹配标签名称的元素
id选择器	$("#id的属性值")	获得与指定id属性值匹配的元素
类选择器	$(".class的属性值")	获得与指定的class属性值匹配的元素

层级选择器
A空格B：表示获取A里面的所有B(孙子也能获取)
A>B：表示获取A里面的子元素B(孙子不能获取)
属性选择器
[属性名]包含某个属性

<input type="text" id="ipt" value="great" /><br />
    <input type="password" value="110" />
    <script>
        // 目标:设置有id属性的input标签的背景色为红色
        //属性选择器：[属性名]包含某个属性
        $("input[id]").css("background-color", "red");
        // $("#ipt").css("background-color", "red")
    </script>

[属性名=值]

 <input type="text" id="ipt" value="great" /><br />
    <input type="password" value="110" />
    <script>
        
        //目标：设置type为password的背景色为蓝色
        $("input[type='password']").css("background-color", "blue");
    </script>

基本过滤选择器

<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <td colspan="5"><input type="button" value="删除"></td>
        </tr>
        <tr style="background-color: #999999;">
            <th><input type="checkbox"></th>
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
    <script>
        //目标1:设置第一行的背景色为红色
        $("tr:first").css("background-color", "red");
        //目标2:设置最后一行的背景色为蓝色
        $("tr:last").css("background-color", "blue");
        //目标3：设置所有奇数行为绿色
        $("tr:odd").css("background-color", "green");
        //目标4:设置所有偶数行为黄色
        $("tr:even").css("background-color", "yellow");
        //目标5:设置下标3的那一行的背景色为粉红色，关键知识点：eq(index)
        $("tr:eq(3)").css("background-color", "pink");
        //目标6:设置所有下标小于3的所有行的背景色为灰色,关键知识点:lt(index)
        $("tr:lt(3)").css("background-color", "gray");
        //目标7:设置所有下标大于3的所有行的背景色为橘色，关键知识点:gt(index)
        $("tr:gt(3)").css("background-color", "orange")
    </script>
</body>

表单属性选择器

<script type="text/javascript">
    //设置可用的文本框的背景色为红色
    function fn1() {
        //先获取到可用的文本框，然后设置它的背景色
        // :text 获取所有的文本框
        // :enabled 获取可用的
        $(":text:enabled").css("background-color", "red")
    }

    //设置不可用的文本框的背景色为红色
    function fn2() {
        //先获取不可用的文本框，然后设置它的背景色
        // :disabled 获取不可用的
        $(":text:disabled").css("background-color", "red")
    }
    //获取选中的多选框的个数
    function fn3() {
        // 获取选中的多选框，然后再通过length获取它的个数
        // :checkbox 获取多选框
        // :checked 获取选中的单选或者多选框
        console.log($(":checkbox:checked").length)
    }

    //获取选中的下拉框的个数
    function fn4() {
        //: selected 获取选中的下拉框的个数
        console.log($(":selected").length)
    }
</script>

4.jQuery操作标签的样式
例如：鼠标移入到输入框的时候输入框变红，移除变蓝

可以利用css设置。
部分代码如下：

            $("#ipt").css("background-color", "blue");

利用addClass()设置。
部分代码如下：

 .redStyle {
            background-color: red;
            width: 800px;
            height: 80px;
        }
  $("#ipt").addClass("redStyle");

5.jQuery操作标签的属性

API方法	解释
attr(name,[value])	获取/设置属性的值
prop(name,[value]	获取/设置属性的值(checked,selected)

attr与prop的注意问题
1.boolean类型的属性例如checked和selected建议使用prop操作，其他使用attr获取
2.attr方法可以操作标签的一切属性，而prop方法只能操作标签内置有的属性
6.jQuery操作文本和值
代码及用法见下：

<!DOCTYPE html>
<html lang="en">

<head>
    <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>jquery获取文本和值</title>
</head>
<script src="../JQuery/jQuery文件夹/jquery-3.3.1.js"></script>

<body>
    <input type="text" name="username" id="ipt" value="刘德华" />
    <div id="city">
        <h1>北京</h1>
    </div>
    <script>
        // 1.val()方法如果不传入参数，表示获取value的值
        // console.log($("#ipt").val());
        //2.如果val("")里面传入参数，表示设置value的值
        // $("#ipt").val("四大天王");
        //3.获取id为city的div中的文本内容,text()方法表示不传入参数，获取标签体的文本,需要注意，空格也是文本
        // console.log($("#city").text());
        //4.获取div中的所有内容，html()方法表示不传入参数，获取标签体的所有内容
        // console.log($("#city").html());
        //5.text()方法传入参数，表示设置标签体的文本，如果加入<h1>之类的样式也会当作普通文本
        // console.log($("#city").text("河南"));
    </script>
</body>

</html>

7.jquery创建，插入和删除标签
在这里插入图片描述

<body>
    <ul id="city">
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li id="sz">深圳</li>
    </ul>
    <input type="button" value="addCity" onclick="addCity()"><br />
    <input type="button" value="removeCity" onclick="removeCity()"><br />
    <input type="button" value="clearAllCity" onclick="clearAllCity()"><br />
    <script>
        // 目标1:点击添加按钮，往城市列表中添加河南
        function addCity() {
            //创建一个标签
            // $("<li id='hn'>河南</li>");
            //first,父标签将其追加到最后,append()方法，新创建出来的标签添加到最后。
            // $("#city").append($("<li id='hn'>河南</li>"));
            //second,appendTo()方法，新创建的标签被添加到列表中和append()方法是一致的。
            // $("<li id='hn'>河南</li>").appendTo($("#city"));
            //third,prepend()方法，父标签将子标签添加到最前面
            // $("#city").prepend($("<li id='hn'>河南</li>"))
            //four,prependTo()方法和appendTo()方法用法一致
            //five,before()方法,插入到当前元素之前，兄弟关系
            // $("#sz").before($("<li id='sx'>陕西</li>"));
            //six,after()方法，在某个标签之后添加标签，兄弟关系
            // $("#sz").after($("<li id='zj'>浙江</li>"));
        }
        //目标2:点击removeCity按钮，删除特定的城市
        function removeCity() {
            $("#sz").remove();
        }
        //目标三:点击clearAlllCity()，删除所有的城市
        function clearAllCity() {
            $("#city").empty();//与直接调用remove()方法不一样的是，remove()方法会删除所有内容，clear()会保留<ul>只会删除子元素
        }
    </script>
</body>

8.jQuery绑定事件介绍
主要有匿名函数绑定和on() 方法绑定，代码及使用方式如下:

<body>
    <input type="button" value="点击" id="btn1" />
</body>
<script>
    // 以下是jquery的匿名函数绑定事件
    /* $("#btn1").mouseover(function () {
        alert("你XX");
    }) */
    //以下是jquery的on()方法绑定事件
    /* 语法:$("#btn1").on("事件类型", function () {

    }) */
    $("#btn1").on("mouseover", function () {
        alert("你XX");
    })
</script>

9.jQuery解绑事件的介绍
jquery的off()方法可以解绑事件，但是只能解绑jQuery绑定事件，
off()方法，如果传入参数，表示解绑某种事件;off()方法如果不传入参数，表示解绑所有事件。

//解绑某种事件
$("#btn1").off("mouseover");
//解绑所有事件
$("").off();

10.jQuery事件遍历
主要有全局each()遍历 ，for of遍历 代码及使用如下：

<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <script>
        // jquery对象的each()方法，可以遍历出每一个jQuery对象
        //index表示遍历出来的每一个元素的下标，element就表示遍历出来的每一个元素。
        $("li").each(function (index, element) {
            console.log(index + ":" + element.innerHTML);
        })
        //jqery的全局each()方法进行遍历，jQuery的全局方法就是使用$调用的方法，不需要某个jQuery对象调用，既可以遍历jQuery对象，也可以遍历js对象
        // 语法:$.each(要遍历的对象,处理遍历结果的回调函数);
        $.each($("li"), function (index, element) {
            console.log(index + ";" + element.innerHTML);
        })
        //for of进行遍历,类似于增强for，遍历数组的时候没有元素下标
        // 语法:for(element of 要遍历的数组){},也可以遍历js对象
        for (element of $("li")) {
            console.log("--->" + element.innerHTML);
        }
    </script>
</body>

11.jQuery动画(了解)
1.基本效果
在这里插入图片描述

<!-- 分别在这里演示，jquery的基本效果 -->
<body>
    <img src="img/lyf.webp" width="410px" height="300px" /><br />
    <input type="button" onclick="showImg()" value="显示图片" />
    <input type="button" onclick="hideImg()" value="隐藏图片" />
    <input type="button" onclick="toggleImg()" value="切换图片" />
    <script>
        // 语法:$("").show(毫秒数,回调函数)/hide()/toggle(),回调函数是在图片加载完毕或则隐藏完毕或则切换完毕的时候执行
        function showImg() {
            $("img").show(2000, function () {
                alert("图片显示完毕")
            })
        }
        function hideImg() {
            $("img").hide(2000, function () {
                alert("图片隐藏完毕")
            })
        }
        function toggleImg() {
            $("img").toggle(2000, function () {
                alert("图片切换完毕")
            })
        }
    </script>
</body>