jquery基础语法:
$(selector).action()
查找标签:
1.基本选择器
$("#id")
$("tagName") //标签选择器
$(".className") //class选择器
$("div.c1") //找到c1 class类的div标签
$("*") //找到所有选择的选择器
$("#id, .className, tagName") //组合选择器
2.层级选择器
-
$("x y"); //x所有的后代y
-
$("x > y") //x所有的儿子y
-
$("x + y") //找到所有紧挨在x后面的y
-
$("x ~ y") //x之后所有的兄弟y
3.基本筛选器
-
: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标签
4.属性选择器
[attribute]
[attribute = value] //属性等于
[attribute != value] //属性不等于
//示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']"); //取到checkbox类型的input标签
$("input[type!='text']"); //取到类型不是text的input标签
5.表单选择器
-
:text
-
:password
-
:file
-
:radio
-
:checkbox
-
:submit
-
:reset
-
:button
例子:
$(":checkbox") //找到所有的checkbox
表单对象属性
:enable
:disabled
:checked
:selected
北京市 上海市 广州市
$(":selected") //找到所有被选中的option
6.筛选器的方法
选择器或者筛选器选择出来的都是对象,而筛选方法就是通过对象来调用一个进一步过滤作用的方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2标签就结束查找,不包含他
父亲元素:
$("#id").parent()
$("#id").parents() //查找当前元素的所有父辈元素,爷爷辈,祖先都找到
$("#id").parentsUntil('body') //查找当前元素所有的父辈元素,直到找到匹配的元素为止
$("#id").children(); //儿子们
$("#id").siblings(); //兄弟们,不包含自己
$("div").find("p")
$("div").filter(".c1") // 从结果中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div,和find不同,find是找到div标签的子子孙孙中找到一个符合条件的标签
等价于: $("div.c1")
.first() // 获取匹配的第一个元素
.last() //获取匹配的最后一个元素
.not() //从匹配元素的集合中删除指定表达式的元素
.has() //保留包含特定后代的元素,去掉那些不含有指定后代的元素
.eq() //索引值等于指定值的元素
操作标签
样式类
addClass(); //添加指定的css类名
removeClass(); //移除指定的css类名
hasClass(); //判断样式存在不存在
toggleClass(); //判断css类名,有就移除,没有就添加
例子:
$("p").css("color","red")
位置操作:
offset()
position()
$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚动向左移动的距离
尺寸:
height() //盒子模型的高度大小,我们设置的标签高度和宽度
innerHeight() //内容content高度 + 两个padding的高度
outerHeight() //内容高度+两个padding的高度+两个border的高度,不包含margin的高度
文本操作
html代码:
html() //取得第一个匹配元素的html内容,包含标签内容
html(val) //设置所有匹配元素html内容,识别标签,内阁表现出标签的效果
文本值:
text() //取得匹配元素的内容,只有文本内容,没有标签内容
text(val) //设置所有匹配元素的内容,不识别标签,将标签作为文本插入进去
$("[name='hobby']").val(['basketball','football']) $("#s1").val(["1","2"])
<label for="c1">女</label> <input name="gender" id="c1" type="radio" value="0"> <label for="c2">男</label> <input name="gender" id="c2" type="radio" value="1"> $("input[name='gender']:checked").val()
属性操作
attr(attrName) //返回第一个匹配元素的属性值
attr(attrName,attrValue) //为所有匹配元素设置一个属性值
attr({k1:v1 , k2:v2}) //为所有匹配元素设置多个属性值
removeAttr() //从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() //获取属性
<input type="checkbox" value="1"> <input type="radio" value="2"> <script> $(":checkbox[value='1']").prop("checked",true); $(":radio[value='2']").prop("checked",true); </script>
文档处理
添加到指定元素内部的前面
$(A).append(B) //把B追加到A
$(A).appendTo(B) //把A追加到B
添加到指定元素外部的后面
$(A).after(B) //把B放到A的后面
$(A).insertAfter(B) //把A放到B的后面
移除和清空元素
remove() //从DOM中删除所有匹配的元素
empty() //删除匹配元素集合中所有的子节点,包括文本全部删除,但是匹配的元素还在
clone() //参数
事件绑定
click(function(){ ... })
hover( function () { ... } )
blur( function() {...} )
focus( function() {...} )
change( function() {...} )
keyup ( function() { ... } )
mouseover 和 mouseenter
.on( events[,selector] , function(){})
-
events: 事件
-
selector: 选择器
-
function: 事件处理函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左侧菜单示例</title>
<style>
.left {
position: fixed;
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: rgb(47, 53, 61);
}
.right {
width: 80%;
height: 100%;
}
.menu {
color: white;
}
.title {
text-align: center;
padding: 10px 15px;
border-bottom: 1px solid #23282e;
}
.items {
background-color: #181c20;
}
.item {
padding: 5px 10px;
border-bottom: 1px solid #23282e;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="left">
<div class="menu">
<div class="title">菜单一</div>
<div class="items">
<div class="item">1111</div>
<div class="item">2221</div>
<div class="item">3331</div>
</div>
<div class="title">菜单二</div>
<div class="items hide">
<div class="item">1112</div>
<div class="item">2222</div>
<div class="item">3332</div>
</div>
<div class="title">菜单三</div>
<div class="items hide">
<div class="item">1113</div>
<div class="item">2223</div>
<div class="item">3333</div>
</div>
</div>
</div>
<div class="right"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(".title").click(function(){
$(".items").addClass("hide")
$(this).next().removeClass("hide")
})
</script>
</body>
</html>