JQuery入门

来源：互联网发布：淘宝站外推广怎么做编辑：程序博客网时间：2024/06/06 12:43

基本概念

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

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

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

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

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

菜鸟网：

百度

使用cdn的好处：

（1）省事

（2）速度更快

语法

$(选择器).action();

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

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

action：对选中元素执行的操作。

案例：所有段落单击变红

方案一：使用js

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

    functionred(){
        this.style.color= "red";
    }
</script>

方案二：使用JQuery

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

JQuery的一行代码

$("p").click(red);

相当于JS的若干行代码

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

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

选择器

（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

事件

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

比如单击事件

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

鼠标移入事件

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

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

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

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

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

那怎么解决呢？

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

阅读全文

0 0