jQuery相关
jQuery官网：http://jquery.com
jQuery在线API：http://api.jquery.com
jQuery UI:http://jqueryui.com
jQuery核心选择器Sizzle.js:http://sizzlejs.com
1、jQuery的ready事件与window.onload事件的区别：1）、window.onload需要等页面上全部加载完毕，其中包含页面中的标签引用的其它资源（整个页面需要加载完毕）；而jQuery的ready事件，只要等待页面上的所有标签加载完毕就能触发。所以说从用户的角度来说，使用jQuery事件会让用户感觉处理速度变快了
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
//1、javascript中页面加载完毕触发
window.onload = function () { };
//2、jQuery中页面加载完毕触发
//2.1、完整的写法
$(document).ready(function () { });
//2.2、简写
$(function () { });
//2.3、完整写法，jQuery的符号就是‘$’
jQuery(document).ready(function () { });
//2.4、简写
jQuery(function () { });
//3、以上jQuery的写法只是window.onload的类似写法，下面这才是和window.onload表达意思相同的写法
$(window).load(function () { });
</script>
</head>
<body>
</body>
</html>
2、$.each(obj,function(){});循环遍历键值对或数组
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
var arrInt = [1, 2, 3, 4, 5, 6, 7, 8];
$.each(arrInt, function (key,value) {
alert(key + ' , ' + value);
});
var p = { 'name': '张三', '年龄': 20, 'email': '123@yaho.com' };
$.each(p, function (key, value) {
alert(key + ' , ' + value);
});
</script>
</head>
<body>
</body>
</html>
3、$.map(obj,function(elements,index){});遍历数组或者键值对将返回值添加到新的数组或键值对
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
var arrInt = [10, 20, 30, 40, 50, 60, 70];
var newArr = $.map(arrInt, function (elements,index) {
if (index > 3) {
return elements * 2;
} else {
return elements;
}
});
alert(newArr);
</script>
</head>
<body>
</body>
</html>
4、jQuery对象和dom对象是可以互相转换的。
1）、当直接使用dom对象的时候会存在浏览器兼容问题，所以这时候可以把dom对象转换位jQuery对象，然后再操作。
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
document.getElementById('btn1').onclick = function () {
//获得一个dom对象
var domObj = document.getElementById('div1');
//将dom对象转换位jQuery对象
var $jqObj = $(domObj);
//调用jQuery对象的text方法
$jqObj.text('Hello!');
}
});
</script>
</head>
<body>
<input type="button" name="name" value="添加" id="btn1"/>
<div id="div1" style="width:200px;height:200px;border:1px solid green;">
</div>
</body>
</html>
5、jQuery中的一些常用方法
1）、val方法：有参数表示设置文本框的值，无参数表示取得文本框中的值
2）、css方法：设置对象的样式，可以一个键值对一个键值对的设置，也可以一次性传一个键值对集合批量设置
3）、text方法和html方法：都可以设置超链接显示的文字，html可以显示图片
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
//获取文本框对象
var $txt = $(document.getElementById('txt1'));
//取得文本框中的内容，无参的val表示获取值
alert($txt.val());
//给文本框中设置值，有参的val表示设置值
$txt.val('啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊！');
//设置样式(传一对键值对一个一个设置)
$txt.css('border', '2px solid blue');
//设置样式（传一个键值对集合批量设置样式）
$txt.css({
'border': '2px solid red',
'width': '200px',
'height':'100px'
});
var $alink = $(document.getElementById('a1'));
$alink.text('百度一下你就知道');
$alink.html('百度两下你就不知道');
});
});
</script>
</head>
<body>
<input type="button" id="btn1" name="name" value="按钮" />
<input type="text" id="txt1" value="" />
<a id="a1" href="http://www.baidu.com">百度</a>
</body>
</html>
6、选择器
1）、id选择器：$('#id')
2）、标签选择器：$('p')
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#div1').css({
'width':'200px',
'height': '200px',
'background-color':'red'
});
$('p').css({
'background-color': 'red'
});
});
</script>
</head>
<body>
<div id="div1"></div>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
<p>吼吼吼吼吼吼吼吼吼</p>
</body>
</html>
3）、类选择器：$('.x')
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//选取所有应用了x类的元素
$('.x').css({
'border':'2px solid red'
});
});
</script>
</head>
<body>
<div id="div1"></div>
<input class="x" type="button" />
<input class="x" type="text" />
<span class="x">哈哈</span>
<p class="x">春眠不觉晓</p>
</body>
</html>
4）、标签+类选择器：$('input.x')
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//选取所有应用了x类的元素
$('.x').css({
'border':'2px solid red'
});
//选取所有应用了x类的input元素
$('input.x').css({
'border':'4px solid yellow'
});
});
</script>
</head>
<body>
<div id="div1"></div>
<input class="x" type="button" />
<input class="x" type="text" />
<span class="x">哈哈</span>
<p class="x">春眠不觉晓</p>
</body>
</html>
5）、组合选择：$(.class1,#btn1,p,div) $('选择器1，选择器2，选择器3')
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('.class1,#btn1,p,div').css({
'backgroundColor':'red'
});
});
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn1"/>
<p class="class1">test</p>
<p class="class1">test</p>
<p class="class1">test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<div>div1</div>
<div>div1</div>
<div class="class1">div1</div>
<div class="class1">div1</div>
</body>
</html>
6）、层次选择器：
I、后代选择器：$('选择器1 选择器2')选择器之间用空格隔开，选取的是选择器1下面的所有的选择器2
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//选取页面上所有的p元素
$('p').css('backgroundColor', 'red');
//选取所有div1下的p元素
$('#div1 p').css('backgroundColor', 'yellow');
//选取页面上所有div下的p元素
$('div p').css('backgroundColor', 'blue');
});
</script>
</head>
<body>
<div id="div1">
<p>11111111111111</p>
<p>22222222222222</p>
<p>33333333333333</p>
<p>44444444444444</p>
</div>
<p>55555555555</p>
<div>
<p>11111111111111</p>
<p>22222222222222</p>
<p>33333333333333</p>
<p>44444444444444</p>
</div>
</body>
</html>
II、子元素选择器：$('选择器1 > 选择器2')，选取的是选择器1下直接子元素选择器2
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//选取body下的直接子元素span
$('body > span').css({
'font-size': '30px',
'backgroundColor': 'pink'
});
});
</script>
</head>
<body>
<span>
我是body下的span
</span>
<div>
<span>我是div下的span</span>
</div>
<p><span>我是p下的span</span></p>
</body>
</html>
III、相邻元素选择器（必须是同级元素）：$('选择器1 + 选择器2')，取得是紧跟着选择器1后面的一个选择器2（下一个元素如果不是选择器2，中间只要隔开了就取不到了，必须是紧邻），等价于$('选择器1').next('选择器2')
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('div + p').css('backgroundColor','red');
});
</script>
</head>
<body>
<div>div1</div><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>
</body>
</html>
IV、相邻选择器（必须是同级元素）：$('选择器1 ~ 选择器2'),取得是选择器1后面的所有选择器2（选择器1和选择器2之间可以允许有间隔），
等价于$('选择器1').nextAll('选择器2')
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('div ~ p').css('backgroundColor', 'red');
});
</script>
</head>
<body>
<div>div1</div><p>春眠不觉晓</p><p>处处闻啼鸟</p><p>夜来风雨声</p><p>花落知多少</p>
</body>
</html>
V、其它选择器：
$('选择器1').next()=$('选择器1 + *')；选择器1的下一个任意兄弟（同级）元素
$('选择器1').nextAll()=$('选择器1 ~ *')；选择器1的后面的所有任意兄弟（同级）元素
$('选择器1').prev('选择器2')；选择器1前面的一个兄弟（同级）选择器2
$('选择器1').prev()；选择器1前面的一个兄弟（同级）任意元素
$('选择器1').prevAll('选择器2');选择器1前面的所有兄弟（同级）选择器2
$('选择器1').prevAll();选择器1前面的所有兄弟（同级）任意元素
$('选择器1').siblings('选择器2');除了选择器1的所有兄弟（同级）选择器2
$('选择器1').siblings();除了选择器1的所有兄弟（同级）任意元素
VI、选择器练习：有些方法是会破坏链式编程的链的，比如：next(),nextAll,prev(),prevAll(),siblings(),无参数的text()、val()、html()
一旦链式编程的链被破坏之后可以通过end()方法来修复。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jQuery/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//给li注册鼠标移上事件，移上的li背景色变红其余变白
//再给li注册单击事件，点击的li前面的li变绿，之后的变橘黄
//在单击事件的时候，prevAll()方法会破坏链式编程的链（prevAll方法返回的是前面所有的li对象，不是当前点击的对象），
//所以要调用一下end()方法来修复链（end()方法的作用就是返回最近点击的那个对象）
$('#u1 li').mouseover(function () {
$(this).css('backgroundColor', 'red').siblings('li').css('backgroundColor','');
}).click(function () {
$(this).prevAll().css('backgroundColor', 'green').end().nextAll().css('backgroundColor','orange');
});
});
</script>
</head>
<body>
<ul id="u1">
<li>大天狗</li>
<li>茨木</li>
<li>酒吞</li>
<li>妖刀</li>
</ul>
</body>
</html>
jQuery实现五角星评分
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//1、给td设置样式
//2、注册鼠标移上事件，当鼠标移上，当前以及之前为★，之后为☆
//3、注册鼠标移出事件，当鼠标移出，所有都为☆，属性为isclicked=isclicked的及之前的为★
//4、给每个td添加一个属性score，分别为10，20，30，40，50
//5、给每个td注册一个单击事件，当单击某个td就给这个td添加一个isclicked属性，其余的td删除isclicked属性，然后将这个td的score属性的值给pscore
$('#tb1 td').css({
'width': '50px',
'height': '50px',
'color': 'red',
'font-size': '50px',
'cursor':'pointer'
}).mouseover(function () {
$(this).text('★').prevAll().text('★').end().nextAll().text('☆');
}).mouseout(function () {
$('#tb1 td').text('☆');
$('#tb1 td[isclicked=isclicked]').text('★').prevAll().text('★');
}).attr('score', function (index) {
return (index + 1) * 10;
}).click(function () {
$(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked');
$('#pscore').text($(this).attr('score'));
});
});
</script>
</head>
<body>
<p id="pscore"></p>
<table id="tb1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
</html>
7、jQuery可以链式编程和隐式迭代
为什么可以链式编程呢？因为jQuery对象的方法默认在执行完毕都有一个返回值即对象本身（return this）,所以可以进行链式编程8、attr（）和prop（）
attr：是attribute的简称，表示的是’属性‘的意思，具体是表示文档节点的属性，在获取和设置自己定义的属性的时候用
prop:是proprety的简称，表示的也是‘属性’的意思，具体是表示js对象的属性，在获取和设置js dom对象的原生的属性的时候用，通过prop获取的值是经过计算的，不是直接在网页中看到的属性的值。
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//全选
$('#btn1').click(function () {
$('input[type=checkbox]').attr('checked', true);
$('input[type=checkbox]').prop('checked', true);
});
//全不选
$('#btn2').click(function () {
$('input[type=checkbox]').attr('checked', false);
$('input[type=checkbox]').prop('checked', false);
});
//反选
$('#btn3').click(function () {
//通过遍历来设置
$.each($('input[type=checkbox]'), function (k, v) {
$(v).attr('checked', !$(v).attr('checked'));
$(v).prop('checked', !$(v).prop('checked'));
});
//$('input[type=checkbox]').attr('checked', function (index, attr_value) {
// return !attr_value;
//});
});
});
</script>
</head>
<body>
<input type="button" name="name" value="全选" id="btn1" />
<input type="button" name="name" value="全不选" id="btn2" />
<input type="button" name="name" value="反选" id="btn3" />
<input type="checkbox" name="name" value="" id="ch1" />
<input type="checkbox" name="name" value="" id="ch2" />
<input type="checkbox" name="name" value="" id="ch3" />
<input type="checkbox" name="name" value="" id="ch4" />
</body>
</html>
8、jQuery对象就是一个dom对象的集合，所以可以通过索引直接访问其中的任何一个对象，并且返回的就是dom对象
9、通过jQuery来操作类样式：
1）、获取类样式：hasClass('类样式')；获取到了反回true,否则为false。
2）、追加类样式：addClass('类样式')；不对对象原本应用的类样式有影响，直接追加给对象
3）、移出类样式：removeClass('类样式');移出指定的类样式
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//1、判断是否应用了某个样式
//2、如果存在移除某个类样式
//3、如果不存在追加某个类样式
if ($('body').hasClass('closeLingt')) {
$('#btn').val('关灯');
$('body').removeClass('closeLingt');
} else {
$('body').addClass('closeLingt');
$('#btn').val('开灯');
}
});
});
</script>
<style type="text/css">
.closeLingt {
background-color:black;
}
</style>
</head>
<body>
<input type="button" name="name" value="关灯" id="btn" />
</body>
</html>
4）、自动设置类样式：toggleClass('类样式')；方法自己判断是否有某个类样式，如果有就移除这个类样式，没有就追加这个类样式。
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('body').toggleClass('closeLingt');
if ($('#btn').val() == '开灯') {
$('#btn').val('关灯');
} else {
$('#btn').val('开灯');
}
});
});
</script>
<style type="text/css">
.closeLingt {
background-color:black;
}
</style>
</head>
<body>
<input type="button" name="name" value="关灯" id="btn" />
</body>
</html>
10、常用的过滤器：使用冒号将标签和过滤器隔开，中间没有空格
1）、:first ---取第一个
2）、:last---取最后一个
3）、:eq(n)---取第n个
4）、:gt(n)---取大于n的
5）、:lt(n)---取小于n的
6）、:not(类样式)---取除了某中类样式的
7）、:header---取所有的h标签
8）、:even---取偶数行（这里的偶数指的是索引）
9）、:odd---取奇数行（这里的奇数指的是索引）
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//$('p').css('backgroundColor', 'red');//给所有的p标签设置背景色
//$('p:first').css('backgroundColor','red');//给第一个p标签设置背景色
//$('p:last').css('backgroundColor', 'red');//给最后一个p标签设置背景色
//$('p:eq(2)').css('backgroundColor', 'red');//给第n个p标签设置背景色，n表示p标签的索引
//$('p:gt(2)').css('backgroundColor', 'red');//给索引大于2的p标签设置背景色，gt表示大于的意思
//$('p:lt(2)').css('backgroundColor', 'red');//给索引小于2的p标签设置背景色，lt表示小于的意思
//$('p:not(.cls1)').css('backgroundColor', 'red');//给除了应用了cls1样式的p标签设置背景色
//$(':header').css('backgroundColor', 'red');//给页面上所有的h标签设置背景色
});
});
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn" />
<h1>hhhhhhhhhhh</h1>
<h2>hhhhhhhhhhh</h2>
<h3>hhhhhhhhhhh</h3>
<h4>hhhhhhhhhhh</h4>
<h5>hhhhhhhhhhh</h5>
<h6>hhhhhhhhhhh</h6>
<p>1111111111111</p>
<p class="cls1">1111111111111</p>
<p>1111111111111</p>
<p>1111111111111</p>
<p class="cls1">1111111111111</p>
<p class="cls1">1111111111111</p>
<p>1111111111111</p>
</body>
</html>
10）、选择器练习
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//点击按钮表格隔行变色，奇红偶黄
$('#tb1 tr:even').css('backgroundColor', 'red');//索引为偶数在页面上显示出来才是表格的奇数行
$('#tb1 tr:odd').css('backgroundColor', 'yellow');//索引为奇数在页面上显示出来才是表格的偶数行
//表格前三行字体为粗体
$('#tb1 tr:lt(3)').css('font-weight','bolder');
});
//鼠标移到的行变成黄色，其余行变为蓝色
$('#tb1 tr').mouseover(function () {
$(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor','blue');
});
});
</script>
</head>
<body>
<input type="button" name="name" value="button" id="btn" />
<table border="0" cellpadding="0" cellspancing="0" id="tb1">
<tr><td>姓名</td><td><input type="text" id="txt1" /></td></tr>
<tr><td>学号</td><td><input type="text" id="txt2" /></td></tr>
<tr><td>语文</td><td><input type="text" id="txt3" /></td></tr>
<tr><td>数学</td><td><input type="text" id="txt4" /></td></tr>
<tr><td>物理</td><td><input type="text" id="txt5" /></td></tr>
<tr><td>化学</td><td><input type="text" id="txt6" /></td></tr>
<tr><td>生物</td><td><input type="text" id="txt7" /></td></tr>
<tr><td>英语</td><td><input type="text" id="txt8" /></td></tr>
</table>
</body>
</html>
11）、$('选择器',this)或者$('选择器',$(this))表达的意思一模一样，this表示的是在一定范围内获取选择器选择的对象
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script src="jQuery/scripts/jQuery-3.2.1.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 //设置每个单元格的样式 10 $('#tb1 td').css({ 11 'width': '50px', 12 'height': '30px', 13 'text-align':'center' 14 }); 15 //给tb1下的所有行注册一个单击事件 16 $('#tb1 tr').click(function () { 17 //将所有td的背景色设为默认 18 $('#tb1 td').css('backgroundColor', ''); 19 //设置当前点击行的偶数（索引为奇数）单元格为黄色 20 $('td:odd', this).css('backgroundColor','yellow');//这里的this表示的是‘当前行’这么个范围，也可以写成$(this) 21 //设置当前点击行的奇数（索引为偶数）单元格为红色 22 $('td:even', this).css('backgroundColor','red'); 23 }); 24 }); 25 </script> 26 </head> 27 <body> 28 <table id="tb1" border="1" cellpadding="2" cellspancing="2"> 29 <tr> 30 <td>AAA</td> 31 <td>AAA</td> 32 <td>AAA</td> 33 <td>AAA</td> 34 <td>AAA</td> 35 </tr> 36 <tr> 37 <td>AAA</td> 38 <td>AAA</td> 39 <td>AAA</td> 40 <td>AAA</td> 41 <td>AAA</td> 42 </tr> 43 <tr> 44 <td>AAA</td> 45 <td>AAA</td> 46 <td>AAA</td> 47 <td>AAA</td> 48 <td>AAA</td> 49 </tr> 50 <tr> 51 <td>AAA</td> 52 <td>AAA</td> 53 <td>AAA</td> 54 <td>AAA</td> 55 <td>AAA</td> 56 </tr> 57 <tr> 58 <td>AAA</td> 59 <td>AAA</td> 60 <td>AAA</td> 61 <td>AAA</td> 62 <td>AAA</td> 63 </tr> 64 <tr> 65 <td>AAA</td> 66 <td>AAA</td> 67 <td>AAA</td> 68 <td>AAA</td> 69 <td>AAA</td> 70 </tr> 71 </table> 72 </body> 73 </html>
11、属性过滤选择器
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//1、选取所有name为txt1的元素
//$('input[name=txt1]').css('backgroundColor', 'red');
//2、选取所有具有name属性的input
//$('input[name]').css('backgroundColor', 'red');
//3、选取具有name属性的元素
//$('body *[name]').css('backgroundColor', 'red');
//4、选取name属性为txt1的元素
//$('body [name = txt1]').css('backgroundColor', 'red');
//5、选取页面上具有name属性，且name属性以a开头
//$('body *[name^=a]').css('backgroundColor', 'red');
//6、选取页面上具有name属性，且name属性以a结尾
//$('body *[name$=a]').css('backgroundColor', 'red');
//7、选取页面上具有name属性，且name属性为空的
//$('body *[name=""]').css('backgroundColor', 'red');
//8、选取页面上具有name属性，且name属性包含a
//$('body *[name*=a]').css('backgroundColor', 'red');
//9、选取页面上name属性不等于txt6(没有name属性的也会被选择)
//$('body *[name!=txt6]').css('backgroundColor', 'red');
//10、选取具有多个属性的元素
$('body *[name][id][value]').css('backgroundColor', 'red');
});
</script>
</head>
<body>
<input type="text" name="txt1" value="" id="t1" />
<input type="text" name="txt2a" value="" />
<input type="text" name="atxt3" value="" />
<input type="text" name="txt4a" value="" />
<input type="text" name="atxt5" value="" />
<input type="text" name="txt6" value="" />
<input type="text" name="" value="" />
<input type="text" value="" />
<input type="text" name="123a321" value="" />
<input type="text" name="123ab321" value="" />
<textarea name="txt1"></textarea>
</body>
</html>
12、属性 表单过滤器
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//1、选取页面上所有被禁用的元素
//$(':disabled').css('backgroundColor', 'red');
//2、选取页面上所有没被禁用的元素
//$(':enabled').css('backgroundColor', 'red');
//3、选取form1下的所有被禁用的元素
//$('#form1 :disabled').css('backgroundColor', 'red');
//4、选取form1下的所有没被禁用的元素
//$('#form1 :enabled').css('backgroundColor', 'red');
//5、选取所有没被禁用的input标签
//$('input:enabled').css('backgroundColor', 'red');
//6、单击按钮，获取所有被选中的checkbox或radio
//这里不知道为什么实现不了
$('#btn').click(function () {
$(':not(:true)').css('border', '1px solid blue');
});
//获取被选中的option
$('#btn1').click(function () {
$(':selected').text(function (key,value) {
return '★'+value+'★';
});
$('select :not(:selected)').text(function (key, value) {
return '☆' + value + '☆';
});
});
});
</script>
</head>
<body>
<input type="button" name="name" id="btn1" value="button" />
<select>
<option value="value">辽宁</option>
<option value="value">辽宁1</option>
<option value="value">辽宁2</option>
<option value="value">辽宁3</option>
</select>
<input type="button" name="name" id="btn" value="button" />
<div>
<input type="checkbox" name="name" value="" />
<input type="checkbox" name="name" value="" />
<input type="radio" name="name" value="" />
<input type="checkbox" name="name" value="" />
<input type="radio" name="name" value="" />
</div>
<form id="form1" action="/" method="post">
<input type="text" name="name" value="" disabled="disabled"/>
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="button" name="name" value="button" disabled="disabled"/>
<input type="button" name="name" value="button" />
<input type="button" name="name" value="button" disabled="disabled"/>
<input type="button" name="name" value="button" />
</form>
<p>----------------------------------------------------------------------</p>
<input type="text" name="name" value="" disabled="disabled"/>
<input type="text" name="name" value="" />
<input type="text" name="name" value="" />
<input type="button" name="name" value="button" disabled="disabled"/>
<input type="button" name="name" value="button" />
<input type="button" name="name" value="button" disabled="disabled"/>
<input type="button" name="name" value="button" />
</body>
</html>
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
//为每个checkbox注册单击事件
$('input[type=checkbox]').click(function () {
//1\获取当前被选中的
var chks = $('input[type=checkbox]:checked');
//2获取个数
var n = chks.length;
//3获取每个value
var names = [];
$.each(chks, function (k,chkObj) {
names[names.length]=$(chkObj).val();
});
//4显示到p中
$('#pmsg').text('共选中了'+n+'项，分别是：'+names);
});
});
</script>
</head>
<body>
<input type="checkbox" name="name" value="鼠" />鼠
<input type="checkbox" name="name" value="牛" />牛
<input type="checkbox" name="name" value="猴" />猴
<input type="checkbox" name="name" value="鸡" />鸡
<p id="pmsg">
共选择了0项，分别是：
</p>
</body>
</html>
13、jQuery动态创建元素
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
//追加到元素后面
//$('<a href="http://www.baidu.com">百度</a>').appendTo('#div1');
//$('#div1').append('<a href="http://www.baidu.com">百度</a>');
//插入到前面
//$('#div1').prepend('<a href="http://www.baidu.com">百度</a>');
//插入到div1前面
$(('<a href="http://www.baidu.com">百度</a>')).insertBefore('#div1');
//插入到div1后
$(('<a href="http://www.baidu.com">百度</a>')).insertAfter('#div1');
});
});
</script>
<style type="text/css">
#div1 {
width:200px;
height:200px;
border:1px solid blue;
}
</style>
</head>
<body>
<input type="button" name="name" value="button" id="btn" />
<div id="div1">
adasd
</div>
</body>
</html>
jQuery实现属性选择器
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$(':button[value=">>"]').click(function () {
$('#s1 option').appendTo('#s2');
});
$(':button[value=">"]').click(function () {
$('#s1 option:selected').appendTo('#s2');
});
$(':button[value="<<"]').click(function () {
$('#s2 option').appendTo('#s1');
});
$(':button[value="<"]').click(function () {
$('#s2 option:selected').appendTo('#s1');
});
});
</script>
<style type="text/css">
select {
width:200px;
height:200px;
border:1px solid blue;
}
</style>
</head>
<body>
<select id="s1" multiple="multiple">
<option>新增</option>
<option>修改</option>
<option>删除</option>
<option>查询</option>
</select>
<input type="button" name="name" value="<<" />
<input type="button" name="name" value="<" />
<input type="button" name="name" value=">>" />
<input type="button" name="name" value=">" />
<select id="s2" multiple="multiple">
</select>
</body>
</html>
jQuery动态创建表格
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
var arrs = {
'大天狗': 'datiangou',
'妖刀姬': 'yaodaoji',
'妖刀姬1':'yaodaoji1'
};
$(function () {
$('#btn1').click(function () {
var tbObj = $('<table border="1"></table>').appendTo('body');
for (var key in arrs) {
$('<tr><td>' + key + '</td><td>' + arrs[key] + '</td></tr>').appendTo(tbObj);
}
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="动态创建表格" />
</body>
</html>
14、empty和remove
empty()方法：删除元素内部
remove()方法：连带自己一起删除
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
$('#div1').empty();
});
$('#btn2').click(function () {
$('#div1').remove();
});
});
</script>
<style type="text/css">
#div1 {
width:100px;
height:200px;
border:1px solid blue;
}
</style>
</head>
<body>
<input type="button" name="name" id="btn1" value="empty" />
<input type="button" name="name" id="btn2" value="remove" />
<div id="div1">
<a></a><p>sdads</p>
</div>
</body>
</html>
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
var sec = 4;
var intervalId = setInterval(function () {
if (sec > 0) {
$('#btn').val('倒计时' + sec + '秒');
sec--;
} else {
$('#btn').val('同意').prop('disabled',false);
}
}, 1000);
});
</script>
</head>
<body>
<input type="button" name="name" id="btn" value="倒计时5秒" disabled="disabled" />
</body>
</html>
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
$('<tr><td>' + $('#txtName').val() + '</td><td>' + $('#txtAge').val() + '</td><td><input onclick="deleteCurrentRow(this);" type="button" value="删除"/></td></tr>').appendTo('#tbody1');
});
});
function deleteCurrentRow(current) {
//先拿到当前点的这一行，current代表的就是button按钮，它的父节点就是th,th的父节点就是tr。
var tr = current.parentNode.parentNode;
$(tr).remove();
//然后再从tbody中把这一行删除出去
// document.getElementById('tbody1').removeChild(tr);
}
</script>
</head>
<body>
<fieldset style="width: 300px;">
<legend>新增人员信息</legend>
<p>
姓名：<input type="text" id="txtName" />
</p>
<p>
年龄：<input type="text" id="txtAge" />
</p>
<p>
<input type="button" name="name" id="btn1" value="新增" />
</p>
</fieldset>
<legend style="width: 300px; text-align: center;">人员信息表</legend>
<table border="1" cellpadding="0" cellspacing="0" style="width: 300px;">
<thead>
<tr>
<th>姓名
</th>
<th>年龄
</th>
<th>删除
</th>
</tr>
</thead>
<tbody id="tbody1">
</tbody>
</table>
</body>
</html>
15、节点替换和节点包裹
replaceWith()，替换，$('待替换元素').replaceWith('替换成的元素')
replaceAll()，替换，$('动态创建的一个元素').replaceAll('待替换元素')
wrap(),包裹，$('被包裹元素').wrap('将要用来包裹的某种标签')，在元素外包裹
wrapInner(),包裹，$('被包裹元素').wrapInner('将要用来包裹的某种标签')，在元素内包裹
wrapAll(),包裹，$('被包裹元素').wrapAll('将要用来包裹的某种标签')，将某类元素用一个标签来包裹
16、设置radio，checkbox的选中项
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$(':radio').val(['nan']);
$(':checkbox').val(['ppq','dlq']);
});
});
</script>
</head>
<body>
<input type="button" name="name" id="btn" value="button" />
<p>
<input type="radio" name="gender" value="nan" />男
<input type="radio" name="gender" value="nv" />女
<input type="radio" name="gender" value="baomi" />保密
</p>
<p>
<input type="checkbox" name="hb" value="dlq" />打篮球
<input type="checkbox" name="hb" value="tzq" />踢足球
<input type="checkbox" name="hb" value="ppq" />乒乓球
</p>
</body>
</html>
17、高亮选中函数
18、jQuery事件对象evt
evt.pageX 获取x坐标
evt.pageY 获取y坐标
evt.which 获取鼠标按下的值或键盘按下的值（具体看什么事件）
evt.stopPropagation() 取消事件冒泡
19、动画
show(3000),3秒显示出来
hide(3000)，3秒隐藏完毕
slideUP(3000)，3秒隐藏完毕（像窗帘一下拉上去）
slideDown(3000)，3秒显示出来（像窗帘一下拉下来）
fadeIn(3000)，3秒内淡入进来，显示
fadeOut(3000),3秒内淡出，隐藏
fadeTo(3000,0.3),3秒内淡入淡出到透明度为0.3止
toggle(3000),点击按钮如果当前是show,则为hide;反之为show
slideToggle(3000),点击按钮如果当前是slideUP,则为slideDown;反之为slideUP
fadeToggle(3000),点击按钮如果当前是fadeIn,则为fadeOut;反之为fadeIn
20、animate动画
animate({height:'10px',width:'10px'},1000);1秒内完成某个动画，花括号内是要完成的样式
$(':animated').stop();停止当前正在执行的动画，不会停止之后的动画
$(':animated').stop(true);停止当前正在执行的动画，并且清除之后队列中的动画
$(':animated').stop(true,true);//停止当前动画，并且将元素设置到当前动画正常结束时的位置，后续动画队列被清除
21、jQuery.cookie插件
1）、cookie是保存到本地硬盘里 2）、有一定安全性问题 3）、和浏览器相关 4）、经过浏览器写入到本地硬盘 5）、和域名相关
6）、是由浏览器在用户请求相同域名的时候自动携带一起来发起请求的
7）、因为cookie是写在客户端浏览器的，所以可以随时删除对应的cookie信息
<!DOCTYPE html>
<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/scripts/jQuery-3.2.1.js"></script>
<script src="jQuery/scripts/jquery.cookie.js"></script>
<script type="text/javascript">
$(function () {
//1、检查是否有对应的cookie
if ($.cookie('uname')) {
$('#pmsg').text('欢迎您'+$.cookie('uname')+'！');
} else {
$('#pmsg').text('欢迎您，游客！');
}
$('#btn').click(function () {
var user_name = $('#txt').val();
$.cookie('uname', user_name, { expires: 7, path: '/', secure: false });
alert('写入成功！');
});
});
</script>
</head>
<body>
请输入姓名：<input type="text" name="name" value="" id="txt" /><input type="button" name="name" value="登陆" id="btn" />
<p id="pmsg">欢迎您，游客！</p>
</body>
</html>
22、jQuery各种插件的编写及使用
23、子页面刷新父页面的某个元素
$.parent.$('#spanHead').load($.parent.location.href + " #spanHead");
