JQuery学习笔记（1）

最新推荐文章于 2024-01-20 21:49:50 发布

thystar

最新推荐文章于 2024-01-20 21:49:50 发布

阅读量509

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/thystar/article/details/47808379

版权

web前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

jQuery是一个JavaScript函数库。

JQuery的基本语法

参考：http://www.runoob.com/jquery/jquery-syntax.html

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

举例：

$(document).ready(function(){
    //alert("文档加载完毕");
    $("p").click(function(){
        $(this).hide(); //当点击事件触发后，将p元素中的内容隐藏
    })
});

对应的html文件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <!-- app必须在jquery之下，因为其依赖于jquery-->
    <script src="js/app.js"></script>
</head>
<body>
<p>hello</p>
<p>hello</p>
<p>hello</p>
<p>hello</p>

</body>
</html>

2 JQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

实例：

$(document).ready(function(){
    $("button").click(function(){
        $("p").text("p被修改");
        $("#pid").text("P2也被修改");
        $(".p3").text("p3被修改");
    });
});

对应的html；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/app1.js"></script>
</head>
<body>
    <p>p1</p>
    <p id="pid">p2</p>
    <p class="p3">p3</p>
    <button>click me</button>
</body>
</html>

3. JQuery事件

参考：http://www.runoob.com/jquery/jquery-events.html

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

$(document).ready(function(){
    $("button").dblclick(function(){
       $(this).hide();
    });
});

4. 绑定事件和解除绑定事件：

$(document).ready(function(){
    //添加绑定
    $("#clickme").bind("click",clickHander);
    $("#clickme").bind("click",clickHander2);
    //解除绑定
    $("#clickme").unbind("click", clickHander);
});

function clickHander(e){
    console.log("clickhander");
}

function clickHander2(e){
    console.log("clickhander2");
}

jquery1.7之后可以用on/off方法代替：

$(document).ready(function(){
    //添加绑定
    $("#clickme").on("click",clickHander);
    $("#clickme").on("click",clickHander2);
    //解除绑定
    $("#clickme").off("click", clickHander);
});

5 时间的目标和时间的冒泡

$(document).ready(function(){
    $("body").bind("click", bodyHandler);
    $("div").bind("click", divHandler);
});

function bodyHandler(event){
    console.log(event);
}

function divHandler(event){
    console.log(event);
    event.stopPropagation();
}

thystar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记（1）

jQuery是一个JavaScript函数库。JQuery的基本语法参考：http://www.runoob.com/jquery/jquery-syntax.html基础语法： $(selector).action()美元符号定义 jQuery选择符（selector）"查询"和"查找" HTML 元素jQuery 的 action() 执行对元素的操作实例:
复制链接

扫一扫

专栏目录