JQuery基本概念，语法，选择器，事件

最新推荐文章于 2024-03-11 09:35:50 发布

Judian6974

最新推荐文章于 2024-03-11 09:35:50 发布

阅读量691

点赞数 1

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

本文链接：https://blog.csdn.net/Judian6974/article/details/77256032

版权

jquery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

基本概念
jQuery是一个JS库，能够帮助我们轻松实现一些原本可能比较麻烦的功能。
jQuery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。
jQuery实际上就是一个js文件，加载到页面就可以直接使用了。

<script src="../jquery-3.2.1.min.js"></script>

也可以通过CDN（Content Distribution Network,内容分发网络）来引用jQuery。
菜鸟网：

百度：使用CDN的好处：（1）省事（2）速度更快 1.2语法

(选择器).action(); $(选择器).action();$ 定义了这是一个jQuery的代码选择器：按照一定的规则选择DOM元素，非常类似于css选择器。 action：对选中元素执行的操作方案一：使用JS

<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
    var paras = document.getElementsByTagName("p");
    for(var i in paras){
        paras[i] = addEventListener("click",red);
    }
</script>

方案二：

<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script>
   $("p").click(red);
    function red(){
        this.style.color = "red";
    }

JQuery的一行代码

$(“p”).click(red);

相当于JS的若干行代码

var paras = document.getElementsByTagName("p");
    for(var i in paras){
        paras[i] = addEventListener("click",red);
    }

所以说JQuery极大简化了程序员的工作。
1.3选择器
（1）元素选择器
根据标签名来获取元素，比如
$(“p”):表示获取所有的段落（2）id选择器$ (“#p1”):表示选择id=”p1”的元素
（3）class选择器
$(“.top2”):表示选择所有class=”top2”的元素（4）后代选择器$ (“div p”):表示选择div里面的段落
（5）属性选择器
$(“p[name]”):表示选中所有具有name属性的段落$ (“p[name=’second’]”)：表示选中所有name=”second”的段落
（6） $(“p:first”)：表示选择p标签的第一个元素，相当于css中的伪类选择器$ (“tr:even”)：表示选中所有技术行的tr

1.4 事件
JQuery中注册事件的方法也是调用JQuery对象的方法，
比如单击事件
$(“#div1”).click(); 鼠标移入事件$ (“#div1”).mouseenter();
而且方法名就是js中的事件名。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="../jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width:100px;
            height:100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
<script>
    $("#div1").mouseenter(function(){
        $(this).css("background-color","skyblue");
    });
</script>

之前，我们所有的JS代码是放在之后的，如果放在之前呢？
实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行此代码时，文档还没有加载完成，也就是说元素都还不存在。
那怎么解决呢？
将代码放在$(document).ready(function(){……})中，也就是在文档加载完成之后才会去执行此代码。

<script>
    $(document).ready(function(){
        $("#div1").mouseenter(function(){
            $(this).css("background-color","skyblue");
        });
    });

</script>
<body>
    <div id="div1">
    </div>
</body>