选择器——jQ的核心
基本选择器
多项选择器
层级选择器
属性选择器
过滤器
表单相关
查找和过滤
基本选择器:写css表现层时尽可能用class选择器,而写js行为层时,用id选择器
由于优先级的层级问题:id更高,class少一些
//1.id选择器
// #id :根据给定的ID匹配一个元素
//demo;注意在刚开始应用jq时,要在head里面引用
First
Second
Third
//2.element 元素选择器;根据给定的元素标签名匹配所有的元素
//由于标签名不是唯一的,有和数组类似的功能 ,通过 $(this).index()可确定第几个
$(document).ready(function(){
var div = $('div');
console.log(div);
})
//3.class选择器
$('className');
//4.*:all通配符选择器,很少用到
$(document).ready(function{
var all = $('*');
console.log(all);
})
多项选择器
$("selector1,selector2,……selectorN");
//可指定任意多个类型;每个选择器匹配到一个之后一起返回
$(document).ready(function{
var firstAndThird = $('#first,.third')
console.log(firstAndThird);
})
层级选择器:重点在于中间的符号
空格:$(‘ancestor descendant’):在给定的祖先元素下匹配所有的后代元素
大于号:$(‘parent > childchild’)表示获取parent下的所有下一级childchild(儿子选择器)
加号:$(‘pre + nextbrother’)表示获得pre节点的下一个兄弟节点,相当于next()方法
波浪号:$(‘pre ~ brother’)表示获取pre节点的后面的所有兄弟节点,相当于nextAll()方法
属性选择器
[attribute] :匹配具有指定属性的元素
[attribute=value] :匹配属性为指定值的元素
[attribute!=value] :匹配属性值不等于指定值的元素
[attribute^=value] :匹配属性值以指定值开始的元素,如tool_vs这里就是以tool开头有,以vs结尾
[attribute$=value] :匹配属性值以指定值结束的元素
[attribute*=value] :匹配属性值中包含指定值的元素,如tool_vscode,这里的vs就是包含在里面
[selector1] [selector2][selectorN] :就像是同时匹配多个条件,可以用到上面不同类型的属性选择器;如下
"lang_jquery">jQuery
$('[class][class*=lang][class$=y]')
过滤器:注意理解child和type的区别
如:对于detail>p:first-child 而言,他直接找detail下面的所有节点,然后再判断节点的类型是不是p,如果是p的话返回该节点,不是的话就找不到;但是对于type而言,重点在type 直接忽略掉不是p的标签进行查找
过滤器之child系列:
:first-child
:last-child
:nth-child(n | even | odd | formula)
:nth-last-child(n | even | odd | formula):倒着数
:only-child:标签下必须只有一个子标签并且为p标签才会被选择
过滤器之type系列
:first-of-type
:last-of-type
:nth-of-type (n | even | odd | formula):注意这里是选到了类型才开始数
:nth-last-of-type (n | even | odd | formula)
:only-of-type
表单相关
:input,可以选择,
:text,匹配所有的单行文本
其他input的type: :password/:radio/:checkbox/:image/:reset/:botton/:file
:enabled、:disabled,:enabled匹配所有可用元素;而disabled匹配所有不可用元素
:checked,匹配所有选中元素(复选框、单选框、select中的option)
:selected,匹配所有选中的option元素
下拉框可以用 :checked 和:selected来选择;建议是单选框和复选框用checked来选择,而下拉框用selected
查找和过滤
find(expr|object|element):搜索所有与指定表达式匹配的元素
children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合
next([expr]):所选元素的下一个元素
prev([expr]):上一个
eq(index|-index);eq如果是负值就是倒数第几个;
siblings([expr]):找的是除了他本身的其他兄弟元素;
filter(expr|object|element|fn):筛选出与指定表达式匹配的元素集合
var lis = $('li').eq(8);
var python = allis.filter('.python');
$(document).ready(function(){
//查找的是aside下面的class= javascript 标签的里面的值
var jq = $('aside').find('.javascript')
})
$(document).ready(function(){
var js = $('aside').find('details');
//这里find找到的是9个,儿子和孙子等等一起找了
console.log(js);
var lis = $('aside').children('details');
//而children找的是儿子,只找到了四个
console.log(lis);
})
"UTF-8">
parent()
"cursor: pointer;" οnclick="test()">点这里触发事件
- 床前明月光
- 疑是地上霜
- 举头望明月
- 低头思故乡
古诗
"UTF-8">
parents()
"cursor: pointer;" οnclick="test()">点这里触发事件
- 床前明月光
- 疑是地上霜
- 举头望明月
- 低头思故乡
古诗
jq事件
添加链接描述