引入jQuery
什么是jQuery
jQuery并不是一门新的语言，它是JavaScript的一个代码库，是基于JavaScript开发的，对JavaScript进行了深度封装，从而简化了JavaScript开发过程。
下载jQuery
https://jquery.com/
引入jQuery
<script src="./js/jquery-3.5.1.min.js"></script>
第一个jQuery程序
<script>
$(document).ready(function(){
alert("Hello jQuery");
});
</script>
简写形式
<script>
$(function(){
alert("Hello jQuery");
});
</script>
工厂函数$()
该函数的作用是将DOM对象转为jQuery对象，只有转为jQuery对象才能使用jQuery的方法
DOM对象与jQuery对象互相转换
DOM对象转为jQuery对象
<script>
var jqObj = $(document);
console.log(jqObj);
</script>
jQuery对象转DOM对象
<script>
var domObj = $(document).get(0);
console.log(domObj);
</script>
或
<script>
var domObj = $(document)[0];
console.log(domObj);
</script>
选择器
基本选择器
标签选择器
通过标签名选择元素
<body>
<input type="button" value="按钮" />
<script>
$(function(){
var x = $("input");
console.log(x);
});
</script>
</body>
类选择器
通过标签中的class属性值选择元素
<body>
<input class="btn" type="button" value="按钮" />
<script>
$(function(){
var x = $(".btn");
console.log(x);
});
</script>
</body>
ID选择器
通过标签中的id属性值选择元素
<body>
<input id="btn" type="button" value="按钮" />
<script>
$(function(){
var x = $("#btn");
console.log(x);
});
</script>
</body>
并集选择器
<body>
<label>姓名</label>
<input type="text" value="" />
<script>
$(function(){
var x = $("label,input");
console.log(x);
});
</script>
</body>
交集选择器
<body>
<label>姓名</label>
<input id="name" type="text" value="" />
<br />
<label>密码</label>
<input id="pass" type="password" value="" />
<script>
$(function(){
var x = $("input#name");
console.log(x);
});
</script>
</body>
全局选择器
<script>
$(function(){
var x = $("*");
console.log(x);
});
</script>
层次选择器
后代选择器
选择父元素下的所有子元素，包含孙子辈元素
<body>
<ul>
<li>ul-li1</li>
<li>ul-li2</li>
<li>ul-li3</li>
<ol>
<li>ol-li1</li>
<li>ol-li2</li>
<li>ol-li3</li>
</ol>
</ul>
<script>
$(function(){
var x = $("ul li");
console.log(x);
});
</script>
</body>
子选择器
选择父元素下的直接子元素，不包含孙子辈元素
<body>
<ul>
<li>ul-li1</li>
<li>ul-li2</li>
<li>ul-li3</li>
<ol>
<li>ul-ol-li1</li>
<li>ul-ol-li2</li>
<li>ul-ol-li3</li>
</ol>
</ul>
<script>
$(function(){
var x = $("ul>li");
console.log(x);
});
</script>
</body>
相邻元素选择器
选择紧邻某元素之后的同辈元素
<body>
<ul>
<li>ul-li1</li>
<li>ul-li2</li>
<li>ul-li3</li>
</ul>
<ol>
<li>ol1-li1</li>
<li>ol1-li2</li>
<li>ol1-li3</li>
</ol>
<ol>
<li>ol2-li1</li>
<li>ol2-li2</li>
<li>ol2-li3</li>
</ol>
<script>
$(function(){
var x = $("ul+ol");
console.log(x);
});
</script>
</body>
同辈元素选择器
选择某元素之后的所有元素
<body>
<ul>
<li>ul-li1</li>
<li>ul-li2</li>
<li>ul-li3</li>
</ul>
<ol>
<li>ol1-li1</li>
<li>ol1-li2</li>
<li>ol1-li3</li>
</ol>
<ol>
<li>ol2-li1</li>
<li>ol2-li2</li>
<li>ol2-li3</li>
</ol>
<script>
$(function(){
var x = $("ul~ol");
console.log(x);
});
</script>
</body>
属性选择器
选择包含某属性的元素
<body>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<script>
$(function(){
var x = $("[type]");
console.log(x);
});
</script>
</body>
选择属性值为特定值的元素
<body>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<script>
$(function(){
var x = $("[type=text]");
console.log(x);
});
</script>
</body>
选择属性值不为特定值的元素
<body>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<script>
$(function(){
var x = $("[type!=text]");
console.log(x);
});
</script>
</body>
选择属性值以特定值开始的元素
<body>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<script>
$(function(){
var x = $("[type^=pa]");
console.log(x);
});
</script>
</body>
选择属性值以特定值结尾的元素
<body>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<script>
$(function(){
var x = $("[type$=d]");
console.log(x);
});
</script>
</body>
选择属性值包含特定值的元素
<body>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<script>
$(function(){
var x = $("[type*=e]");
console.log(x);
});
</script>
</body>
基础过滤选择器
选取第一个元素
<body>
<table width="200px" height="200px" border="1">
<tr align="center">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr align="center">
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
<script>
$(function(){
var x = $("tr:first");
x.css("background-color","red")
});
</script>
</body>
选取最后一个元素
$(function(){
var x = $("tr:last");
x.css("background-color","red")
});
选取去除所有给定选择器匹配的元素
$(function(){
var x = $("tr:not(tr[align])");
x.css("background-color","red")
});
选取索引是偶数的所有元素，索引从0开始
$(function(){
var x = $("tr:even");
x.css("background-color","red")
});
选取索引是奇数的所有元素，索引从0开始
$(function(){
var x = $("tr:odd");
x.css("background-color","red")
});
选取索引等于index的所有元素，索引从0开始
$(function(){
var x = $("tr:eq(2)");
x.css("background-color","red")
});
选取索引大于index的所有元素，索引从0开始
$(function(){
var x = $("tr:gt(2)");
x.css("background-color","red")
});
选取索引小于index的所有元素，索引从0开始
$(function(){
var x = $("tr:lt(2)");
x.css("background-color","red")
});
选取所有标题元素，如h1~h6
<body>
<h3>用户登录</h3>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<br />
<input type="submit" value="登陆" />
<script>
$(function(){
var x = $(":header");
x.css("background-color","red");
});
</script>
</body>
子集过滤选择器
选取父级元素中第一个元素
<body>
<table width="200px" height="200px" border="1">
<tr align="center">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr align="center">
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
<tr align="center">
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
</tr>
</table>
<script src="./js/jquery-3.5.1.min.js"></script>
<script>
$(function(){
var x = $("td:first-child");
x.css("background-color","red")
});
</script>
</body>
获取父级元素中最后一个元素
$(function(){
var x = $("td:last-child");
x.css("background-color","red")
});
获取父级元素中第二个元素
$(function(){
var x = $("td:nth-child(2");
x.css("background-color","red")
});
可见选择器
选取所有隐藏的元素
<body>
<input id="login" type="button" value="点击登陆" />
<div style="display: none;">
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<br />
<input type="button" value="登陆" />
</div>
<script>
$(function(){
$("#login").click(function(){
$("div:hidden").show();
});
});
</script>
</body>
选取所有显示的元素
<body>
<input id="login" type="button" value="点击隐藏登陆" />
<div>
<label>姓名</label>
<input type="text" value="" />
<br />
<label>密码</label>
<input type="password" value="" />
<br />
<input type="button" value="登陆" />
</div>
<script>
$(function(){
$("#login").click(function(){
$("div:visible").hide();
});
});
</script>
</body>
表单选择器
:input
匹配所有input、textarea、select和button 元素
<script>
console.log($(":input"));
</script>
:text
匹配所有单行文本框
<script>
console.log($(":text"));
</script>
:password
匹配所有密码框
<script>
console.log($(":password"));
</script>
:radio
匹配所有单项按钮
<script>
console.log($(":radio"));
</script>
:checkbox
匹配所有复选框
<script>
console.log($(":checkbox"));
</script>
:submit
匹配所有提交按钮
<script>
console.log($(":submit"));
</script>
:image
匹配所有图像域
<script>
console.log($(":image"));
</script>
:reset
匹配所有重置按钮
<script>
console.log($(":reset"));
</script>
:button
匹配所有按钮
<script>
console.log($(":button"));
</script>
:file
匹配所有文件域
<script>
console.log($(":file"));
</script>
:enabled
匹配所有可用元素
<script>
console.log($(":enabled"));
</script>
:disabled
匹配所有不可用元素
<script>
console.log($(":disabled"));
</script>
:checked
匹配所有被选中元素（复选框、单项按钮、select 中的option）
<script>
console.log($(":checked"));
</script>
:checked
匹配所有选中的option元素
<script>
console.log($(":checked"));
</script>
动画函数
show()，hide()
显示元素，隐藏元素
show语法 show([speed],[callback])
hide语法 hide([speed],[callback])
速度以毫秒为单位
当完成显示或隐藏后调用回掉方法
<body>
<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<div style="width: 100px;height: 100px;padding: 50px;background-color: red;"></div>
<script>
$(function() {
$("#show").click(function(){
$("div").show(1000,function(){
alert("元素显示完毕");
});
});
$("#hide").click(function(){
$("div").hide(1000,function(){
alert("元素隐藏完毕");
});
});
});
</script>
</body>
toggle()
相当于show()和hide()事件方法的组合
<body>
<input type="button" value="显示DIV/隐藏DIV" />
<div style="padding: 100px;background-color: red;"></div>
<script>
$(function() {
$("input").click(function(){
$("div").toggle();
});
});
</script>
</body>
fadeIn()，fadeOut()
元素淡入，元素淡出
fadeIn语法 fadeIn([speed],[callback])
fadeOut语法 fadeOut([speed],[callback])
速度以毫秒为单位
当完成显示或隐藏后调用回掉方法
<body>
<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<div style="width: 100px;height: 100px;padding: 50px;background-color: red;"></div>
<script>
$(function() {
$("#show").click(function(){
$("div").fadeIn(1000,function(){
alert("元素显示完毕");
});
});
$("#hide").click(function(){
$("div").fadeOut(1000,function(){
alert("元素隐藏完毕");
});
});
});
</script>
</body>
slideUp()，slideDown()
向上滑动隐藏，向下滑动显示
slideUp语法 slideUp(speed,callback)
slideDown语法 slideDown(speed,callback)
速度以毫秒为单位
当完成显示或隐藏后调用回掉方法
<body>
<input type="button" value="显示" id="show" />
<input type="button" value="隐藏" id="hide" />
<div style="width: 100px;height: 100px;padding: 50px;background-color: red;"></div>
<script>
$(function() {
$("#show").click(function(){
$("div").slideDown(1000,function(){
alert("元素显示完毕");
});
});
$("#hide").click(function(){
$("div").slideUp(1000,function(){
alert("元素隐藏完毕");
});
});
});
</script>
</body>
animate()
自定义动画
语法 animate({params},speed,callback)
参数为样式列表，形式如：“属性”:“值”，多个样式用逗号隔开
速度以毫秒为单位
当完成显示或隐藏后调用回掉方法
<body>
<input type="button" value="调整尺寸" id="show" />
<div style="width: 50px;height: 50px;padding: 50px;background-color: red;"></div>
<script>
$(function() {
$("#show").click(function(){
$("div").animate({"width":"200px","height":"200px"},1000,function(){
alert("尺寸调整完毕");
});
});
});
</script>
</body>
常用事件函数
鼠标事件函数
click()
单击鼠标时执行
<body>
<div id="out" style="width: 100px;height: 100px;background-color: red;">
</div>
<script>
$(function(){
$("#out").click(function(){
alert("您点击了div");
});
});
</script>
</body>
mouseover()，mouseout()
鼠标指针移过时执行，鼠标指针移出时执行
进入子元素也会触发这两个事件
<body>
<div id="out" style="width: 100px;height: 100px;background-color: red;padding: 100px;">
<div id="in" style="width: 100px;height: 100px;background-color: yellow;"></div>
</div>
<script>
$(function(){
$("#out").mouseover(function(){
console.log("进入");
}).mouseout(function(){
console.log("移出");
});
});
</script>
</body>
mouseenter()，mouseleave()
鼠标指针进入时执行,鼠标指针离开时执行
<body>
<div id="out" style="width: 100px;height: 100px;background-color: red;padding: 100px;">
<div id="in" style="width: 100px;height: 100px;background-color: yellow;"></div>
</div>
<script>
$(function(){
$("#out").mouseenter(function(){
console.log("进入");
}).mouseleave(function(){
console.log("移出");
});
});
</script>
</body>
hover()
相当于mouseover与mouseout事件的组合
<body>
<div style="padding: 100px;background-color: red;"></div>
<script>
$(function() {
$("div").hover(function(){
$(this).css("background-color","blue");
},function(){
$(this).css("background-color","red");
});
});
</script>
</body>
键盘事件函数
keydown()，keyup()，keypress()
按下按键时执行，释放按键时执行，产生可打印的字符时执行
<body>
<input type="text" value="" />
<script>
$(function(){
$("input").keydown(function(even){
console.log(even.keyCode)
console.log("键盘被按下了："+String.fromCharCode(even.keyCode))
}).keyup(function(even){
console.log(even.keyCode)
console.log("键盘被释放了："+String.fromCharCode(even.keyCode))
}).keypress(function(even){
console.log(even.keyCode)
console.log("输入了可打印的字符："+String.fromCharCode(even.keyCode))
});
});
</script>
</body>
浏览器事件函数
resize()
调整浏览器窗口大小时执行
<script>
$(function(){
$(window).resize(function(){
console.log("窗口宽："+ $(window).width())
console.log("窗口高："+ $(window).height())
});
});
</script>
焦点事件
blur()，focus()
失去焦点触发 blur(function(){})
获取焦点触发 focus(function(){})
<body>
<form>
<input type="text" value=""/>
</form>
<script>
$(function() {
$("input").focus(function(){
console.log("文本框获取了焦点");
}).blur(function(){
console.log("文本框失去了焦点");
});
});
</script>
</body>
设置元素失去焦点 blur()
设置元素获取焦点 focus()
<body>
<form>
<input type="text" value="" id="text"/>
<br />
<input type="button" id="focus" value="获取焦点" />
<input type="button" id="blur" value="失去焦点" />
</form>
<script>
$(function() {
$("#focus").click(function(){
$("#text").focus();
})
$("#blur").click(function(){
$("#text").blur();
})
});
</script>
</body>
select()
给元素设置焦点，并选中里面的内容
<body>
<form>
<input type="text" value="" id="text"/>
<br />
<input type="button" id="focus" value="获取焦点" />
</form>
<script>
$(function() {
$("#focus").click(function(){
$("#text").select();
})
});
</script>
</body>
事件的绑定与移除
绑定事件：bind()
语法 bind(type,[data],fn)
| 参数 | 含义 | 说明 |
|---|---|---|
| type | 事件类型 | 包括click、mouseover等 |
| [data] | 可选参数 | 给event.data赋值，可以省略 |
| fn | 处理函数 |
绑定单个事件
<body>
<div style="padding: 100px;background-color: red;"></div>
<script>
$(function() {
$("div").bind("mouseover",function(){
$(this).css("background-color","blue");
});
});
</script>
</body>
绑定多个事件
<body>
<div style="padding: 100px;background-color: red;"></div>
<script>
$(function() {
$("div").bind({
"mouseover":function(){
$(this).css("background-color","blue");
},
"mouseout":function(){
$(this).css("background-color","red");
}
});
});
</script>
</body>
event.data
<body>
<div style="padding: 100px;background-color: red;"></div>
<script>
$(function() {
$("div").bind("mouseover","blue",function(event){
$(this).css("background-color",event.data);
});
});
</script>
</body>
解除绑定事件：unbind()
解除绑定的所有事件
<body>
<div style="padding: 100px;background-color: red;"></div>
<input type="button" value="解除事件"/>
<script>
$(function() {
$("div").bind({
"mouseover":function(){
$(this).css("background-color","blue");
},
"mouseout":function(){
$(this).css("background-color","red");
}
});
$("input").click(function(){
$("div").unbind();
});
});
</script>
</body>
解除绑定的指定事件
<body>
<div style="padding: 100px;background-color: red;"></div>
<input type="button" value="解除事件"/>
<script>
$(function() {
$("div").bind({
"mouseover":function(){
$(this).css("background-color","blue");
},
"mouseout":function(){
$(this).css("background-color","red");
}
});
$("input").click(function(){
$("div").unbind("mouseout");
});
});
</script>
</body>
解除绑定的指定事件的函数
<body>
<div style="padding: 100px;background-color: red;"></div>
<input type="button" value="解除事件"/>
<script>
$(function() {
$("div").bind("mouseover",bg1 = function(){
$(this).css("background-color","blue");
}).bind("mouseover",bg2=function(){
$(this).css("width","50%");
});
$("input").click(function(){
$("div").unbind("mouseover",bg2);
});
});
</script>
</body>
操作DOM元素的样式
css()
给元素添样式<
语法 css(name,value)
语法 css({name:value, name:value,name:value…})
<body>
<input type="button" value="给DIV添加背景" id="show" />
<div style="width: 100px;height: 100px;padding: 50px;border: 1px solid black;"></div>
<script>
$(function() {
$("#show").click(function(){
$("div").css("background-color","red");
});
});
</script>
</body>
addClass()，removeClass()
给元素添加类，移除元素中的类
语法 addClass(class)
语法 addClass(class1 class2 … classN)
<head>
<style>
.bg-red{background-color: red;}
</style>
</head>
<body>
<input type="button" value="添加类" id="add" />
<input type="button" value="移除类" id="remove" />
<div style="width: 100px;height: 100px;padding: 50px;border: 1px solid black;"></div>
<script>
$(function() {
$("#add").click(function(){
$("div").addClass("bg-red");
});
$("#remove").click(function(){
$("div").removeClass("bg-red");
});
});
</script>
</body>
toggleClass()
相当于addClass()和removeClass()方法的组合
语法 toggleClass(class)
语法 toggleClass(class1 class2 … classN)
<head>
<style>
.bg-red{background-color: red;}
div{padding: 100px;border: 2px solid #000;}
</style>
</head>
<body>
<input type="button" value="添加或移除DIV的class" />
<div></div>
<script>
$(function() {
$("input").click(function(){
$("div").toggleClass("bg-red");
});
});
</script>
</body>
hasClass()
是否包含某样式，如果包含返回true，否则返回false
<body>
<input type="button" value="添加类" id="add" />
<input type="button" value="移除类" id="remove" />
<div style="width: 100px;height: 100px;padding: 50px;border: 1px solid black;"></div>
<script>
$(function() {
$("#add").click(function(){
$("div").addClass("bg-red");
});
$("#remove").click(function(){
if($("div").hasClass("bg-red")){
$("div").removeClass("bg-red");
}else{
alert("DIV元素没有bg-red类");
}
});
});
</script>
</body>
height()，width()
设置元素的高度 height("值")
获取元素的高度 height()
设置元素的宽度 width("值")
获取元素的宽度 width()
<body>
<div id="out" style="width: 100px;height: 100px;background-color: red;"></div>
<script>
$(function() {
$("#out").click(function(){
$(this).height("200px").width("200px");
}).mouseover(function(){
$(this).text(" 宽："+$(this).width()+" 高："+$(this).height());
});
});
</script>
</body>
offset()
返回当前元素的坐标 offset()
设置当前元素的坐标 offset({left:值,top:值})
相对于整个页面的坐标
值为像素值
<body>
<div id="out" style="width: 200px;height: 200px;background-color: red;"></div>
<script>
$(function() {
$("#out").click(function(){
$(this).offset({left:20,top:10});
}).mouseover(function(){
$(this).text("坐标(x,y)："+$(this).offset().left+","+$(this).offset().top);
});
});
</script>
</body>
offsetParent()
返回最近的一个已定位的父级元素
定位元素指的是元素的CSS的position值被设置为relative、absolute或fixed的元素
<body>
<div style="position: absolute;left: 200px;top: 200px;">
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
</div>
<script>
$(function() {
$("#i2").offsetParent().css("border","1px solid red");
});
</script>
</body>
position()
相对于父级的坐标
<body>
<div style="position: absolute;left: 200px;top: 200px; border: 1px solid red;padding: 10px;">
<ul style="border:1px solid blue">
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<p></p>
</div>
<script>
$(function() {
$("p").text("item2相对于父级元素的坐标(x,y)："+$("#i2").position().left+","+$("#i2").position().top);
});
</script>
</body>
scrollLeft()，scrollTop()
获取元素相对滚动条左侧的偏移 scrollLeft()
设置元素相对滚动条左侧的偏移 scrollLeft("值")
获取元素相对滚动条上侧的偏移 scrollTop()
设置元素相对滚动条上侧的偏移 scrollTop("值")
<body>
<div id="out" style="width: 200px;height: 200px; overflow: scroll;">
<div style="background-color: red;width: 500px;height: 500px;"></div>
</div>
<p>偏移量(x,y)：0,0</p>
<script>
$(function() {
$("#out").scroll(function(){
$("p").text("偏移量(x,y)："+$(this).scrollLeft()+","+$(this).scrollTop());
});
});
</script>
</body>
操作DOM元素
html()
获取元素中的HTML代码 html()
<body>
<input type="button" value="Hello" />
<div><h1>Hello,JQuery!!</h1></div>
<script>
$(function() {
$("input").click(function(){
alert($("div").html());
});
});
</script>
</body>
设置元素中的HTML代码 html("HTML代码")
<body>
<input type="button" value="Hello" />
<div></div>
<script>
$(function() {
$("input").click(function(){
$("div").html("<h1>Hello,JQuery!!</h1>");
});
});
</script>
</body>
text()
获取元素中的文本 text()
<body>
<input type="button" value="Hello" />
<div><h1>Hello,JQuery!!</h1></div>
<script>
$(function() {
$("input").click(function(){
alert($("div").text());
});
});
</script>
</body>
设置元素中的文本 text("文本内容")
<body>
<input type="button" value="Hello" />
<div></div>
<script>
$(function() {
$("input").click(function(){
$("div").text("<h1>Hello,JQuery!!</h1>");
});
});
</script>
</body>
val()
获取元素的value值 val()
<body>
<input type="button" value="Hello" />
<script>
$(function() {
$("input").click(function(){
alert($(this).val());
});
});
</script>
</body>
设置元素的value值 val("值")
<body>
<input type="button" value="Hello" />
<script>
$(function() {
$("input").click(function(){
$(this).val("你好");
});
});
</script>
</body>
创建节点
<body>
<script>
$(function() {
var ul = $("<ul></ul>");
var li = $("<li>item1</li>");
ul.append(li);
$("body").append(ul);
});
</script>
</body>
append()，appendTo()
将B元素追加到A元素中 A.append(B)
将A元素追加到B元素中 A.appendTo(B)
<body>
<ul>
<li>item1</li>
</ul>
<script>
$(function() {
var li = $("<li>item2</li>");
$("ul").append(li);
});
</script>
</body>
prepend()，prependTo()
将B元素前置插入到A元素中 A.prepend(B)
将A元素前置插入到B元素中 A.prependTo(B)
<body>
<ul>
<li>item1</li>
</ul>
<script>
$(function() {
var li = $("<li>item2</li>");
$("ul").prepend(li);
});
</script>
</body>
after()
将B元素插入到A元素后面 A.after(B)
<body>
<ul>
<li>item1</li>
</ul>
<script>
$(function() {
var li = $("<li>item2</li>");
$("ul li:first").after(li);
});
</script>
</body>
before()
将B元素插入到A元素前面 A.after(B)
<body>
<ul>
<li>item1</li>
</ul>
<script>
$(function() {
var li = $("<li>item2</li>");
$("ul li:first").before(li);
});
</script>
</body>
remove()
删除整个元素
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
$("#i2").remove();
});
</script>
</body>
empty()
清空节点内容
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
$("#i2").empty();
});
</script>
</body>
detach()
删除整个节点，保留元素的绑定事件、附加的数据
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
$("#i2").bind("click",function(){
$(this).css("background-color","red");
});
var i2 = $("#i2").detach();
$("ul").append(i2);
});
</script>
</body>
replaceWith()
用B元素替换掉A元素 A.replaceWith(B)
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
var i4 = $('<li id="i4">item4</li>');
$("#i2").replaceWith(i4);
});
</script>
</body>
replaceAll()
用A元素替换掉B元素 A.replaceAll(B)
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
var i4 = $('<li id="i4">item4</li>');
i4.replaceAll($("#i2"));
});
</script>
</body>
clone()
复制节点及内容 clone([false])
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
$("#i2").bind("click",function(){
$(this).css("background-color","red");
});
var i4 = $("#i2").clone();
$("ul").append(i4);
});
</script>
</body>
复制节点、内容及事件 clone(true)
<body>
<ul>
<li id="i1">item1</li>
<li id="i2">item2</li>
<li id="i3">item3</li>
</ul>
<script>
$(function() {
$("#i2").bind("click",function(){
$(this).css("background-color","red");
});
var i4 = $("#i2").clone(true);
$("ul").append(i4);
});
</script>
</body>
操作DOM元素属性
attr()
获取元素指定属性的值 attr("属性名")
<body>
<input type="button" name="btn" value="按钮" />
<script>
$(function() {
alert($("input").attr("name"));
});
</script>
</body>
设置元素指定属性的值 attr("属性名","值")
如果元素本身没有该属性，则直接添加
<body>
<input type="button" name="btn" value="按钮" />
<script>
$(function() {
alert($("input").attr("name"));
$("input").attr("name","button");
alert($("input").attr("name"));
});
</script>
</body>
一次性设置多个属性 attr({"属性名":"值",...,"属性名":"值"})
<body>
<input type="button" value="按钮" />
<script>
$(function() {
$("input").attr({"name":"btn","id":"btn"});
});
</script>
</body>
removeAttr()
移除属性 removeAttr("属性名")
<body>
<input type="button" name="btn" value="按钮" />
<script>
$(function() {
$("input").removeAttr("name");
});
</script>
</body>
遍历DOM元素
选择子元素
children()
获取所有子元素 children()
<body>
<dl>
<dt>title</dt>
<dd>item1</dd>
<dd>item2</dd>
<dd>item3</dd>
</dl>
<script>
$(function() {
console.log($("dl").children());
});
</script>
</body>
获取指定子元素 children("筛选")
<body>
<dl>
<dt>title</dt>
<dd>item1</dd>
<dd>item2</dd>
<dd>item3</dd>
</dl>
<script>
$(function() {
console.log($("dl").children("dd"))
});
</script>
</body>
选择兄弟级元素
next()
获取下一个紧邻的兄弟元素 next()
获取下一个紧邻的指定兄弟元素 next("筛选")
<body>
<dl>
<dt>title</dt>
<dd id="d1">item1</dd>
<dd id="d2">item2</dd>
<dd id="d3">item3</dd>
</dl>
<script>
$(function() {
$("#d1").next().css("background-color","red");
});
</script>
</body>
prev()
获取上一个紧邻的兄弟元素 prev()
获取上一个紧邻的指定兄弟元素 prev("筛选")
<body>
<dl>
<dt>title</dt>
<dd id="d1">item1</dd>
<dd id="d2">item2</dd>
<dd id="d3">item3</dd>
</dl>
<script>
$(function() {
$("#d2").prev().css("background-color","red");
});
</script>
</body>
siblings()
获取同辈元素 siblings()
<body>
<dl>
<dt>title</dt>
<dd id="d1">item1</dd>
<dd id="d2">item2</dd>
<dd id="d3">item3</dd>
</dl>
<script>
$(function() {
$("#d2").siblings().css("background-color","red");
});
</script>
</body>
获取指定同辈元素 siblings("筛选")
<body>
<dl>
<dt>title</dt>
<dd id="d1">item1</dd>
<dd id="d2">item2</dd>
<dd id="d3">item3</dd>
</dl>
<script>
$(function() {
$("#d2").siblings("dt").css("background-color","red");
});
</script>
</body>
选择父元素
parent()
获取元素的直接父级元素
<body>
<dl>
<dt>title</dt>
<dd id="d1">item1</dd>
<dd id="d2">item2</dd>
<dd id="d3">item3</dd>
</dl>
<script>
$(function() {
console.log($("#d2").parent());
});
</script>
</body>
parents()
获取元素的所有父级元素
<body>
<dl>
<dt>title</dt>
<dd id="d1">item1</dd>
<dd id="d2">item2</dd>
<dd id="d3">item3</dd>
</dl>
<script>
$(function() {
console.log($("#d2").parents());
});
</script>
</body>
遍历元素
each()
循环遍历选中的元素
<body>
<dl>
<dt>title</dt>
<dd id="d1" data-color="red">item1</dd>
<dd id="d2" data-color="blue">item2</dd>
<dd id="d3" data-color="green">item3</dd>
</dl>
<script>
$(function() {
$("dd").each(function(){
$(this).css("background-color",$(this).attr("data-color"));
});
});
</script>
</body>
JQuery的链式写法
连续操作
<body>
<dl>
<dt>title</dt>
<dd id="d1" data-color="red">item1</dd>
<dd id="d2" data-color="blue">item2</dd>
<dd id="d3" data-color="green">item3</dd>
</dl>
<script>
$(function() {
$("dd").mouseover(function(){
$(this).css("background-color","red");
}).mouseout(function(){
$(this).css("background-color","white");
});
});
</script>
</body>
end()
中断操作，重新开始
<body>
<dl>
<dt>title</dt>
<dd id="d1" data-color="red">item1</dd>
<dd id="d2" data-color="blue">item2</dd>
<dd id="d3" data-color="green">item3</dd>
</dl>
<script>
$(function() {
$("#d2").prev().css("background-color","red").end().next().css("background-color","blue");
});
</script>
</body>
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
