自我总结40
jQuery查找标签
基本选择器
id选择器
$('#id')
标签选择器
$("tagName")
class选择器
$(".className")
配合使用
$("div.c1")
配合使用
$("*")
组合选择器
$("#id, .className, tagName")
层级选择器
$("x y") //x的所有后代y（子子孙孙）
$("x>y") //x的所有儿子y
$("x+y") //找到所有紧挨在x后面的y
$("x-y") //x之后所有的兄弟y
jQuery筛选器
基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
例：
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：$("type:checkbox") // 找到所有的checkbox
type可省略, 写为$(":checkbox")
注意：jQuery中，用$(':checked')查找标签，会将有默认值的input和option一起返回。
如果一定要找到 input中含有checked的值，可再加一个条件$("input:checked"); `
筛选器方法
.next() // 找到括号内id值的下一个同级元素
.prev() // 找到括号内id值的上一个同级元素
.parent() // 查找当前元素的上一个父辈元素
.children() // 子代
.siblings() // 兄弟
.find() // 搜索所有与指定表达式匹配的元素
.filter() // 筛选出与指定表达式匹配的元素集合
// 补充 与表单筛选器类似
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素
。
.eq() // 索引值等于指定值的元素
链式操作
一行代码搞定所有对象调用方法之后将原对象返回
操作标签
样式操作
addClass(); // 添加指定的CSS类名
removeClass(); // 移除指定的CSS类名
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加
// css操作
// 原生js
.style.color
// jQuery
.css('color','red')
例：$("p").css("color", "red"); //将所有p标签的字体设置为红色
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
$(window).scrollTop()
$(window).scrollTop(100)
补充：括号内可以加参数，scrollTop() 比较常用，应用场景：当滚动条距离顶部600px，则显示“回到顶部”按钮
尺寸操作
// 内部文本宽高
height()
width()
// 内部文本高度+上下padding高度
innerHeight()
// 内部文本宽度+左右padding宽度
innerWidth()
// 内部文本高度+上下padding高度+上下边框高度
outerHeight()
// 内部文本宽度+左右padding宽度+左右边框宽度
outerWidth()
文本操作
不加参数就是获取 加了参数就设置
| jQuery | 原生js |
|---|---|
| html() | innerText() |
| text() | innerHtml() |
| val() | value |
例：设置多选的值
$("[name='hobby']").val(['basketball', 'football']);
例：获取被选中的checkbox的值
$("input[name='gender']:checked").val()
属性操作
attr('属性名')
attr('属性名','属性值')
例：
attr('username','jason')
attr({'password':'123','age':18})
注意：
在获取checkbox或者radio的checked属性的时候
不要用attr 建议使用prop()
1.能够动态识别标签是否被选中
2.返回的结果是一个布尔值更加利于判断
prop('checked',false) // 要想移除checked属性
文档处理
将创建的标签添加到你想要添加的位置
添加到指定元素内部的后面
$(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() // 删除匹配的元素集合中所有的子节点。
替换
replaceWith()
replaceAll()
克隆
clone() // 参数
补充：克隆默认只克隆HTML和css，不克隆js，但是在括号内加一个true，就可以克隆js
jQuery事件
常见的事件
click(function(){...}) // 单击
hover(function(){...}) // 光标悬浮
blur(function(){...}) // 失去焦点
focus(function(){...}) // 获得焦点
change(function(){...}) // 域内容变化
keyup(function(){...}) // 键盘某个键按下后松开
input(function(){...}) // 实时监听input框
绑定事件的两种方式
$('input').click(function(){
})
$('input').on('click',function(){
})
阻止标签后续的事件发生
//方式1
return false
例：
$("#b1").click(function (e) {
alert(123);
return false;
});
//方式2
e.preventDefault()
例：
$("#b1").click(function (e) {
alert(123);
e.preventDefault();
});
阻止事件冒泡
冒泡事件就是点击子节点，会向上触发父节点，爷爷节点的点击事件
e.stopPropagation()
例：
$("内层某节点").click(function (e) {
alert(123);
e.stopPropagation();
});
页面载入
//js中(了解)
window.onload = function(){
// 在这里写你的JS代码...
}
//jQuery中(了解)
$(document).ready(function(){
// 在这里写你的JS代码...
})
$(function(){
// 你在这里写你的代码
})
保证你的js代码写在body最下方即可
事件委托
作用：想要让你后续动态创建的标签也有事件
原理：通过事件冒泡，利用父标签去捕获子标签的事件
$('div').on('click','button',function(){
// 事件
})
