python_way day16 JQuery
封装dom js代码
jQuery(1.10,1.12-兼容性好，2.0。以后放弃了ie9以下)
- 封装了Dom & JavaScript
查找：
1.选择器：直接找到弄一个或者某些标签
2.筛选器：找到标签进行筛选
操作：
css
属性
文本操作
定义事件：
找到标签，绑定事件。
一、查找
1，筛选器
#id 地选择器
标签选择器
class选择器
* 所有
组合选择器：#i1,#i2,#i3
层级选择器：#i1 .c1 到i1标签的子子孙孙里找
parent >child：到孩子的层级找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="item">
<a>百度</a>
</div>
<div class="item">
<div id="i1"></div>
</div>
<div class="item"></div>
</div>
<script src="js/jquery-3.1.0.js"></script>
</body>
</html>
$(".item") //class选择器
[<div class="item">…</div>, <div class="item"></div>, <div class="item"></div>]
$(".item a") //层级选择器
[<a>百度</a>]
$(".item a").addClass('hide')
[<a class="hide">百度</a>]
$(".item a").removeClass('hide')
[<a class>百度</a>]
$("div") //标签选择器
[<div>…</div>, <div class="item">…</div>, <div class="item"></div>, <div class="item"></div>]
$("#i1") //id选择器
[<div id="i1"></div>]
$("a,#i1") //组合选择器
[<a>百度</a>, <div id="i1"></div>]
$(".item:first") //找众多的item中的第一个标签
[<div class="item">…</div>]
:not(selector)不是的
:even 奇数
:odd 偶数
:eq(index)索引位置
:gt(index)大于
:it(index)小于
属性，子元素，表单，
<div class="item">
<input type="text" disabled> //这个text的input变成disabled不可写的
</div>
表单选择器：
$(":text")[0]
<input type="text" disabled>
inp = $(":text")[0]
$("div")
[<div>…</div>, <div class="item">…</div>, <div class="item">…</div>, <div id="i1"></div>, <div class="item">…</div>]
$("div:eq(1)") //索引
[<div class="item">…</div>]
二、筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="item">
<a>百度</a>
</div>
<div class="item">
<div id="i1"></div>
</div>
<div class="item">
<span class="item"></span>
<input type="text" disabled>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
</body>
</html>
过滤
$('div').eq(1)
[<div class="item">…</div>]
$('div').first()
[<div>…</div>]
$('div').last()
[<div class="item">…</div>]
$(".item").is("div") //做判断使用
true
查找
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<dl>
<dt>term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd>
<dd>definition 1-d</dd>
<dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<div>asdf</div>
<dd>definition 2-b</dd>
<dd>definition 2-c</dd>
<dt>term 3</dt>
<dd>definition 3-a</dd>
<dd>definition 3-b</dd>
</dl>
<script src="js/jquery-3.1.0.js"></script>
</body>
</html>
nextUntil([e|e][,f]) 直到找到谁停止
$('#term-2').nextUntil('div') //找到id=term-2的标签的儿子所有标签，筛选查找，直到找到div标签停止 [<dd>definition 2-a</dd>]
实例1，隐藏侧边菜单栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.hide{
display: none;
}
.menu{
height: 600px;
200px;
border: 1px solid rebeccapurple;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: blue;
color: white;
padding: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<div class="item" >
<div class="title" onclick="ShowItem(this)">菜单一</div> <!--把自己传给函数-->
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item" >
<div class="title" onclick="ShowItem(this)">菜单二</div>
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item" >
<div class="title" onclick="ShowItem(this)">菜单三</div>
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script>
function ShowItem(self) {
var ck = $(self).next(); //找自己的里面的所有标签
ck.removeClass("hide"); //找到后移除隐藏
var br = $(self).parent().siblings(); //然后在找自己的父亲的兄弟
var ot_body = br.find(".body"); //从这些兄弟里面找class为body的子标签
// console.log(ot_body) [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
for(i=0;i<ot_body.length;i++){ //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
ot_div = ot_body[i];
var class_name = ot_div.className; //找出这个标签的class名字
if (class_name.indexOf("h") !== -1){ //判断这个class中有没有h这个字符串，没有就是没有hide这个css
ot_body.addClass("hide") //把hide加上
}
}
}
</script>
</body>
</html>
三、属性操作
属性：
attr(name|pro|key,val|fn) //给一个标签设置一个属性
removeAttr(name） //移除一个属性
prop(n|p|k,v|f) //处理选中和取消
实例二：jQuery版本的反选取消
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选，反选，取消</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>用户名</th>
<th>密码</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3</td>
<td>33</td>
</tr>
</tbody>
</table>
<hr/>
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="反选" onclick="turnchose()">
<input type="button" value="取消" onclick="CancleALL()">
<script src="js/jquery-3.1.0.js"></script>
<script>
function CheckAll() {
$('#tb :checkbox').prop("checked",true);
}
function CancleALL() {
$('#tb :checkbox').prop("checked",false);
}
function turnchose() {
$('#tb :checkbox').each(function(i) { //加上i就是把当前索引个数拿到
//this 当前循环的每一个标签元素
//$(this) 当前jQ标签
// console.log(i); 打印可以查看到当前的索引
if($(this).prop("checked")){ //prop只有一个参数就是查看这个标签有的checked是否为真
$(this).prop("checked",false) //真就改成false
}else{
$(this).prop("checked",true) //false就改成true
}
});
}
</script>
</body>
</html>
Class
addClass(class|fn) //加上一个样式 removeClass([class|fn]) //删除一个样式 toggleClass(class|fn[,sw]) //样式开关，点一下加上，再点一下移除
HTML代码/文本/值
html([val|fn]) text([val|fn]) val([val|fn|arr])
$('#i1').html() //获取html内容
$('#i1').html("<span>123</span>") //设置html内容
$('#i1').text() //获取text文本
$('#i1').text("123") //设置text内容
val也是一样的
四、CSS
css
css(name|pro|[,val|fn])1.9* jQuery.cssHooks
例子：
tag.style.fontSize = 18px; //dom中设置字体的大小
$("#i1").css('fontSize',"18px") //jQ中设置字体大小(一个参数就是获取)
位置：
offset([coordinates]) position() scrollTop([val]) scrollLeft([val])
offset：是当前标签距离阅览器的初始顶部的高度，无论你如何滚动滑轮，这个大小都是不变的。
position：离其父标签的距离（不是相对position的位置，就是他上一层父亲的位置）
scrollTop：
tag.scrollTop=0 //dom中设置字体的大小 $(#i1).scrollTop(0) //jQ中设置字体的大小（没有参数为获取，有参数就是设置）
尺寸：
height([val|fn]) //自己的高度 width([val|fn]) //自己的宽度 innerHeight() //内边框 innerWidth() outerHeight([soptions]) //外边框 默认包括补白和边框 outerWidth([options])
五、文档处理
内部插入 append(content|fn) //div.append(a) 往div中加一个a标签 appendTo(content) //a.appendTo(div) 把a加到div里面 prepend(content|fn) prependTo(content) 外部插入 after(content|fn) before(content|fn) insertAfter(content) #和after一样但是是颠倒回来和上面的appendTo一样 insertBefore(content)
删除
empty() //dev.empty("a")，把div内部的a标签清空
remove([expr]) //把标签整体删除
detach([exr])
复制
clone([Even[,deepEven]])
实例三：增加输入框和删除输入框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签克隆</title>
</head>
<body>
<div>
<p>
<a onclick="Add(this)"> + </a>
<input type="text"/>
</p>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script>
function Add(ths) {
var p =$(ths).parent().clone();
p.find("a").text("-"); //把a标签的文本变为-号
p.find("a").attr("onclick","Del(this)"); //因为新生成的点上-号就要删除他，所以要把新生成的onclick属性赋值成Del新的函数
var par = $(ths).parent().parent(); //找到这个a标签的父亲的父亲就是div标签，因为我们新加的p要保证在最下面，不能在两个p标签中间插入
par.append(p)//将p标签追加到最下面
}
function Del(ths) { //这就是删除p标签的函数
$(ths).parent().remove() //找到a标签的父亲（p标签），然后删除
}
</script>
</body>
</html>
六：事件
1、如何使用jQ绑定事件
2、当文档加载完毕后自动执行
3、延迟绑定
- 如何使用jQ绑定事件
方式一：$(js).click(function(){...}) $(把谁).使用什么事件绑定（出发事件使用什么方法）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单</title>
<style>
.hide{
display: none;
}
.menu{
height: 600px;
200px;
border: 1px solid rebeccapurple;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: blue;
color: white;
padding: 0 auto;
}
</style>
</head>
<body>
<div class="menu">
<div class="item" >
<div class="title">菜单一</div> <!--把自己传给函数-->
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item" >
<div class="title">菜单二</div>
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item" >
<div class="title">菜单三</div>
<div class="body hide">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
</div>
<script src="js/jquery-3.1.0.js"></script>
<script>
$(".item .title").click(function () { //找到item下的title，将这些title使用关键字click（dom中的onclick是一样的）来绑定，中间是一个自执行函数
var ck = $(this).next(); //找自己的里面的所有标签 （this就是代指的当前绑定事件的title）
ck.removeClass("hide"); //找到后移除隐藏
var br = $(this).parent().siblings(); //然后在找自己的父亲的兄弟
var ot_body = br.find(".body"); //从这些兄弟里面找class为body的子标签
// console.log(ot_body) [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
for(i=0;i<ot_body.length;i++){ //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
ot_div = ot_body[i];
var class_name = ot_div.className; //找出这个标签的class名字
if (class_name.indexOf("h") !== -1){ //判断这个class中有没有h这个字符串，没有就是没有hide这个css
ot_body.addClass("hide"); //把hide加上
}
}
})
</script>
</body>
</html>
方式二：$(js).bind('click',function(){...}) $(把谁).绑定(使用什么事件绑定,触发事件使用什么方法)
$(".item .title").bind('click',function () { //找到item下的title，将这些title使用关键字click（dom中的onclick是一样的）来绑定，中间是一个自执行函数
var ck = $(this).next(); //找自己的里面的所有标签 （this就是代指的当前绑定事件的title）
ck.removeClass("hide"); //找到后移除隐藏
var br = $(this).parent().siblings(); //然后在找自己的父亲的兄弟
var ot_body = br.find(".body"); //从这些兄弟里面找class为body的子标签
// console.log(ot_body) [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
for(i=0;i<ot_body.length;i++){ //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
ot_div = ot_body[i];
var class_name = ot_div.className; //找出这个标签的class名字
if (class_name.indexOf("h") !== -1){ //判断这个class中有没有h这个字符串，没有就是没有hide这个css
ot_body.addClass("hide"); //把hide加上
}
}
})
- 当文档加载完毕后自动执行
我们的html整个页面执行顺序是自上而下的，如果我们有很多很大的图片需要加载，这个页面就会加载的很慢，所以可以不需要这些大文件加载完，就能执行页面的一个功能
<script src="js/jquery-3.1.0.js"></script>
<script>
$(function () {
//当文档树加载完毕后，自动执行。比如内容没有，但是位置匡已经有了
$(".item .title").click(function () {
var ck = $(this).next(); //找自己的里面的所有标签 this就是代指的当前绑定事件的title
ck.removeClass("hide"); //找到后移除隐藏
var br = $(this).parent().siblings(); //然后在找自己的父亲的兄弟
var ot_body = br.find(".body"); //从这些兄弟里面找class为body的子标签
// console.log(ot_body) [div.body.hide, div.body.hide, prevObject: jQuery.fn.init[2]]
for(i=0;i<ot_body.length;i++){ //上面找到的不只是div，还有一个对象，所以不找这个对象急用<号
ot_div = ot_body[i];
var class_name = ot_div.className; //找出这个标签的class名字
if (class_name.indexOf("h") !== -1){ //判断这个class中有没有h这个字符串，没有就是没有hide这个css
ot_body.addClass("hide"); //把hide加上
}
}
})
})
</script>
- 延迟绑定
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟绑定</title>
</head>
<body>
<input type="button" style=" 100px;height: 20px" value="增加" onclick="Add()">
<ul>
<li>123</li>
<li>234</li>
<li>456</li>
<li>678</li>
</ul>
<script src="js/jquery-3.1.0.js"></script>
<script>
$(function () {
//这里面的事件会在加载完页面后自定绑定上面已经存在的li
$('ul li').click(function () {
alert($(this).text())
})
});
function Add() {
//这里的add是在页面加载完，并且上面的绑定完成以后，我们点击按钮后才可增加到后面，所以虽然li增加了但是时间没有绑定
var tag = document.createElement('li');
tag.innerText='666';
$("ul").append(tag);
}
</script>
</body>
</html>
如何解决？如何让我们新添加的也可以绑定上事件！
这时就要使用delegate了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延迟绑定</title>
</head>
<body>
<input type="button" style=" 100px;height: 20px" value="增加" onclick="Add()">
<ul>
<li>123</li>
<li>234</li>
<li>456</li>
<li>678</li>
</ul>
<script src="js/jquery-3.1.0.js"></script>
<script>
$(function () {
//这里面的事件会在加载完页面后自定绑定上面已经存在的li
// $('ul li').click(function () {
// alert($(this).text())
// })
//整个下面的delegate不会在页面加载完以后就执行，他的功能是在触发这个li的事件才会绑定click这个时间，所以这样写的话，下面的Add也就可以被这个事件所包含了
$("ul").delegate("li","click",function(){ //去ul中找到li然后执行click事件
alert($(this).text()) //实践中要做的事情
});
});
function Add() {
//这里的add是在页面加载完，并且上面的绑定完成以后，我们点击按钮后才可增加到后面，所以虽然li增加了但是时间没有绑定
var tag = document.createElement('li');
tag.innerText='666';
$("ul").append(tag);
}
</script>
</body>
</html>
dom，jQuery对象互换
$(dom) 转换为jQuery对象
$(dom)[0] 转为dom对象