JQuery

来源：互联网发布：自己实现java虚拟机编辑：程序博客网时间：2024/05/22 10:34

1.JQuery库特性

HTML元素选取与操作

css操作

HTML事件函数

JavaSvript特效和动画

HTML DOM遍历和修改

AJAX

2.引用JQuery

从jQuery.com下载JQuery库

从CDN中下载JQuery

3版本介绍

V1.x:支持IE6+

V2.x:支持IE9+

4.官网www.jquery.com

5.jquery语法

$(selector).action()

美元符号定义JQuery

选择符（selector）“查询”和“查找”HTML元素

jQuery的action()执行选择元素的操作

6.文档就绪函数

为防止文档在完全加载（就绪）之前运行，如：

试图隐藏一个不存在的元素

获得未完全加载的图像的大小

$(document).ready(function(){});

7.元素选择器

$("*") 所有元素

$("#lastname") id="lastname"的元素

$(".intro") 所有class="intro"的元素

$("p") 所有<p>元素

$(".intro.demo")所有class="intro"且class="demo"的元素

$("p:first") 第一个<p>元素

$("p:last")最后一个<p>元素

$("tr:even")所有偶数<tr>元素

$("tr:odd")所有奇数<tr>元素

$("ul li:eq(3)") 列表中的第四个元素（index从0开始）

$("ul li:gt(3)") 列出index大于3的元素

$("ul li:lt(3)") 列出index小于3的元素
$("input:not(:empty)") 所有不为空的input元素

$(":header") 所有标题元素<h1>-<h6>

$:(":animated") 所有动画元素

6.JQuery事件

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-3.2.1.min.js"> </script><script>$(document).ready(function(){$("button").click(function(){$(this).hide();});});</script></head><body><button id="btn">提交</button></body></html>

7.绑定和解除事件

bind&unbind

on&off(jQuery 1.7+)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-3.2.1.min.js"> </script><script>$(document).ready(function(){$("button").bind("click",clickfunc);$("button").bind("click",clickfunc2);$("button").off("click",clickfunc2);});function clickfunc(e){console.log("click func1");}function clickfunc2(e){console.log("click func2");}</script></head><body><button id="btn">提交</button></body></html>

8.事件冒泡

stopPropagation 阻止父层元素

stopImmediatePropagation 立即阻止(包括和它同一层的元素)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-3.2.1.min.js"> </script><script>$(document).ready(function(){$("button").bind("click",clickfunc);$("button").bind("click",clickfunc2);$("div").on("click",clickDiv);});function clickfunc(e){console.log("click func1");//console.log(e);e.stopPropagation();}function clickfunc2(e){console.log("click func2");//console.log(e);}function clickDiv(e){console.log("click Div");//console.log(e);}</script></head><body><div id="div1"><button id="btn">提交</button>     </div></body></html>

1 0