jQuery学习笔记(一) —— 选择器与事件

一、前言与基础

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官方文档


你可能感兴趣的:(JavaScript,jquery)