jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架
jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架
一、jQuery查找标签
1.各种选择器
1.基本选择器
$('#id') id选择器
$('.c1') 类(class)选择器
$('tagName') 标签选择器
2.组合选择器
$('div.c1') 查找有c1 class类的div标签
$('div#d1') 查找id是d1的div标签
$('div,span,p') 查找div或者span或者p标签
$('#d1,.c1,span') 查找id是d1的或者class含有c1的或者span标签
3.层级选择器
$('div p') 查找div里面的所有的后代p标签
$('div>p') 查找div里面的所有的儿子p标签
$('div+p') 查找div里面的所有的毗邻p标签
$('div~p') 查找div里面的所有的兄弟p标签
4.属性选择器
$('[username]') 查找含有username属性名的标签
$('input[username = 'jia']') 查找含有username属性名值等于jia的标签输入框
5.基本筛选器(了解)
:first 第一个
:last 最后一个
:eq(index) 索引等于index那个值
:even 匹配所有索引值为偶数的元素(从0开始)
:odd 匹配所有索引值为奇数的元素(从0开始)
:gt(index) 索引大于index那个值(从0开始)
:lt(index) 索引小于index那个值(从0开始)
:not(元素选择器) 移除所有满足not条件的标签
:has(元素选择器) 选取所有包含一个或者多个标签之内的标签
2.表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
代码练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<form action="">
<p>username: <input type="text" class="c" disabled value="明天要学习jango啦"></p>
<p>password: <input type="password" class="c" value="明天要学习jango啦"></p>
<p>data: <input type="date" class="c"></p>
<p>data1: <input type="email" class="c"></p>
<p>data2: <input type="radio" class="c"></p>
<p>data3: <input type="checkbox" class="c"></p>
<p>data4: <input type="submit" class="c"></p>
<p>data5: <input type="reset" class="c"></p>
<p>data6: <input type="button" class="c"></p>
<select name="" id="">
<option value="">111</option>
<option value="" selected>222</option>
<option value="">333</option>
</select>
</form>
</body>
</html>
$(':text')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':radio')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':password')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
$(':checked')
jQuery.fn.init(3) [input.c, input.c, option, prevObject: jQuery.fn.init(1)]
disabled:就是这个标签只能看不能进行点击，输入等操作
selected和checked的区别：
checked在寻找的时候把selected也包含在内，selected在寻找的时候只能找到它自己，如果不要找到:selected那可以在前面设置一下标签过滤掉:selected
3.筛选器方法
1.下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
2.上一个元素
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
3.父元素
$("#id").parent()
$("#id").parents() //查找当前元素的所有的父辈元素
$("#id").parentUntil("#i2") // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4.儿子和兄弟元素
$("#id").children()
$("#id").siblings()
html:
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
<p>div>p
<a href="">div>p>a</a>
</p>
<span>div>span</span>
<p>div>p
<span id="d2">div>p>span</span>
</p>
</div>
<span>span</span>
<span>span</span>
</body>
let $pEle = $('#d1')
undefined
$pEle.next()
jQuery.fn.init [span, prevObject: jQuery.fn.init(1)]
$pEle.parent()
jQuery.fn.init [body, prevObject: jQuery.fn.init(1)]
$pEle.children()
jQuery.fn.init(3) [p, span, p, prevObject: jQuery.fn.init(1)]
二、jQuery操作标签
1.操作类js与jQuery的区别
js：
classList.add()
classList.remove()
classList.contains()
classList.toggle()
jQuery:
addClass() 添加元素
removeClass() 移除某个类的属性
hasClass() 验证是否包含某个属性
toggleClass() 有删无添加
2.位置操作
offset() 获取匹配当前窗口元素的位置
position() 获取匹配元素相对父元素的偏移量
scrollTop() 获取匹配元素相对滚动条的偏移量
scrollLeft() 获取匹配元素相对滚动条左侧的偏移量
offset()方法允许我们检索一个元素相对于文档的当前位置，而position()是相对于父级元素的位移
3.文本操作
js:
innerText 操作文本
innerHTML 操作文件与标签
values
files[0]
jQuery:
text() 操作文本内容
html() 操作文本内容与标签
val() 获取匹配元素的值
val(val) 设置所有匹配元素的值
jQuery对象[0].files
4.创建标签
document.createElement()
jQuery:
$('<a>')
5.jQuery获取标签
$('div').text()
'div\n div>p 好好学习，努力提高\n div>p>a\n \n div>span 以后可能会特别怀念现在这段时光\n div>p\n div>p>span 一群人并行，热血有梦想的青年\n \n '
$('div').html()
'div\n <p>div>p 好好学习，努力提高\n <a href="">div>p>a</a>\n </p>\n <span>div>span 以后可能会特别怀念现在这段时光</span>\n <p>div>p\n <span id="d2">div>p>span 一群人并行，热血有梦想的青年</span>\n </p>\n '
6.属性操作
js版本
setAttribute()
getAttribute()
removeAttribute()
jQuery:
attr(name,value) 设置属性
removeAttr(name) 移除属性
7.文档处理
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
三、事件
常用事件：
click(function () {})
hover(function () {})
blur(function () {})
fours(function () {})
change(function () {})
keyup(function () {})
js绑定事件：
标签对象.on事件名 = function(){
事件代码
}
btnEle.onclick = function(){alert(123)}
jQuery绑定事件：
方式1：
jQuery对象.事件名 = function(){
事件代码
}
$btnEle.onclick = function(){alert(123)}
方式2：
jQuery对象.on(事件名,function(){
事件代码
})
$btnEle.on(click,function(){alert(123)})
四、克隆事件
默认情况下只会克隆它的标签，不会克隆它的点击事件，所以只能第一个点击进行克隆，而后面克隆出来的不能进行点击克隆。但是如果想要更完美的克隆就是原封不动的全部克隆出来，就在clone()的括号里设置true
<button style="border: 1px solid cornflowerblue">小布丁</button>
<script>
$('button').click(function () {
$('body').append($(this).clone(true))
})
</script>
五、事件相关补充
1.取消后续事件 事件函数的最后return false即可
2.阻止事件冒泡 事件函数的最后return false即可
3.等待页面加载完毕再执行代码
$(function(){}) 缩略写法
$(document).ready(function(){}) 完整写法
4.事件委托 主要针对动态创建的标签也可以使用绑定的事件 $('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行
六、hover事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: 2px solid black;
background-color: coral;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<p>在我上面干嘛1</p> <!--所有p标签都有下面鼠标悬浮上去或移走的提示-->
<p>在我上面干嘛2</p>
<p>在我上面干嘛3</p>
<script>
$('p').hover(function (){
alert('来了老弟')
},
function (){
alert('慢走哦~')
}
)
</script>
</body>
</html>
七、jQuery动画效果
<style>
div {
position: relative;
display: inline-block;
border: 2px solid cornflowerblue;
margin-left: 100px;
border-radius: 15%;
}
div>i {
display: inline-block;
color: peru;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">觉得我棒的话，请给我点赞</div>
<script>
$("#d1").on("click",function () {
var newI = document.createElement('i')
newI.innerText="+10"
$(this).append(newI)
$(this).children('i').animate({
opacity:0
},100000)
})
</script>
</body>
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
八、Bootstrap页面框架
1.引入与应用
CDN：
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
2.核心部分讲解
使用bootstrap其实只需要操作标签的样式类即可
布局容器
class = "container" 有留白
class = "container-fluid" 没有留白
栅格系统
class = "row" 一行均分12份
class = "col-md-8" 划分一行的12份
屏幕参数
col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
col-md-offset-3
3.重要样式
1.表格样式
<table class="table table-hover table-striped">
颜色
<tr class="success">
2.表单标签
class = "form-control"
3.按钮组
class = "btn btn-primary btn-block"
4.组件
1.图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
https://fontawesome.com.cn/
2.导航条
class="navbar navbar-inverse"
3.其他
jQuery查找标签、节点操作、事件绑定、Bootstrap页面框架的更多相关文章
- Dom,查找标签和操作标签
Dom,查找标签和操作标签 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
- 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作
jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...
- javascript创建节点的事件绑定
javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...
- JQuery查找标签
JQuery查找标签 一.基本标签 1 id选择器: $("#id(名称)") $("#cent") 2 标签选择器: $("tabName(便签名称 ...
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
jQuery简介 宗旨:Write less, do more. 内部封装了js代码 是编程更加简单并且兼容所有的主流浏览器 版本:1.x 2.x 3.x # 可以使用3.x最新版 是第三方的类库:使 ...
- DOM标签操作与事件与jQuery查找标签
目录 DOM之操作标签 创建标签对象 标签对象的属性 innerText与innerHTML 标签内部追加内容 属性操作 事件 常用事件 事件绑定 事件案例 jQuery简介 查找标签 基本选择器 属 ...
- jquery总结04-DOM节点操作
一般js操作节点 ①创建节点(元素文本)document.createElement innerHTML ②添加属性 setAttribute ③加入文档 appendChild 操作繁琐还有兼容性 ...
- jQuery查找标签--选择器,筛选器,模态对话框, 左侧菜单栏
查找标签 选择器: 基本选择器(同css) id选择器 $("#id") 标签选择器 $('tagName') class选择器 $(".className") ...
- jQuery文本框(input textare)事件绑定方法教程
jquery 的事件绑定已经用on替换了原来的bind,接下来为大家分享下bind的使用方法及input textare事件.目前1.7以上,jquery?的事件绑定已经用on替换了原来的bind,接 ...
- 04-老马jQuery教程-DOM节点操作及位置和大小
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...
随机推荐
- clang在编译时指定目标文件所需的最低macOS版本
调研这个的原因,是因为有个同事在macOS 12.2上打包好的程序,放在macOS 10.15上运行时报错: Dyld Error Message: Symbol not found: __ZNKS ...
- mysql管理工具mysqladmin的使用
1. 初始化密码 mysqladmin -uroot -p'password' password 'new-password' [root@controller3 ~]# yum -y install ...
- [排序算法] 快速排序 (C++) (含三种写法)
快速排序解释 快速排序 Quick Sort 与归并排序一样,也是典型的分治法的应用. (如果有对 归并排序还不了解的童鞋,可以看看这里哟~ 归并排序) 快速排序的分治模式 1.选取基准值,获取划分位 ...
- 随笔——写windows服务的时候如何调试 c# .net
流程 1.更改项目 应用程序--输出类型--windows应用程序 改为 控制台应用程序 2.Program启动类中添加调用代码 3.服务类里面添加启动方法去启动OnStart和 Console.Re ...
- i春秋wanna to see your hat?
打开题目网页发现是个选择帽子的网页,点击超链接进入一个网页让我们输入我们的name然后匹配帽子颜色(其实不管怎么填都是绿色的)这里也有个注册窗口 先查看源码没什么特别发现,再试试抓包吧 在这个界面抓包 ...
- 关于led蓝牙控制器ble通信分析
前言 前几天在网上买了一个led蓝牙控制器,可以用手机app通过蓝牙连接控制rgb led灯,当然这个也是属于ble通信.之前我写过一篇体重称蓝牙通信的,不过那个较为简单,数据也是靠分析出来的. 这次 ...
- day11 枚举类enum & 单例模式 & 异常以及抛出
day11 枚举enum 用enum关键字定义枚举类 特点 1.用enum关键字定义枚举类 2.枚举类默认继承java.lang.Enum类 3.枚举类的构造方法只能使用private修饰,省略则默认 ...
- SpringBoot3.x中spring.factories功能被移除的解决方案
背景 笔者所在项目组在搭建一个全新项目的时候选用了SpringBoot3.x,项目中应用了很多SpringBoot2.x时代相关的第三方组件例如baomidou出品的mybatis-plus.dyna ...
- windows安装grunt时提示不是内部或外部命令解决方案
参考:https://www.cnblogs.com/hts-technology/p/8477258.html 安装windows安装elasticsearch-head时 不需要输入grunt s ...
- python3 利用当前时间、随机数产生一个唯一的数字作为文件名
一.python3 利用当前时间.随机数产生一个唯一的数字作为文件名 代码如下: #-*-coding:utf-8-*- #python3自动生成文件名 from datetime import * ...