day 49
程序员文章站
2022-03-08 14:47:27
[TOC] jQuery的补充 基本筛选器 属性选择器 表单选择器 筛选器方法 下一个元素 上一个元素 父亲元素 儿子和兄弟元素 操作标签 样式操作 样式类 位置操作 尺寸 文本操作 HTML代码 文本值 值 属性操作 用于 和`radio` == 和`attr`的区别== 全称 (属性) 全称 ( ......
jquery的补充
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从0开始计数 :odd // 匹配所有索引值为奇数的元素，从0开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
[attribute] [attribute=value] // 属性等于 [attribute!=value] // 属性不等于
表单选择器
:text :password :file :radio :checkbox :submit // 提交 :reset // 重置 :button // 按钮
筛选器方法
下一个元素
$("#id").next
$("#id")/nextall() // 同级别下面的所有元素
$("#id").nextuntil() // 查找下面所有元素，直到匹配到那一个元素为止
上一个元素
$("#id"),prev
$('#id').prevall() // 同级别上面的全部元素
$("#id").prevuntil() // 查找上面所有元素，直到匹配到那一个元素为止
父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有父辈元素
$("#id").parentsuntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
儿子和兄弟元素
$("id").children() // 查找子元素
$("id").sibings() // 查找兄弟元素
操作标签
样式操作
样式类
addclass(): // 添加指定的css类名 removeclass(): // 移除指定的css类名 hasclass(): // 判断样式存不存在 toggleclass(): // 切换css类名，如果有就删除，如果没有就添加
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置 position() // 获取匹配元素相对父元素的偏移 scrolltop() // 获取元素相对滚动条顶部的偏移 scrollleft() // 获取元素相对滚动条左侧的偏移
尺寸
height() // 高度 width() // 宽度 innerheight // 文本内容与内边距的高度和 innerwidth // 文本内容与内边距的宽度和 outerheight // 文本内容与内边距与边框的高度和 outerwidth // 文本内容与内边距与边框的宽度和
文本操作
html代码
html() // 取得第一个匹配元素的html内容 html(val) // 设置所有匹配元素的html内容
文本值
text() // 取得所有匹配元素的内容 text(val) // 设置所有匹配元素的内容
值
val() // 取得第一个匹配元素的当前值 val(val) // 设置所有匹配元素的值 val(val1, val2) // 设置多选的checkbox,多选select的值
属性操作
attr(attrname) // 返回第一个匹配元素的属性值 attr(attrname, attrvalue) // 为所有匹配元素设置一个属性值 attr(k1:v1, k2:v2) // 为索引匹配元素设置多个属性值 removeattr() // 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop // 获取属性 removeporp() // 移除属性
==prop和attr的区别==
attr全称attribute(属性)
prop全称propperty(属性)
两者虽然都是属性，但它们所指的属性并不相同，attr所指的属性是html标签属性，而prop所指的是dom对象属性。
总结
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio、和option的是否被选中都用prop
文档处理
添加到指定元素内部的后面
$(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 // 把a放到b的前面
移除和清空元素
remove() // 从dom中删除所有匹配的元素 empty() // 删除匹配的元素集合中所有的子节点
替换
replacewith() replaceall()
克隆
clone() // 参数复制
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<style>
button {
height: 50px;
width: 80px;
color: violet;
border: 3px solid yellow;
background-color: orangered;
}
</style>
</head>
<body>
<button>啊~~~疼</button>
<script>
// var btnele = $('button')[0];
// btnele.onclick = function () {
// $(this).clone().insertafter(this)
// // clone 默认不可隆事件
// }
// 如果要克隆事件，使用以下方式
$("button").on("click", function () {
$(this).clone(true).insertafter(this);
});
</script>
</body>
</html>
事件
常用事件
click(function(){...}) // 鼠标点击
hover(function(){...}) // 悬浮
blur(function(){...}) // 失去焦点
focus(function(){...}) // 聚焦
change(function(){...}) // 改变应用域
keyup(function(){...}) // 按下按键时，改变文本域的颜色
事件绑定
-
.on(events [, selector ], function(){})
-
event：事件 -
selector：选择器（可选） -
function：事件处理函数
移除事件
-
.off(events [, selector ], function(){})off()方法移除用.on()绑定的事件处理程序
-
event：事件 -
selector：选择器（可选） -
function：事件处理函数
阻止后续事件执行
1.return false; // 常见阻止表单提交等
2.e.preventdefault();
jquery 绑定事件的语法
jquery绑定事件的语法
第一种语法结构：
$(选择器).事件名(function(){
// 事件代码
})
第二种语法结构 用处更广
$(选择器).on('事件名',function(){
// 事件代码
})
# 实时监测input内部输入变化
$('input').on('input',function () {
// 获取用户输入的内容
console.log($(this).val())
})
阻止事件冒泡
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
</head>
<body>
<div>div
<p>p
<span>span</span>
</p>
</div>
<script>
$('div').click(function (e) {
alert('div')
});
$('p').click(function (e) {
alert('p')
});
$('span').click(function (e) {
alert('span');
e.stoppropagation() // 阻止事件冒泡
});
</script>
</body>
</html>
文档加载
js中
window.onload = function() {
// 在这里写js代码
}
jquery中
$(document).ready(function() {
// 在这里写jquery代码
})