jQuery学习笔记
- 一、初识jQuery
- 二、jQuery的使用
-
- 1、jQuery函数 ：$ / jQuery
- 2、jQuery函数的使用
- 3、选择器
- 4、基本选择器
- 5、层次选择器
- 6、过滤选择器
- 7、常见效果-表格隔行变色
- 8、表单选择器
- 9、工具方法
- 10、常见效果-多Tab点击切换
- 11、属性
- 12、css
- 13、位置offset和position
- 14、scroll
- 15、常见效果-回到顶部
- 16、元素的尺寸
- 17、对象的筛选-过滤
- 18、筛选-对象的查找
- 19、一个小案例-选择复选框
- 20、文档处理-增删改
- 21、例子-添加删除记录
- 22、事件处理
- 23、区别mouseover与mouseenter
- 24、事件委托
- 25、轮播图
- 26、淡入淡出效果
- 27、滑动
- 28、显示与隐藏
- 29、自定义动画
- 30、导航动态显示效果
- 三、多库并存
- 四、onload与ready
- 五、扩展插件
- 六、jQuery插件-jQueryValidate
- 七、jQuery插件-jQueryUI
- 八、jQuery日期控件-laydate
- 九、案例-用jQuery做一些pc端京东页面效果
一、初识jQuery
个人认为学习jQuery核心要会js以及会查中文文档
1、是什么？
一个JS函数库: write less, do more
封装简化DOM操作(CRUD) / Ajax
2、为什么使用？
- 强大选择器: 方便快速查找DOM元素
- 隐式遍历(迭代): 一次操作多个元素
- 读写合一: 读数据/写数据用的是一个函数
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
3、如何使用
- 引入jQuery库
- 本地引入与CDN远程引入
- 测试版与生产版(压缩版)
- 使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象: $ xxx(执行$()得到的)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01_初识jQuery</title>
<!--使用原生DOM-->
<script type="text/javascript">
window.onload = function() {
var btn1 = document.getElementById('btn1')
btn1.onclick = function() {
var username = document.getElementById('username').value
alert(username)
}
}
</script>
<!--使用jQuery实现-->
<!--本引入-->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<!--远程引入-->
<!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>-->
<script type="text/javascript">
//绑定文档加载完成的监听
$(function (){
$("#btn2").click(function (){
var username = $("#username").val();
alert(username);
})
})
/*
1. 使用jQuery核心函数: $或者jQuery
2. 使用jQuery核心对象: 执行$()返回的对象
*/
//新的注释
</script>
</head>
<body>
<!--
需求: 点击"确定"按钮, 提示输入的值
-->
用户名: <input type="text" id="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
</html>
二、jQuery的使用
1、jQuery函数 ：$ / jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的两把利器</title>
</head>
<body>
<button>测试</button>
<!--
1. jQuery核心函数
* 简称: jQuery函数($/jQuery)
* jQuery库向外直接暴露的就是$/jQuery
* 引入jQuery库后, 直接使用$即可
* 当函数用: $(xxx)
* 当对象用: $.xxx()
2. jQuery核心对象
* 简称: jQuery对象
* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
* 使用jQuery对象: $obj.xxx()
-->
<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
<script type="text/javascript">
//1. jQuery函数: 直接可用
console.log($, typeof $);
console.log(jQuery === $); // true
//2. jQuery对象: 执行jQuery函数得到它
console.log($() instanceof Object) ;// true
/*
(function (window) {
var jQuery = function () {
return new xxx();
}
window.$ = window.jQuery = jQuery;
})(window)
*/
</script>
</body>
</html>
2、jQuery函数的使用
1、核心函数
- jQuery向外暴露的就是jQuery函数, 可以直接使用
- 当成一般函数使用人: $(param)
- param是function: 相当于window.onload = function(文档加载完成的监听)
- param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
- param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
- param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回
- 当成对象使用: $.xxx
- each(obj/arr, function(key, value){})
- trim(str)
- 当成一般函数使用人: $(param)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_jQuery核心函数</title>
</head>
<body>
<div>
<button id="btn">测试</button>
<br />
<input type="text" name="msg1" /><br />
<input type="text" name="msg2" /><br />
</div>
<!--
1. 作为一般函数调用: $(param)
1). 参数为函数 : 当DOM加载完成后，执行此回调函数
2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
3). 参数为DOM对象: 将dom对象封装成jQuery对象
4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
2. 作为对象使用: $.xxx()
1). $.each() : 隐式遍历数组
2). $.trim() : 去除两端的空格
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
需求2. 遍历输出数组中所有元素值
需求3. 去掉" my atguigu "两端的空格
*/
/*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
//1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
$(function() {
// 绑定文档加载完成的监听
// 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
$('#btn').click(function() {
// 绑定点击事件监听
// this是什么? 发生事件的dom元素(<button>)
// alert(this.innerHTML)
// 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
alert($(this).html())
// 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
$('<input type="text" name="msg3"/><br/>').appendTo('div')
})
})
/*需求2. 遍历输出数组中所有元素值*/
var arr = [2, 4, 7]
// 1). $.each() : 隐式遍历数组
$.each(arr, function(index, item) {
console.log(index, item)
})
// 2). $.trim() : 去除两端的空格
var str = ' my atguigu '
// console.log('---'+str.trim()+'---')
console.log('---' + $.trim(str) + '---')
</script>
</body>
</html>
2、核心对象
- jQuery对象
- 包含所有匹配的n个DOM元素的伪数组对象
- 执行$()返回的就是jQuery对象
- 基本行为:
- length/size(): 得到dom元素的个数
- 、[index]: 得到指定下标对应的dom元素
- each(function(index, domEle){}): 遍历所有dom元素
- index(): 得到当前dom元素在所有兄弟中的下标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_jQuery对象</title>
</head>
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<!--
1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
2. 基本行为
* size()/length: 包含的DOM元素个数
* [index]/get(index): 得到对应位置的DOM元素
* each(): 遍历包含的所有DOM元素
* index(): 得到在所在兄弟元素中的下标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
需求1. 统计一共有多少个按钮
需求2. 取出第2个button的文本
需求3. 输出所有button标签的文本
需求4. 输出'测试三'按钮是所有按钮中的第几个
*/
//需求1. 统计一共有多少个按钮
var $buttons = $('button'); //返回的是jQuery对象
/*size()/length: 包含的DOM元素个数*/
console.log($buttons.size(), $buttons.length);
//需求2. 取出第2个button的文本
/*[index]/get(index): 返回的是对应位置的DOM元素*/
console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML);
//需求3. 输出所有button标签的文本
/*each(): 遍历包含的所有DOM元素*/
/*$buttons.each(function (index, domEle) {
console.log(index, domEle.innerHTML, this)
})*/
$buttons.each(function() {
console.log(this.innerHTML);
})
//需求4. 输出'测试三'按钮是所有按钮中的第几个
/*index(): 得到在所在兄弟元素中的下标*/
console.log($('#btn3').index()); //2
/*
1. 伪数组
* Object对象
* length属性
* 数值下标属性
* 没有数组特别的方法: forEach(), push(), pop(), splice()
*/
console.log($buttons instanceof Array); // false
// 自定义一个伪数组
var weiArr = {
};
weiArr.length = 0;
weiArr[0] = 'atguigu'；
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
var obj = weiArr[i];
console.log(i, obj);
}
console.log(weiArr.forEach, $buttons.forEach); //undefined, undefined
</script>
</body>
</html>
3、选择器
- 是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
- 分类
- 基本
- #id
- tagName/*
- .class
- selector1,selector2,selector3: 并集
- selector1selector2selector3: 交集
- 层次
- 找子孙后代, 兄弟元素
- selector1>selector2: 子元素
- selector1 selector2: 后代元素
- 过滤
- 在原有匹配元素中筛选出其中一些
- :first
- :last
- :eq(index)
- :lt
- :gt
- :odd
- :even
- :not(selector)
- :hidden
- :visible
- [attrName]
- [attrName=value]
- 表单
- :input
- :text
- :checkbox
- :radio
- :checked: 选中的
- 基本
4、基本选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>05_基本选择器</title>
</head>
<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB(title="hello")</li>
<li class="box">CCCCC(class="box")</li>
<li title="hello">DDDDDD(title="hello")</li>
</ul>
<!--
1. 是什么?
- 有特定格式的字符串
2. 作用
- 用来查找特定页面元素
3. 基本选择器
- #id : id选择器
- element : 元素选择器
- .class : 属性选择器
- * : 任意标签
- selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
- selector1selector2selectorN : 取多个选择器的交集(相交选择器)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选择id为div1的元素
2. 选择所有的div元素
3. 选择所有class属性为box的元素
4. 选择所有的div和span元素
5. 选择所有class属性为box的div元素
*/
//1. 选择id为div1的元素
// $('#div1').css('background', 'red');
//2. 选择所有的div元素
// $('div').css('background', 'red');
/* $("div").css({background:"red"}); */
//3. 选择所有class属性为box的元素
//$('.box').css('background', 'red');
//4. 选择所有的div和span元素
// $('div,span').css('background', 'red');
//5. 选择所有class属性为box的div元素
//$('div.box').css('background', 'red');
//$('*').css('background', 'red');
</script>
</body>
</html>
5、层次选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>06_层次选择器</title>
</head>
<body>
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span class="box">DDDD</span></li>
<span>EEEEE</span>
</ul>
<!--
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
1. ancestor descendant
在给定的祖先元素下匹配所有的后代元素
2. parent>child
在给定的父元素下匹配所有的子元素
3. prev+next
匹配所有紧接在 prev 元素后的 next 元素
4. prev~siblings
匹配 prev 元素之后的所有 siblings 元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选中ul下所有的的span
2. 选中ul下所有的子元素span
3. 选中class为box的下一个li
4. 选中ul下的class为box的元素后面的所有兄弟元素
*/
//1. 选中ul下所有的的span
// $('ul span').css('background', 'yellow')
//2. 选中ul下所有的子元素span
// $('ul>span').css('background', 'yellow')
//3. 选中class为box的下一个li
// $('.box+li').css('background', 'yellow')
//4. 选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('background', 'yellow')
</script>
</body>
</html>
6、过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>07_过滤选择器</title>
</head>
<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br />
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
<!--
在原有选择器匹配的元素中进一步进行过滤的选择器
* 基本
* 内容
* 可见性
* 属性
-->
<script src="js/jquery-1.12.3.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选择第一个div
2. 选择最后一个class为box的元素
3. 选择所有class属性不为box的div
4. 选择第二个和第三个li元素
5. 选择内容为BBBBB的li
6. 选择隐藏的li
7. 选择有title属性的li元素
8. 选择所有属性title为hello的li元素
*/
//1. 选择第一个div
// $('div:first').css('background', 'red')
//2. 选择最后一个class为box的元素
//$('.box:last').css('background', 'red')
//3. 选择所有class属性不为box的div
// $('div:not(.box)').css('background', 'red') //没有class属性也可以
//4. 选择第二个和第三个li元素
// $('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次
//$('li:lt(3):gt(0)').css('background', 'red')
//5. 选择内容为BBBBB的li
// $('li:contains("BBBBB")').css('background', 'red')
//6. 选择隐藏的li
// console.log($('li:hidden').length, $('li:hidden')[0])
//7. 选择有title属性的li元素
// $('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素
$('li[title="hello"]').css('background', 'red')
</script>
</body>
</html>
7、常见效果-表格隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01__表格隔行变色</title>
<style>
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
#data {
width: 600px;
}
#data, td, th {
border-collapse: collapse;
border: 1px solid #aaaaaa;
}
th, td {
height: 28px;
}
#data thead {
background-color: #333399;
color: #ffffff;
}
.odd {
background-color: #ccccff;
}
</style>
</head>
<body>
<table id="data">
<thead>
<tr>
<th>姓名</th>
<th>工资</th>
<th>入职时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>$3500</td>
<td>2010-10-25</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Mary</td>
<td>$3400</td>
<td>2010-12-1</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>King</td>
<td>$5900</td>
<td>2009-08-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Scott</td>
<td>$3800</td>
<td>2012-11-17</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Smith</td>
<td>$3100</td>
<td>2014-01-27</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
<tr>
<td>Allen</td>
<td>$3700</td>
<td>2011-12-05</td>
<td><a href="javascript:void(0)">删除</a></td>
</tr>
</tbody>
</table>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#data>tbody>tr:odd').css('background', '#ccccff')
// $('#data>tbody>tr:odd').addClass('odd')
//$('#data>tbody>tr:odd').attr('class', 'odd')
</script>
</body>
</html>
效果如图：
8、表单选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08_表单选择器</title>
</head>
<body>
<form>
用户名: <input type="text" /><br>
密 码: <input type="password" /><br>
爱 好:
<input type="checkbox" checked="checked" />篮球
<input type="checkbox" />足球
<input type="checkbox" checked="checked" />羽毛球 <br>
性 别:
<input type="radio" name="sex" value='male' />男
<input type="radio" name="sex" value='female' />女<br>
邮 箱: <input type="text" name="email" disabled="disabled" /><br>
所在地:
<select>
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br>
<input type="submit" value="提交" />
</form>
<!--
表单选择器
1). 表单
2). 表单对象属性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 选择不可用的文本输入框
2. 显示选择爱好 的个数
3. 显示选择的城市名称
*/
//1. 选择不可用的文本输入框
// $(':text:disabled').css('background', 'red')
//2. 显示选择爱好 的个数
console.log($(':checkbox:checked').length)
//3. 显示选择的城市名称
$(':submit').click(function() {
var city = $('select>option:selected').html(); // 选择的option的标签体文本
city = $('select').val();// 选择的option的value属性值
alert(city);
})
</script>
</body>
</html>
9、工具方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>09_$工具方法</title>
</head>
<body>
<!--
1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. $.each(): 遍历数组或对象中的数据
var obj = {
name: 'Tom',
setName: function(name) {
this.name = name
}
}
$.each(obj, function(key, value) {
console.log(key, value)
})
//2. $.trim(): 去除字符串两边的空格
//3. $.type(obj): 得到数据的类型
console.log($.type($)) // 'function'
//4. $.isArray(obj): 判断是否是数组
console.log($.isArray($('body')), $.isArray([])) // false true
//5. $.isFunction(obj): 判断是否是函数
console.log($.isFunction($)) // true
//6. $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name":"Tom", "age":12}' // json对象: {}
// json对象===>JS对象
console.log($.parseJSON(json))
json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []
// json数组===>JS数组
console.log($.parseJSON(json))
/*
JSON.parse(jsonString) json字符串--->js对象/数组
JSON.stringify(jsObj/jsArr) js对象/数组--->json字符串
*/
</script>
</body>
</html>
10、常见效果-多Tab点击切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_多Tab点击切换</title>
<style>
* {
margin: 0;
padding: 0;
}
#tab li {
float: left;
list-style: none;
width: 80px;
height: 40px;
line-height: 40px;
cursor: pointer;
text-align: center;
}
#container {
position: relative;
}
#content1, #content2, #content3 {
width: 300px;
height: 100px;
padding: 30px;
position: absolute;
top: 40px;
left: 0;
}
#tab1, #content1 {
background-color: #ffcc00;
}
#tab2, #content2 {
background-color: #ff00cc;
}
#tab3, #content3 {
background-color: #00ccff;
}
</style>
</head>
<body>
<h2>多Tab点击切换</h2>
<ul id="tab">
<li id="tab1" value="1">10元套餐</li>
<li id="tab2" value="2">30元套餐</li>
<li id="tab3" value="3">50元包月</li>
</ul>
<div id="container">
<div id="content1">
10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟
</div>
<div id="content2" style="display: none">
30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
</div>
<div id="content3" style="display: none">
50元包月详情：<br /> 每月无限量随心打
</div>
</div>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript">
var $contents = $('#container>div')
// 给3个li加监听
/*$('#tab>li').click(function () { // 隐式遍历
//alert('----')
// 隐隐藏所有内容div
$contents.css('display', 'none')
// 显示对应的内容div
// 得到当前点击的li在兄弟中下标
var index = $(this).index()
// 找到对应的内容div, 并显示
$contents[index].style.display = 'block'
// $($contents[index]).css('display', 'block')
})*/
var currIndex = 0 //当前显示的内容div的下标
$('#tab>li').click(function() {
// 隐式遍历
//alert('----')
// 隐藏当前已经显示的内容div
$contents[currIndex].style.display = 'none'
// 显示对应的内容div
// 得到当前点击的li在兄弟中下标
var index = $(this).index()
// 找到对应的内容div, 并显示
$contents[index].style.display = 'block'
// 更新下标
currIndex = index
})
</script>
</body>
</html>
11、属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10_属性</title>
</head>
<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br />
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<input type="text" name="username" value="guiguClass" />
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>
<!--
1. 操作任意属性
attr()
removeAttr()
prop()
2. 操作class属性
addClass()
removeClass()
3. 操作HTML代码/文本/值
html()
val()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 读取第一个div的title属性
2. 给所有的div设置name属性(value为atguigu)
3. 移除所有div的title属性
4. 给所有的div设置class='guiguClass'
5. 给所有的div添加class='abc'
6. 移除所有div的guiguClass的class
7. 得到最后一个li的标签体文本
8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
9. 得到输入框中的value值
10. 将输入框的值设置为atguigu
11. 点击'全选'按钮实现全选
12. 点击'全不选'按钮实现全不选
*/
//1. 读取第一个div的title属性
// console.log($('div:first').attr('title')) // one
//2. 给所有的div设置name属性(value为atguigu)
// $('div').attr('name', 'atguigu')
//3. 移除所有div的title属性
// $('div').removeAttr('title')
//4. 给所有的div设置class='guiguClass'
//$('div').attr('class', 'guiguClass')
//5. 给所有的div添加class='abc'
//$('div').addClass('abc')
//6. 移除所有div的guiguClass的class
//$('div').removeClass('guiguClass')
//7. 得到最后一个li的标签体文本
//console.log($('li:last').html())
//8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
//$('li:first').html('<h1>mmmmmmmmm</h1>')
//9. 得到输入框中的value值
//console.log($(':text').val()) // 读取
//10. 将输入框的值设置为atguigu
//$(':text').val('atguigu') // 设置 读写合一
//11. 点击'全选'按钮实现全选
// attr(): 操作属性值为非布尔值的属性
// prop(): 专门操作属性值为布尔值的属性
var $checkboxs = $(':checkbox')
$('button:first').click(function() {
$checkboxs.prop('checked', true)
})
//12. 点击'全不选'按钮实现全不选
$('button:last').click(function() {
$checkboxs.prop('checked', false)
})
</script>
</body>
</html>
12、css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>11_css</title>
</head>
<body>
<p style="color: blue;">月亮的后裔</p>
<p style="color: green;">太阳的后裔</p>
<!--
设置css样式/读取css值
css()
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
1. 得到第一个p标签的颜色
2. 设置所有p标签的文本颜色为red
3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
*/
//1. 得到第一个p标签的颜色
//console.log($('p:first').css('color'))
//2. 设置所有p标签的文本颜色为red
//$('p').css('color', 'red')
//3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
$('p:eq(1)').css({
color: '#ff0011',
background: 'blue',
width: 300,
height: 30
})
</script>
</body>
</html>
13、位置offset和position
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12_offset和position</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="div1">
<div class="div2">测试offset</div>
</div>
<div class='div3'>
<button id="btn1">读取offset和position</button>
<button id="btn2">设置offset</button>
</div>
<!--
获取/设置标签的位置数据
* offset(): 相对页面左上角的坐标
* position(): 相对于父元素左上角的坐标
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 点击 btn1
打印 div1 相对于页面左上角的位置
打印 div2 相对于页面左上角的位置
打印 div1 相对于父元素左上角的位置
打印 div2 相对于父元素左上角的位置
2. 点击 btn2
设置 div2 相对于页面的左上角的位置
*/
$('#btn1').click(function() {
// 打印 div1 相对于页面左上角的位置
var offset = $('.div1').offset()
console.log(offset.left, offset.top) // 10 20
// 打印 div2 相对于页面左上角的位置
offset = $('.div2').offset()
console.log(offset.left, offset.top) // 10 70
// 打印 div1 相对于父元素左上角的位置
var position = $('.div1').position()
console.log(position.left, position.top) // 10 20
// 打印 div2 相对于父元素左上角的位置
position = $('.div2').position()
console.log(position.left, position.top) // 0 50
})
$('#btn2').click(function() {
$('.div2').offset({
left: 50,
top: 100
})
})
</script>
</body>
</html>
14、scroll
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>13_元素滚动</title>
</head>
<body style="height: 2000px;">
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. This is some text.
his is some text.
</div>
<br>
<br>
<br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">设置scrollTop</button>
<!--
1. scrollTop():
读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
滚动到指定位置(兼容chrome和IE)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
/*
需求:
1. 得到div或页面滚动条的坐标
2. 让div或页面的滚动条滚动到指定位置
*/
//1. 得到div或页面滚动条的坐标
$('#btn1').click(function() {
console.log($('div').scrollTop())
// console.log($('html').scrollTop()+$('body').scrollTop())
console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容IE/Chrome
})
//2. 让div或页面的滚动条滚动到指定位置
$('#btn2').click(function() {
$('div').scrollTop(200)
$('html,body').scrollTop(300)
})
</script>
</body>
</html>
15、常见效果-回到顶部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_回到顶部</title>
<style>
#to_top {
width: 30px;
height: 40px;
font: 14px/20px arial;
text-align: center;
background: #06c;
position: fixed;
cursor: pointer;
color: #fff;
left: 1050px;
top: 500px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="to_top">返回顶部</div>
<script type="text/javascript" src="../js/jquery-1.10.1.js"></script>
<script type="text/javascript">
$('#to_top').click(function() {
// 瞬间滚到顶部
//$('html,body').scrollTop(0)
// 平滑滚到顶部
// 总距离
var $page = $('html,body')
var distance = $('html').scrollTop() + $('body').scrollTop()
// 总时间
var time = 500
// 间隔时间
var intervalTime = 50
var itemDistance = distance / (time / intervalTime)
// 使用循环定时器不断滚动
clearInterval(intervalId);
var intervalId = setInterval(function() {
distance -= itemDistance
// 到达顶部, 停止定时器
if (distance <= 0) {
distance = 0 //修正
clearInterval(intervalId)
}
$page.scrollTop(distance)
}, intervalTime)
})
</script>
</body>
</html>
16、元素的尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>14_元素的尺寸</title>
</head>
<style>
div {
width: 100px;
height: 150px;
background: red;
padding: 10px;
border: 10px #fbd850 solid;
margin: 10px;
}
</style>
</head>
<body>
<div>div</div>
<!--
1. 内容尺寸
height(): height
width(): width
2. 内部尺寸
innerHeight(): height+padding
innerWidth(): width+padding
3. 外部尺寸
outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script>
var $div = $('div')
// 1. 内容尺寸
console.log($div.width(), $div.height()) // 100 150
// 2. 内部尺寸
console.log($div.innerWidth(), $div.innerHeight()) //120 170
// 3. 外部尺寸
console.log($div.outerWidth(), $div.outerHeight()) //140 190
console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210
</script>
</body>
</html>
17、对象的筛选-过滤
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>15_筛选_过滤</title>
</head>
<body>
<ul>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li>
<br>
<!--
在jQuery对象中的元素对象数组中过滤出一部分元素来
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. ul下li标签第一个
2. ul下li标签的最后一个
3. ul下li标签的第二个
4. ul下li标签中title属性为hello的
5. ul下li标签中title属性不为hello的
6. ul下li标签中有span子标签的
*/
var $lis = $('ul>li')
//1. ul下li标签第一个
// $lis.first().css('background', 'red')
// $lis[0].style.background = 'red'
//2. ul下li标签的最后一个
// $lis.last().css('background', 'red')
//3. ul下li标签的第二个
// $lis.eq(1).css('background', 'red')
//4. ul下li标签中title属性为hello的
// $lis.filter('[title=hello]').css('background', 'red')
//5. ul下li标签中title属性不为hello的
// $lis.not('[title=hello]').css('background', 'red')
// $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')
//6. ul下li标签中有span子标签的
$lis.has('span').css('background', 'red')
</script>
</body>
</html>
18、筛选-对象的查找
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>16_筛选_查找孩子-父母-兄弟标签</title>
</head>
<body>
<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br />
<div>
<ul>
<span>span文本1</span>
<li>AAAAA</li>
<li title="hello" class="box2">BBBBB</li>
<li class="box" id='cc'>CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two"><span>span文本2</span></li>
<span>span文本3</span>
</ul>
<span>span文本444</span><br>
<li>eeeee</li>
<li>EEEEE</li>
<br>
</div>
<!--
在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. ul标签的第2个span子标签
2. ul标签的第2个span后代标签
3. ul标签的父标签
4. id为cc的li标签的前面的所有li标签
5. id为cc的li标签的所有兄弟li标签
*/
var $ul = $('ul')
//1. ul标签的第2个span子标签
//$ul.children('span:eq(1)').css('background', 'red')
//2. ul标签的第2个span后代标签
// $ul.find('span:eq(1)').css('background', 'red')
//3. ul标签的父标签
// $ul.parent().css('background', 'red')
//4. id为cc的li标签的前面的所有li标签
var $li = $('#cc')
// $li.prevAll('li').css('background', 'red')
//5. id为cc的li标签的所有兄弟li标签
$li.siblings('li').css('background', 'red')
</script>
</body>
</html>
19、一个小案例-选择复选框
1、jQuery方式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
</head>
<body>
<form>
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" 
最低0.47元/天 解锁文章
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
