JQuery基础知识

来源：互联网发布：linux安装ftp服务器编辑：程序博客网时间：2024/06/08 06:21

JQuery基础知识

1.基本概念

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

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

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

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

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

菜鸟网：

<scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

百度：

<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

谷歌：

<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

使用CDN的好处：

（1）省事

（2）速度更快

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);
    }
    function red() {
        this.style.color = "red";
    }
</script>

方法二：使用JQuery

<body>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</body>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<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极大地简化了程序员的工作。

3.选择器

（1）元素选择器：根据标签名来获取元素，比如

$(“p”):表示获取所有的段落。

（2）id选择器

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

（3）class选择器

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

（4）后代选择器

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

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

（6）属性选择器

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

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

4.事件

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

比如：

单击事件：

$(“#div1”).click();

鼠标移入事件：

$(“#fiv1”).monseenter();

而且方法名就是JS中的事件名

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

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

要如何解决这个问题呢？

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

<scripttype="text/javascript">
    $(document).ready(function () {
        $("#div1").mouseenter(function(){
            $(this).css("backgroundColor","skyblue");
        });
    });
</script>
<body>
    <div id="div1">

    </div>
</body>

阅读全文

0 0