初探jquery（一）

最新推荐文章于 2021-09-28 18:29:36 发布

归零-li

最新推荐文章于 2021-09-28 18:29:36 发布

阅读量121

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/tozeroblog/article/details/80818379

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

由于找的实习需要用到jquery，所以打算开始学习jquery，迈入jquery大门，在此将自己最近看的视频笔记记录下来，用来方便自己复习，可能都是一些零碎的知识点

学习新的东西，需要了解该东西的设计思想，这是我在看视频中觉得说的很对的地方

1.jq的设计思想：

选择网页元素：模拟css选择元素

独有表达式选择

多种筛选方法

2.jq中的写法：

方法函数化

链式操作

取值赋值合体

3.jq与js的关系：

可以并存但不可混用

（1）函数方法化例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>方法函数化</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        //原生js与jq中写法的对比
        //一
//        1、js
//        window.οnlοad=function(){}
//        2.jQ
//        $(function(){})

        //二
//        1.js
//        div.innerHTML
//        2.jQ
//        div.html()

        //三
//        1.js
//        div.οnclick=function(){
//            alert(this);
//        }
//        2.jQ
//        div.click(function(){
//            alert(this);
//        })

//        window.οnlοad=function(){
//            var div1=document.getElementById("div1");
//            div1.οnclick=function(){
//                alert(this.innerHTML);
//            }
//        }

        //jq中的写法
        $(function(){
//            var oDiv=$("#div1");
            $("#div1").click(function(){
                alert($(this).html());
            })
        })
    </script>
</head>
<body>
<div id="div1">div</div>
</body>
</html>

（2）

链式操作的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
//            var oDiv=$("#div1");
//            oDiv.html("helloword");
//            oDiv.css("background","red");
//            oDiv.click(function(){
//                alert(123);
//            })
            //jq支持从链式操作
            $("#div1").html("hello").css("background","red").click(function(){
                alert(123);
            })
        })
    </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

（3）取值赋值合体：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            alert($("#div1").innerHTML);
            $("#div1").click(function(){
                this.innerHTML("test");
//
//                alert($(this).html());//取值
//                $(this).html("hell");//赋值
            })
        })
    </script>
</head>
<body>
<div id="div1">test</div>
</body>
</html>

（4）取值赋值合体中需要注意的点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
        $(function(){
            alert($("li").html());//当一组元素时，取值只取该组的第一个
            $("li").html("test");//当一组元素时，赋值为该组的所有
        })
    </script>
</head>
<body>
<ul>
    <li>aaaa</li>
    <li>bbbb</li>
    <li>cccc</li>
    <li>dddd</li>
</ul>
</body>
</html>

5.jq与js中的关系：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.1.min.js"></script>
    <script>
       $(function(){
           $("#div1").click(function(){
//               alert($(this).html());//正确的写法
//               alert(this.innerHTML);//正确的写法
//               alert($(this).innerHTML);//错误的写法
               alert(this.html());//错误的写法
               //注意jq和js不能混用

           })
       })
    </script>
</head>
<body>
<div id="div1">div1</div>
</body>
</html>