python_way day16 JQuary
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>
JavaScript 代码：
$(".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>
JavaScript 代码
过滤
$('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>
JavaScript 代码
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;
width: 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;
width: 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="width: 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="width: 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对象
python_way day16 JQuary的更多相关文章
- python_way day16 DOM
Python_way day16 1.Dom (找到html中的标签) 一.DOM 1.查找元素 直接查找 document.getElementById 根据ID获取一个标签 --->这里是 ...
- python_way ,自定义session
python_way ,自定义session container = {} #可以是数据库,可以是缓存也可以是文件 class Session: def __init__(self, handler) ...
- python_way ,day23 API
python_way ,day23 1.api认证 .api加密动态请求 2.自定义session 一.api认证 首先提供api的公司,如支付宝,微信,都会给你一个用户id,然后还会让你下一个SD ...
- python_way ,day22 tonardo
python_way day22 1.tonardo 2.cookie 3.api认证 一.tonardo: a.tonardo 初识 #!/usr/bin/env python3# Created ...
- python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，
python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...
- python_way day18 html-day4， Django路由，（正则匹配页码，包含自开发分页功能）， 模板， Model(jDango-ORM) : SQLite，数据库时间字段插入的方法
python_way day18 html-day4 1.Django-路由系统 - 自开发分页功能 2.模板语言:之母板的使用 3.SQLite:model(jDango-ORM) 数据库时间字 ...
- python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架
python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- python_way day15 HTML-DAY2 HTML-DAY2、JS
python_way day15 HTML-DAY2 html-css回顾 javascript 一.html-css回顾 1.input与+,-号的写法 <!DOCTYPE html> ...
随机推荐
- DButil
纲要: Properties prop = new Properties(); BasicDataSource ds = new BasicDataSorce(); Connection conn = ...
- Google Map: JavaScript API RefererNotAllowedMapError
visite https://console.developers.google.com/apis/credentials and select the project you use. http:/ ...
- Java中的BufferedReader 的readLine方法
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.FileReader; import java ...
- Java局部变量final
局部变量和形参带final. 在一个线程A中开起另一个线程B,如果线程B要使用线程A的局部变量,那么A的局部变量需要定义成final.理由:局部变量是线程内部共享的,每一个线程内的不能访问其他线程的局 ...
- 测试过程中LR的关联报错
在测试过程中,录制的脚本会做一些关联.在测试的过程中,常常出现关联失败的情况. 如果最后的结果有检查点,检查点失败而事务失败. 每次出现这样的情况,我都不知道如何办.为了不出现错误,我都在关联函数里面 ...
- Install MongoDB on Red Hat Enterprise, CentOS, Fedora, or Amazon Linux
Install MongoDB on Red Hat Enterprise, CentOS, Fedora, or Amazon Linux¶ Overview Use this tutorial t ...
- 【Pro ASP.NET MVC 3 Framework】.学习笔记.5.SportsStore一个真实的程序
我们要建造的程序不是一个浅显的例子.我们要创建一个坚固的,现实的程序,坚持使它成为最佳实践.与Web Form中拖控件不同.一开始投入MVC程序付出利息,它给我们可维护的,可扩展的,有单元测试卓越支持 ...
- Zero_qiqi DIV模式的省市区三级联动
1].[代码] [HTML]代码 跳至 [1] [2] [3] [4] [5] [6] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- iOS 第一次安装应用，拒绝相机调用，页面卡死的解决方案
void (^allowBlock)() = ^{ UIImagePickerController *imagePicker = [[UIImagePickerController alloc] in ...
- Cocos2dx框架常用单词（一）
收集了一些Cocos2dx里面主要单词的翻译. Toggle:切换Finite:有限Instant:瞬时interval:间隔Flip:翻转place:座位,放置Target:目标reverse:反向 ...