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

最新推荐文章于 2024-09-11 17:09:49 发布

weixin_34198762

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量60

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2438417/blog/501951

版权

2019独角兽企业重金招聘Python工程师标准>>>

一、前言与基础

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

JQuery的源代码文件有两种：

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

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

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

二、JQuery的基本格式

jQuery的语句被包含在如下的结构中：

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

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

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

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

三、实例

实例1、点击<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中隐藏效果方法。
    });
});

实例2、点击内容为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官方文档

转载于:https://my.oschina.net/u/2438417/blog/501951