jQuery
javascript query
1、jQuery的介绍
jQuery是一个轻量级的JS库 - 是一个被封装好的JS文件，提供了更为简便的元素操作方式
jQuery封装了 DOM ， JS
核心理念：Write Less Do More
jQuery版本：
jQuery 2.x 不再兼容 IE6.7.8
jQuery 1.11.x
2、使用jQuery
1、引入jQuery文件
注意：引入文件的操作必须要放在其他jQuery操作之前
2、使用jQuery的操作
3、jQuery对象(重点)
1、什么是jQuery对象
jQuery对象是由jQuery对页面元素进行封装后的一种体现
jQuery中所提供的所有的操作都只针对jQuery对象，其他对象(DOM对象)无法使用
2、工厂函数 -
(
)
想
要
获
取
j
q
u
e
r
y
对
象
的
话
，
就
必
须
使
用
工
厂
函
数
−
() 想要获取jquery对象的话，就必须使用工厂函数 -
()想要获取jquery对象的话，就必须使用工厂函数−()
在
(
)
中
允
许
传
递
一
个
选
择
器
/
D
O
M
元
素
，
() 中允许传递一个选择器/DOM元素，
()中允许传递一个选择器/DOM元素，()能够将选择器 和 DOM元素封装成jQuery对象进行返回
作用：
1、能够将页面元素加工成jQuery对象
2、能够将DOM对象转换成jQuery对象
3、DOM对象 和 jQuery对象之间的转换
DOM对象：不能使用jQuery提供的操作的
jQuery对象：不能使用DOM提供的操作
1、将DOM对象转换为jQuery对象
语法：
var 变量 = $(DOM对象);
注意：所有的jQuery对象在起名的时候，最好在变量名称前 + $ ,
用于和DOM对象的区分
var d1 = document.getElementById("d1");
var $d1 = $(d1);
# 01-jQuery.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
这是一个id为container的元素
</div>
<button onclick="btn1Click()">dom</button>
<button onclick="btn2Click()">jquery</button>
<script src="jquery-1.11.3.js"></script>
<script>
function btn1Click(){
var con = document.getElementById("container");
console.log(con);
//con.innerHTML = "这是动态修改的文字!";
//尝试使用jQuery的方法修改元素的内容
//con.html("这是动态修改的文字!");
//将con转换为jQuery对象
var $con = $(con);
$con.html("这是动态修改的文字!");
}
function btn2Click(){
//1、通过jquery的方式获取id为container的元素
var $con = $("#container");
//2、打印元素
console.log($con);
//3、使用DOM的方式修改元素的内容
//$con.innerHTML = "这是动态修改的文字";
//4、使用jQuery的方式修改元素的内内容
//$con.html("这是动态修改的文字!");
//5、将$con转换为DOM对象，再修改其内容
var con = $con[0];
con.innerHTML = "这是动态修改的文字!";
}
</script>
</body>
</html>
2、将jQuery对象转换成DOM对象
1、var dom对象 = jQuery对象.get(0);
2、var dom对象 = jQuery对象[0];
var $d1 = $("#d1");
var d1 = $d1[0]; // $d1.get(0);
1、var dom对象 = jQuery对象[下标];
2、var dom对象 = jQuery对象.get(下标);
4、jQuery选择器
1、作用
获取页面上的元素们，返回值都是由jQuery对象组成的数组
语法：$(“选择器”)
1、基本选择器
1、ID选择器
语法：$("#id")
返回：封装了包含指定id值的jQuery数组
2、类选择器
语法：$(".className")
返回：页面中指定className的所有元素
3、元素选择器
语法：$("element")
返回：页面中指定标记的所有元素
4、群组选择器 / 复合选择器
语法：$("selector1,selector2,...")
返回：满足函数内所有选择器的元素
5、通用选择器
语法：$("*")
返回：返回页面中的所有元素
# 02-jQuery-selector1.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="container">
<p class="title">静夜思</p>
<p>床前明月光</p>
<p>疑是地上霜</p>
<p>举头望明月</p>
<p>低头思故乡</p>
</div>
<div id="content">
<p class="title">春晓</p>
<p>春眠不觉晓</p>
<p>处处闻啼鸟</p>
<p>夜来风雨声</p>
<p>花落知多少</p>
</div>
<button onclick="s1Click()">基本选择器</button>
<button onclick="s2Click()">兄弟选择器</button>
<script src="jquery-1.11.3.js"></script>
<script>
function s2Click(){
//相邻兄弟:获取所有class为title的相邻兄弟p元素
$(".title+p").css("color","red");
//通用兄弟:获取所有class为title的通用兄弟p元素
$(".title~p").css("font-weight","bold");
}
function s1Click(){
//1、获取 id 为 container 的元素
var $container = $("#container");
//console.log($container);
/*$container.css("font-size","24px");
$container.css("color","red");*/
//使用JSON设置CSS属性值
$container.css({
'font-size':'24px',
'color':'red'
});
//2、获取 class 为 title 的元素
var $title = $(".title");
console.log($title);
//2.1 设置为字体加粗显示
//2.2 设置文字大小为 24px
//2.3 设置下外边距为 36px
$title.css({
'font-weight':'bold',
'font-size':'24px',
'margin-bottom':'36px'
});
//3、获取 页面中所有的 p 元素
//3.1 设置下外边距为 15px
//3.2 设置背景颜色为 黄色(yellow)
$("p").css({
'margin-bottom':'15px',
'background-color':'yellow'
});
}
</script>
</body>
</html>
2、层级选择器
1、后代选择器
语法：$("selector1 selector2")
2、子代选择器
语法：$("selector1>selector2")
3、相邻兄弟选择器
语法：$("selector1+selector2")
作用：匹配紧紧跟在selector1后面且满足selector2选择器的元素
4、通用兄弟选择器
语法：$("selector1~selector2")
作用：匹配selector1后面所有满足selector2的元素们
3、过滤选择器
1、基本过滤选择器
过滤选择器通常都会配合着其他的选择器一起使用
1、:first
只匹配到第一个元素
2、:last
只匹配到最后一个元素
3、:not(selector)
将满足selector选择器的元素排除在外
ex:
$("p:not(:first)");
4、:odd
匹配 偶数行 元素 (奇数下标)
5、:even
匹配 奇数行 元素 (偶数下标)
6、:eq(index)
匹配下标等于index的元素
7、:gt(index)
匹配下标大于index的元素
8、:lt(index)
匹配下标小于index的元素
# 03-jquery-selector-exer.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>密码</td>
<td>邮箱</td>
</tr>
</thead>
<tbody id="body">
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
<tr>
<td>张三丰</td>
<td>男</td>
<td>25</td>
<td>zhaomin</td>
<td>sanfeng.zhang@163.com</td>
</tr>
</tbody>
</table>
<button id="btnChange">变</button>
<button id="btnShow">显示</button>
<button id="btnHide">隐藏</button>
<script src="jquery-1.11.3.js"></script>
<script>
window.onload = function(){
//为 btnChange 按钮 绑定onclick 事件
$("#btnChange")[0].onclick = function(){
$("#body>tr:odd").css("background-color","red");
$("#body>tr:even").css("background-color","yellow");
}
//为 btnHide 按钮 绑定onclick 事件
$("#btnHide")[0].onclick = function(){
$("#body>tr:gt(1)").css("display","none");
}
//为 btnShow 按钮 绑定onclick 事件
$("#btnShow")[0].onclick = function(){
$("#body>tr").css("display","table-row");
}
}
</script>
</body>
</html>
2、属性过滤选择器
1、[attribute]
作用：匹配包含指定属性的元素
ex:
1、div[id]
2、[attribute=value]
作用：匹配attribute属性值为value的所有元素
ex:
1、input[type=text]
2、input[type="text"]
3、input[type='text']
3、[attribute != value]
作用：匹配attribute属性值不是value的所有元素
4、[attribute ^= value]
作用：匹配attribute属性值是以value字符作为开始的元素
ex:
div[class^=col]
5、[attribute $= value]
作用：匹配attribute属性值是以value字符作为结束的元素
6、[attribute *= value]
作用：匹配attribute属性值中包含value字符的所有元素
ex:
1、匹配页面中所有的文本框
$("input[type='text']")
3、子元素过滤选择器
1、:first-child
作用：匹配属于其父元素中的首个子元素(可能会匹配出来多个)
$("li:first-child");
$("li:first");
2、:last-child
作用：匹配属于其父元素中的最后一个子元素
3、:nth-child(n)
作用：匹配属于其父元素中的第n个子元素
# 04-jquery-selector2.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
<li>李逵</li>
</ul>
<ul>
<li>刘备</li>
<li>关羽</li>
<li>张飞</li>
<li>曹操</li>
</ul>
<button onclick="getLi()">获取li</button>
<script src="jquery-1.11.3.js"></script>
<script>
function getLi(){
//$("li:first").css("background-color","pink");
$("li:first-child").css("background-color","yellow");
}
</script>
</body>
</html>
5、jQuery操作DOM
1、基本操作
1、html()
作用：获取 或 设置 jQuery对象中的HTML内容
等同于：DOM中的innerHTML属性
2、text()
作用：获取 或 设置 jQuery对象中的text文本内容
等同于：DOM中的innerText属性
# 05-jquery-dom.html
<!doctype html>
测试
3、val()
作用：读取 或 设置 jQuery对象中的value值(表单控件)
等同于：DOM中的value属性
ex:
<input type="text" id="uname">
console.logo($("#uname").val());//获取uname的值并打印
$("#uname").val("Mary");//设置uname的值为Mary
练习：
1、创建一个文本框并定义id
2、创建一个按钮，显示文字为 "显示"
3、创建一个div并定义id
4、点击按钮时，将文本框中的内容获取出来构建成一级
标题的样式显示在div中
# 06-jquery-dom-exer.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="uname">
<button onclick="btnShow()">显示</button>
<div id="uname-show"></div>
<script src="jquery-1.11.3.js"></script>
<script>
function btnShow(){
$("#uname-show").html("<h1>"+$("#uname").val()+"</h1>");
}
</script>
</body>
</html>
2、属性操作
1、attr()
作用：读取或设置jQuery对象的属性值
ex:
1、$obj.attr("id");
获取 $obj 对象的 id 属性值
2、$obj.attr("id","container");
设置 $obj 对象的 id 属性值为 container
2、removeAttr("attrName")
作用：删除jQuery对象的attrName属性
ex:
$obj.removeAttr("class");
从 $obj 对象中将 class 属性移除出去
3、样式操作
1、attr("class","className")
使用 attr() 动态绑定 class 属性值
ex:
$obj.attr("class","container");
2、addClass("className")
作用：将className 添加到元素的 class值之后
ex:
$obj = $obj.addClass("c1");00
$obj = $obj.addClass("c2");
$obj.addClass("c1").addClass("c2").html();
ex:
$obj = $obj.addClass("bigFont");
$obj = $obj.addClass("red");
连缀调用：
$obj.addClass("bigFont").addClass("red");
# 07-jquery-dom-style.html
<!doctype html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.red{color:Red;}
.back{background:yellow;}
.bigFont{font-size:48px;}
.hide{display:none;}
</style>
</head>
<body>
<div id="main">
测试的div内容
</div>
<button onclick="btnClick()">样式操作</button>
<script src="jquery-1.11.3.js"></script>
<script>
function btnClick(){
//$("#main").attr("class","bigFont back red");
//$("#main").addClass("bigFont").addClass("back").addClass("red");
$("#main").toggleClass("hide");
}
</script>
</body>
</html>
3、removeClass("className")
删除指定的类选择器
4、removeClass()
删除所有类选择器
5、toggleClass("className")
切换样式：
元素如果具备className选择器，则删除
元素如果没有className选择器，则添加
6、css("属性","值")
为元素设置某css属性极其值
ex:
$obj.css("background-color","red");
7、css(JSON对象)
为元素设置一组css属性及其值
$("#title").css({
"color":"red",
"font-size":"12px"
"font-style":"italic"
});
$obj.css({
"color":"red",
"font-size":"12px"
"font-style":"italic"
});
4、创建对象
语法：$("创建的完整标记");
ex:
1、创建一对div元素
var $div = $("<div id='d1'>测试的div</div>");
$div.html("<h1>...</h1>");
$div.attr("id","container");
2、创建一个图像标记
var $img = $("<img>");
$img.attr("src","img/a.jpg");
3、创建一对button
var $btn = $("<button></button>");
$btn.html("点我试试!");
5、插入元素
1、内部插入
作为子元素插入到网页中
1、$obj.append($new);
将$new元素追加到$obj元素的尾部(最后一个子元素)
2、$obj.prepend($new);
将$new元素添加到$obj元素的头部(第一个子元素)
2、外部插入
作为兄弟元素插入到网页中
1、$obj.before($new)
将$new作为$obj的上一个兄弟元素插入进来
2、$obj.after($new)
将$new作为$obj的下一个兄弟元素插入进来
6、删除节点
1、remove()
语法：$obj.remove();
作用：删除 $obj 元素
2、remove("selector")
语法：$obj.remove("selector");
作用：将满足 selector 选择器的元素删除出去
3、empty()
语法：$obj.empty()
作用：清空$obj内的内容
7、遍历节点
1、children() / children(selector)
作用：获取某对象中的子元素(只考虑元素节点)或满足selector选择器的子元素(只考虑元素节点)。
注意：只能获取子元素，不能获取后代元素
2、next() / next(selector)
作用：获取某对象的下一个兄弟元素 / 满足selector的下一个兄弟元素
3、prev() / prev(selector)
作用：获取某对象的上一个兄弟元素 / 满足selector的上一个兄弟元素
4、siblings() / siblings(selector)
作用：获取某对象的所有兄弟元素 / 满足selector的兄弟元素
5、find(selector)
查找满足selector选择器的所有后代元素
6、parent()
作用：获取某对象的父元素
8、jQuery动画
1、基本显示 / 隐藏
语法：
$obj.show() / $obj.show(执行时间);
$obj.hide() / $obj.hide(执行时间);
2、滑动式 显示/隐藏
语法：
显示：$obj.slideDown() / $obj.slideDown(执行时间)
隐藏：$obj.slideUp() / $obj.slideUp(执行时间)
3、淡入淡出式显示/隐藏
语法：
$obj.fadeIn() / $obj.fadeIn(执行时间) 显示
$obj.fadeOut() / $obj.fadeOut(执行时间) 隐藏0
6、jQuery事件处理
1、页面加载后的执行
在DOM树加载完成后就要执行的操作
1、
$(document).ready( function(){
//页面的初始化操作
//DOM树加载完毕后就开始运行
} );
2、
$().ready(function(){
//页面初始化的操作
//DOM树加载完成后就开始运行
});
3、
$(function(){
//页面初始化的操作
//DOM树加载完成后就开始运行
});
2、jQuery的事件绑定
1、方式1
$obj.bind("事件名称",事件处理函数);
ex:
$obj.bind("click",function(){
alert("单击事件");
});
$obj.bind("click",function(){
console.log("单击事件");
});
2、方式2
$obj.事件名称(事件处理函数);
ex:
$obj.click(function(){
//允许使用this表示触发该事件的DOM对象
});
注意：
在事件处理函数中，允许使用 this 来表示触发当前事件的DOM对象
3、事件对象 - event
在绑定事件的时候，允许传递 event 参数来表示事件对象
1、
$obj.bind("click",function(event){
//event 表示事件对象
})
2、
$obj.click(function(event){
//event 表示事件对象
});
event 的使用方式与 原生JS事件中的事件对象一致
event.stopPropagation() : 阻止事件冒泡
event.offsetX:鼠标事件中鼠标在元素上的横坐标
event.offsetY:鼠标事件中鼠标在元素上的纵坐标
event.which:键盘事件中表示字符的ASCII码或键位码
event.target:任何事件中都表示事件源
3、事件冒泡
1、什么是事件冒泡
在执行子元素的事件时，同时把父元素/祖先元素的对应的事件也给执行了
2、阻止事件冒泡
event.stopPropagation()
7、jQuery - 插件
补充：
事件参数对象(事件对象):
1、获取事件对象
1、
function btnClick(event){
}
2、
<button id="btnTest"></button>
var btn = document.getElementById("btnTest");
btn.onclick = function(event){
event : 表示当前事件的事件对象
}
2、事件对象的属性
1、offsetX
获取鼠标所操作的点的 横坐标值
2、offsetY
获取鼠标所操作的点的 纵坐标值
3、target
获取事件源(事件所在的元素)
this:
1、this 在全局函数中，永远都表示的是 window 对象
2、this 在局部函数中，表示都是函数的所有者
btn.onclick = function(){
this:表示的就是函数的所有者 -> btn
}
node.childNodes
node.children
node.nextSibling
node.previousSibling
node.parentNode
var $d1 = $("#d1");
var d1 = $d1[0]
var $redColor = $(".redColor");
VAR r1 = $redColor[1];
function $(id){
return document.getElementById(id);
}
635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
