JQuery基础知识

最新推荐文章于 2024-05-06 10:07:26 发布

活在当下_未来可期

最新推荐文章于 2024-05-06 10:07:26 发布

阅读量403

点赞数 1

分类专栏： web前端文章标签： jquery 语法选择器事件

本文链接：https://blog.csdn.net/Paranoid99/article/details/77620820

版权

web前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

1.1基本概念

JQuery是一个JS库，能够帮助我们轻松实现一些原本可能比较麻烦的功能。

JQuery每个版本又有两个小版本：压缩版和未压缩版，压缩版文件较小，但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。

JQuery实际上就是一个js文件，加载到页面就可以直接使用了。

也可以通过CDN（Content Distribute Network,内部分布网络）

菜鸟网：

百度：

使用CDN的好处：

1.省事

2.速度更快

1.2语法

$(选择器).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);
    }

方案二：

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

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选择器

$(“.top3”):表示选择所有class=“top2”的元素

（4）后代选择器

$(“div p”):表示div里面的段落

（5）$("p:first"):表示选择p标签的第一个元素，相当于css中的伪类选择器

（6）属性选择器

$("p[name]"):表示选中所具有name属性的段落

$("p[name='second']"):表示选中所有name=“second”的段落

$("tr:even"):表示选择所有奇数行的tr

1.4事件

JQuery中注册事件的方法也是调用JQuery对象的方法，

比如单击事件：

$("#div1").click();

鼠标移入事件：

$("#div1").mouseenter();

而且方法名就是js中的事件名。

<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(){
        //$("#div1").css("background-color","skyblue");
        $(this).css("background-color","skyblue");
    });
</script>

之前，我们所有的js代码是放在<body>之后的，如果放在<body>之前呢？

实验证明，如果放在<body>之前，在获取元素时得到的结果为空，因为在执行此代码时，文档还没有加载完成，也就是说元素都还不存在。

那怎么解决？

将代码放在$(document).ready(function(){……}中，也就是在文档加载完成之后才会去执行此代码。

<script src="jquery-3.2.1.min.js"></script>
    <style>
        #div1{
            width:100px;
            height:100px;
            background-color:blue;
        }
    </style>
</head>
<script>
    $(document).ready(function(){
        $("#div1").mouseenter(function(){
            //$("#div1").css("background-color","skyblue");
            $(this).css("background-color","skyblue");
        });
    });
</script>
<body>
<div id="div1">

</div>
</body>

活在当下_未来可期

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础知识

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

扫一扫