jQuery学习笔记（一） —— 选择器与事件

时间 2019-11-06

原文原文链接

1、前言与基础
css

jQuery是JavaScript的一个拓展库，可以比原生JavaScript代码更简便地进行HTML页面的DOM（Document Object Model，文件对象模型）操做，即对页面各类标签元素进行选择并操做，经过jQuery，能够实现高级的页面互动和炫酷的动画效果。要想使用jQuery，必需要在HTML页面引入jQuery的源代码文件。html

JQuery的源代码文件有两种：jquery

compressed&production，编译过而且进行压缩的jQuery文件，用于实际网站开发，编译和压缩可以加快代码加载。文件名通常为jquery-1.10.2.min.js，1.10.2是版本号。api
uncompressed&development，未经编译和压缩，具备可读性，用于调试。ide

在HTML页面引入jQuery文件的方法，在<head>标签中引入对应的JQuery文件：函数

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

2、JQuery的基本格式动画

jQuery的语句被包含在以下的结构中：
网站

$(document).ready(function(){
    //此处填写JQuery函数
});

其中，$(document).ready()是jQuery的文档就绪事件，脚本片断中的jQuery函数大多数被包含在$(document).ready()函数中。这是为了防止文档在彻底加载（就绪）以前运行 jQuery 代码。this

还有一种更加简洁的文档就绪事件格式：spa

$(function(){
    //此处填写JQuery函数
});

在$(document).ready()中，具体的jQuery语句格式以下：

$(selector).action();

$(selector)是HTML元素选择器，用于查询并选择页面上的HTML元素，括号里能够是HTML标签的名称，对应的class或id，好比"p"、".myclass"或者"#myID"。action()是方法，包括效果方法、HTML/CSS方法等，用于对选中的HTML元素进行操做，能够是hide()、show()等等。

jQuery中还有一种事件方法，区别于通常的方法：

$(selector).event(function(){
    /*此处填写对元素的操做*/
})

event()是事件，表示选中的元素的触发事件，能够是click()、mouseenter()等等。

通常方法与事件方法结合起来使用：

$(document).ready(function(){
    $(selector).event(function(){
        $(selector).action();
    });
});

3、实例

实例一、点击<p>元素字段后，该元素隐藏：

HTML代码以下：

<!DOCTYPE html>
<html>
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <p>setence</p>
</body>
</html>

对应的JQuery代码以下：

$(document).ready(function(){
    $("p").click(function(){ //$("p")指选择器选择了<p>元素，click()是指鼠标左键单击触发的事件。
        $(this).hide(); //$(this)是指选择器选择的元素自己，hide()是JQuery中隐藏效果方法。
    });
});

实例二、点击内容为class 1的<p>元素后，其后面出现一段段落，并弹出对话框；点击内容为class 2的<p>元素后，其样式发生变化，并弹出对话框。此实例混合了jQuery语法，原生JavaScript代码。

HTML代码以下：

<html>
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>
<body>
    <p class="1">class1</p>
    <p class="2">class2</p>
</body>
</html>

对应的JQuery代码以下：

$(document).ready(function(){
    $(".1").click(function(){
        var x = "<p>this is class 1!</p>"; //能够继续使用JavaScript的原生语法，定义变量。
        $(".1").after(x);
        alert("NOTATION:just now you click class 1!"); //调用JavaScript原生函数alert()。
    }); //不一样函数之间用“ ; ”分隔开。
    $(".2").click(function(){
        $(".2").css({"color":"red","background-color":"black"});
        alert("NOTATION:just now you click class 2!");
    });
});

参考来源：

菜鸟教程 - jQuery教程

jQuery官方文档