JQurey

最新推荐文章于 2022-07-25 17:54:43 发布

LCfree_Lc

最新推荐文章于 2022-07-25 17:54:43 发布

阅读量926

点赞数 2

本文链接：https://blog.csdn.net/qq_36993666/article/details/77267779

版权

urey基础知识

1.1基本概念：

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

JQureys每个版本又有两个小版本：压缩和未压缩，压缩较小，但没有排版和注释

，不便于阅读，而未压缩有排版和注释，便于阅读

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

也可以通过CDN（Content Distribute NetWork,内容分发网络）来引用JQureys 。

菜鸟网：

百度：

使用cdn的好处：

（1）省事

（2）速度更快

1.2语法

$(选择器).action()

$:定义了这是一个JQurey的代码

选择器：按照一定的规则选择DOM元素，非常类似于css选择器。

action：对选中元素的操作。

案例

<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>

方案一：

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

方案二：

$("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);

所以说JQurey极大简化了程序员的工作

1.3选择器

（1）元素选择器

根据签名来获取元素，比如

$(“p”)：表示获取所以段落

$(“#p”)：表示选择id=“p的元素”

（2）id选择器

$(“#p1”)：表示选择id=“p1的元素”

（3）class选择器

$(“.top2”)：表示选择class=“.top2的元素”

（4）后代选择器

$(“div p”)：表示选择div里面p标签“div p的元素”

（5）类似于css里的伪类选择器

$(“p：first”)：表示选择p标签里面的一个元素。

（6）属性选择器

$(“p[name]”)：表示选中所有具有name属性的段落。

$(“p[name=’second’]”)：表示选中所有name=’second’的段落。

$(“tr:even”)：表示选中所有技术行的tr。

1.4事件

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

比如单击事件

$(“#div”).click（）

鼠标移入事件

$(“#div”).mouseeenter（）

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

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

    </div>
</body>

</html>

之前，我们所有的js代码是放在<body>之后的，如果放在<body>之前呢？
实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行代码时，文档还没有加载完毕

，元素都还不存在

那怎么解决呢？
将代码放在$(document).ready(function(){……})中，也就是在文档加载完成之后去执行代码。

LCfree_Lc

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JQurey

urey基础知识1.1基本概念：JQureys是一个js库，帮助我们轻松实现原本可能比较麻烦我的功能。JQureys每个版本又有两个小版本：压缩和未压缩，压缩较小，但没有排版和注释，不便于阅读，而未压缩有排版和注释，便于阅读JQureys 实际上是一个js文件，加载到页面内就可以直接使用type="text/css"src="jquery-3.2.1.min.js"
复制链接

扫一扫