python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）
11.5 jQuery
引入方式：
方式一：本地引入
<script src="jquery-3.3.1.min.js"></script>
<script> //注意，一定在引入jQuery之后，再使用jQuery提供的各种操作
code...
</script>
方式二：直接使用CDN
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
code...
</script>
文档就绪事件：
DOM文档加载的步骤
1. 解析HTML结构。
2. 加载外部脚本和样式表文件。
3. 解析并执行脚本代码。
4. DOM树构建完成。
5. 加载图片等外部文件。
6. 页面加载完毕
11.51 选择器
id选择器：
$("#i1")
标签选择器：
$("p")
class选择器：
$(".c1")
所有元素选择器：
$("*")
交集选择器：
$("div.c1") // 找到类为c1的div标签
并集选择器：
$("#i1,.c1,p") // 找到所有id="i1"的标签和class="c1"的标签和p标签
层级选择器：
$("x y"); // x的所有后代y（子子孙孙）
$("x>y"); // x的所有儿子y（儿子）
$("x+y") // 找到所有紧挨在x后面的兄弟y
$("x~y") // x之后所有的兄弟y
属性选择器：
$("input[type='checkbox']"); // 取到checkbox类型的input标签
$("input[type!='text']"); // 取到类型不是text的input标签
基本筛选器：
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(选择器) // 过滤掉所有满足not条件的标签
:has(选择器) // 过滤出所有后代中满足has条件的父标签
//例如
$("div:has(h1)") // 找到所有后代中有h1标签的div标签
$("div:has(.c1)") // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)") // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))") // 找到所有后代中不含a标签的li标签
11.52 表单常用筛选器
表单常用筛选：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：
$(":checkbox") // 找到所有的checkbox
表单对象状态属性筛选:
:enabled
:disabled
:checked
:selected
注意：$(":checked")选择时连select中的带有selected属性的option标签也会选上，所以要用$("input:checked")
11.53 筛选器
下一个兄弟元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") //从id="id"的标签开始往下选择兄弟标签直到id=i2的标签(不包含id=i2的标签)
上一个兄弟元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2") //从id="id"的标签开始往上选择兄弟标签直到id=i2的标签(不包含id=i2的标签)
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil("某个父元素") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children(); // 所有子标签
$("#id").siblings(); // 兄弟标签、
查找
$("div").find("p") <==> $("div p")
//搜索所有与指定表达式匹配的元素,这个函数是找出正在处理的元素的后代元素的好方法。
筛选
$("div").filter(".c1") <==> $("div.c1") // 从结果集中过滤出有c1样式类的
//筛选出与指定表达式匹配的元素集合,这个方法用于缩小匹配的范围,用逗号分隔多个表达式。
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的父元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
11.54 标签操作之样式操作
11.541 通过类属性操作样式
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
11.542 直接操作CSS样式
css("color","red") //DOM操作：Elem.style.color="red"
$("p").css("color", "red"); //将所有p标签的字体设置为红色
$("#p1").css({"border":"1px solid black","color":"red"});//同时设置多个css样式
11.543 jQuery版模态框
<head>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.4);
z-index: 999;
}
.modal {
background-color: white;
height: 300px;
width: 500px;
position: absolute;
top: 50%;
left: 50%;
z-index:1000;
margin-top: -150px;
margin-left: -250px;
}
.hide {
display: none; //不占空间，也不显示
}
</style>
</head>
<body>
<div>
<h1>海燕</h1>
<p>在苍茫的大海上，狂风卷积着乌云，在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</p>
</div>
<button id="b1">点我登录</button>
<div class="cover hide"></div>
<div class="modal hide">
<form action="">
<p>
<label>用户名
<input type="text">
</label>
</p>
<p>
<label>密码
<input type="password">
</label>
</p>
<p>
<input type="submit">
<input type="button" id="cancel" value="取消">
</p>
</form>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// var b1Ele=document.getElementById("b1"); //原生DOM对象
// var b1Ele = $("#b1")[0]; //通过jQuery对象找到DOM对象,找到按钮，给它绑定事件，
// b1Ele.onclick = function () { //使用的是js对象
// $(".cover,.modal").removeClass("hide"); // 事件触发后，找到那两个div,移除它们的hide样式类
// };
var b1Ele = $("#b1");
b1Ele.click(function () {
$(".cover,.modal").removeClass("hide");
});
// var cancelButton = $("#cancel")[0]; //使用的是DOM对象
// cancelButton.onclick = ()=>{
// $(".cover,.modal").addClass("hide"); // 事件触发后，找到那两个div,给它们添加hide样式类
// };
var cancelButton = $("#cancel");
cancelButton.click(function () {
$(".cover,.modal").addClass("hide");
});
</script>
</body>
11.544 位置
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置，可设置
$(".c3").offset({top:284,left:400})
position() // 获取匹配元素相对父元素的偏移,不可设置
$(window).scrollTop() // 获取匹配元素相对滚动条顶部的偏移，可设置
$(window).scrollTop(0) //获取当前窗口相对滚动条顶部的偏移，并且可设置
$(window).scrollLeft() // 获取匹配元素相对滚动条左侧的偏移，可设置
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。.position()的差别在于： .position()是相对于父级元素的位移。
11.545 尺寸
height() //获取当前标签内容高度，并且可设置高度
width() //获取当前标签内容宽度，并且可设置宽度
innerHeight() //内容+padding
innerWidth() //内容+padding
outerHeight() //内容+padding+border
outerWidth() //内容+padding+border
11.55 标签操作之文本内容操作
text() //只查看所有标签内的文本
text(val) //先清空节点内容，再添加文本字符串:('<h1>我是h1</h1>')
注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
html() //查看所有子标签，包括文本和子标签
html(val) //先清空节点内容，可识别文本内的html标签('<h1>我是h1</h1>')
$('ul').html('<a href="#">百度一下</a>')
$('ul').html(function(){ //可以使用函数来设置所有匹配元素的内容
return '哈哈哈'
})
val
// 用途：val()用于操作input、select、textarea的value值
// 示范一：
<input type="text" name="username" >
$('input[type=text]').val() //查看输入框内的值或添加值
<input type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
<input type="radio" name="sex" value="none">
$('input[type=radio]').val(['male',]) //查看所选选项或选择选项，选择选项时使用列表
// 示范二：
<input type="checkbox" name="hobbies" value="basketball">
<input type="checkbox" name="hobbies" value="football">
<input type="checkbox" name="hobbies" value="doublecolorball">
$('input[type=checkbox]').val(['basketball','football']) //查看所选选项或选择选项(选择选项时使用列表)
11.551 登录注册示例
<style>
.error {color: red;}
</style>
<body>
<form action="" method="">
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="username">
<span class="error"></span>
</p>
<p>
<label for="pwd">密码</label>
<input type="password" id="pwd" name="pwd">
<span class="error"></span>
</p>
<p>
<input type="submit" id="b1" value="登录">
</p>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function () {
var flag = true;
$(".error").text("");
var $username = $("#username");
var $pwd = $("#pwd"); if ($username.val().length === 0){ // 取input框的值(用户名)判断长度是否为0
$username.next().text("用户名不能为空！"); //找到class="error"的span标签添加提示信息
flag = false; //用户名或密码为空时不提交表单
}
if ($pwd.val().length === 0){ //取input框的值(密码)判断长度是否为0
$pwd.next().text("密码不能为空！"); //找到class="error"的span标签添加提示信息
flag = false;
}
return flag; // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件
})
</script>
</body>
11.56 标签操作之属性操作
用于id、class、name、value等或自定义属性：
<images src="1.jpg" alt="图片不见了" title="这绝对正常的图片">
attr(属性名) // 返回第一个匹配元素的属性值
$('.box2 img').attr('title','美女') // 为所有匹配元素设置一个属性值
$('.box2 img').attr({'title': '美女', 'alt':'图片被狗吃了'}) // 为所有匹配元素设置多个属性值
$('.box2 img').removeAttr('title') // 从每一个匹配的元素中删除一个属性
用于checkbox和radio：
<input type="radio" name="sex" value="male">
$(':radio[value=male]').prop('checked',true);// 设置属性
<input type="checkbox" name="hobbies" value="basketball">
$("input :checkbox").prop('value') // 获取value属性的值
$("input :checkbox").prop('checked',true); // 设置属性
$(':checkbox[value=football]').prop('checked',true);
$("table :checkbox").removeProp('value') // 移除value属性
注意：在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")
总结：1. 对于标签上有的能看到的属性和自定义属性都用attr 2. 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
11.561 全选反选取消
<body>
<button id="b1">全选</button>
<button id="b2">取消</button>
<button id="b3">反选</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Egon</td>
<td>喊麦</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Alex</td>
<td>吹牛逼</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Yuan</td>
<td>不洗头</td>
</tr>
</tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 全选
$("#b1").click(function () {
$("table :checkbox").prop("checked", true)// 让所有的checkbox选中
});
// 取消
$("#b2").click(function () {
$("table :checkbox").prop("checked", false)// 让所有的checkbox取消选中
});
// 反选
$("#b3").click(function () {
//$("table input:not(:checked)").prop("checked", true); // 找到没有选中的让它们选中
//$("table input:checked").prop("checked", false); // 找到所有选中的让它们取消选中
// 方法1：循环判断
var $checkboxs = $("table input:checkbox");
for (let i=0;i<$checkboxs.length;i++){
var $currentCheckbox = $($checkboxs[i]);
if ($currentCheckbox.prop("checked")){ // 如果之前是选中的，则取消选择
$currentCheckbox.prop("checked", false);
}else {
$currentCheckbox.prop("checked", true);// 如果之前没有选中，则选择
}
} //方法2：直接取当前标签的checked属性的相反值
for (let i=0;i<$checkboxs.length;i++){
var $currentCheckbox = $($checkboxs[i]);
var flag = $currentCheckbox.prop("checked");
$currentCheckbox.prop("checked", !flag)
} //方法3：
$('td input').each(function () {
$(this).prop('checked', !$(this).prop('checked'));
}
});
</script>
</body>
11.57 标签操作之文档处理
//内部
$(A).appendTo(B) // 把A追加到B内部的最后面
$(A).prependTo(B) // 把A前置到B内部的最前面
//内部
$(A).append(B) // 把B追加到A内部的最后
$(A).prepend(B) // 把B前置到A内部的最前面
//外部
$(A).insertAfter(B) // 把A放到B外部的后面
$(A).insertBefore(B) // 把A放到B外部的前面
//外部
$(A).after(B) // 把B放到A外部的后面
$(A).before(B) // 把B放到A外部的前面
移除和清空元素:
$('.p1').remove() //从DOM中删除所有匹配的元素(标签和事件)，被删掉的对象做返回值，包括删除自身
var $btn=$('button').detach() // 删除标签，保留事件，被删掉的对象做返回值
$('ul').append($btn) //此时按钮能追加到ul中
$('.p1').empty() // 清空匹配的元素集合中所有的子节点，不包括自身
替换:
$('.p1').replaceWith($('.p2')) //后面的替换前面的所有.p1标签
$('.p1').replaceAll($('.p2')) //前面的替换后面的所有.p2标签
克隆:
.clone(true) //不加参数true，克隆标签但不克隆标签带的事件,加参数true，克隆标签并且克隆标签带的事件
11.571 克隆示例
<head>
<style>
#b1 {
background-color: deeppink;
padding: 5px;
color: white;
margin: 5px;
}
#b2 {
background-color: dodgerblue;
padding: 5px;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<button id="b1">屠龙宝刀，点击就送</button>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").on("click", function () { // clone方法不加参数true，克隆标签但不克隆标签带的事件
$(this).clone().insertAfter(this);
});
$("#b2").on("click", function () { // clone方法加参数true，克隆标签并且克隆标签带的事件
$(this).clone(true).insertAfter(this);
});
</script>
</body>
python 之 前端开发（ jQuery选择器、筛选器、样式操作、文本操作、属性操作、文档操作）的更多相关文章
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- Jquery框架1.选择器|效果图|属性、文档操作
1.JavaScript和jquery的对比 书写繁琐,代码量大 代码复杂 动画效果,很难实现.使用定时器 各种操作和处理 <!DOCTYPE html> <html lang=&q ...
- jquery选择器筛选器
jQuery对象 Query 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里 ...
- JQuery 选择器 筛选器
什么是jQuery对象 参考:http://jquery.cuishifeng.cn/css.html jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQue ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- python 之 前端开发（ jQuery事件、动画效果、.each()、 .data()）
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- 前端开发 - JQuery&Bootstrap - 总结
一.JavaScript和Jquery的区别 1.javascript的缺点: 1.书写繁琐,代码量大 2.代码复杂 3.动画效果,很难实现.使用定时器 各种操作和处理 2.定义: 1.Javascr ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
- 前端开发—jQuery
jquery简介 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...
随机推荐
- hasura skor 一个pg 的event trigger 扩展
hasura skor 是一个hasura 团队早期的event triggerpg 扩展,新的推荐使用graphql engine 参考架构 缺点 只有在skor 运行的时候,数据才可以被捕捉处理 ...
- 计蒜客 39280.Travel-二分+最短路dijkstra-二分过程中保存结果，因为二分完最后的不一定是结果 (The 2019 ACM-ICPC China Shannxi Provincial Programming Contest M.) 2019ICPC西安邀请赛现场赛重现赛
Travel There are nn planets in the MOT galaxy, and each planet has a unique number from 1 \sim n1∼n. ...
- BJOI做题记录
BJOI做题记录 终于想起还要做一下历年省选题了2333 然而咕了的还是比做了的多2333 LOJ #2178. 「BJOI2017」机动训练 咕了. LOJ #2179. 「BJOI2017」树的难 ...
- javascript 中的方法注入
js 中的方法注入 java中很多框架支持 apo 的注入, js中也可以类似的进行实现 主要是通过扩展js中方法的老祖 Function 对象来进行实现. Function.prototype.af ...
- hangfire控制台应用程序中添加控制面板
1.使用nuget 管理包安装 Microsoft.AspNet.WebApi.OwinSelfHost 2.根目录添加新建类 名为:Startup.cs public class Startup { ...
- Spring 事务模板方法设计模式
接上一篇文章 上一篇讲到了doGetTransaction方法 一.模板方法设计模式 这里涉及到了一个经典的设计模式:模板方法 如下图: AbstractPlatformTransactionMana ...
- 如何通过配置tomcat或是web.xml让ie直接下载文件
web.xml(tomcat\conf\web.xml)中配置了 <mime-mapping> <extension>txt</extension> < ...
- python虛擬環境和工具
1.命令 pip install virtualenvwrapper-win mkvirtualenv env_xadmin deactivate 退出 pip list pip install m ...
- BIM数据格式中IFC的标准及格式
传统工程数据往往零散且片段的储存在各个不同的地方,数据格式也有各种不同的形式互相搭配,最常见的有图形(施工图.大样图.断面图.流程图等).文字(各种说明文件).数字(各种统计.数量或价格数据),这些数 ...
- Ubuntu 配置镜像源
Ubuntu 配置镜像源 注, 如果添加镜像后没有自己要安装的软件, 切回原镜像即可, 只是有点慢. cp /etc/apt/sources.list /etc/apt/sources.list.ba ...