jquery选择器笔记

原创 2019-04-06 07:58:43 304
摘要:<!DOCTYPE html><html><head> <title>jquery选择器</title></head><body><script type="text/javascript">//1基本选择器//语法$('#id')根据ID$('.class名

<!DOCTYPE html>

<html>

<head>

<title>jquery选择器</title>

</head>

<body>

<script type="text/javascript">

//1基本选择器

//语法

$('#id')根据ID

$('.class名')根据给定的class名来匹配元素

$('element')根据给定的标签名来匹配元素

$('*')匹配所有元素

$('id,.class,element')匹配到页面中的多个选择器

//2层级选择器(相当于父类和子类的元素关系)

$('父级元素>子级元素')//给定的父级元素下匹配所有的子元素

 $('祖先元素 后代元素')//级定的祖先元素下匹配所有的后代元素

 $('prev +next')//匹配紧跟在prev元素后面的NEXT元素

 $('prev ~ siblings')//匹配prev元素后面所有的siblings元素

 //3.1顺序选择器

 $(':first')第一个元素

 $(':last')最后一个元素

 //3.2比较

 $(':gt(x)')表示大于值X的元素

 $(':lt(x)')表示小于值X的元素

 $(':eq(x)')表示等于值X的元素

 //3.3奇偶数

 $(':odd')奇数顺序

 $(':even')偶数顺序

 //4.非

 $(':not(selector)')匹配不是selector的所有元素


//2内容选择器

语法

$(':contains(text)')匹配包含给定文本(text)的元素

$(':has(selector)')匹配包含特定选择器元素的元素

$(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)

$(':parent')匹配含有子元素或者文本的元素


//3属性选择器

$('[属性名]')匹配包含给定属性的元素 

例:$('input[type]').css('background','pink')

$('标签名[属性名=value]')匹配给定属性是某个特定值的元素

$('标签名[属性名!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素

$('标签名[属性名^=value]')匹配给定属性是以某些值开始的元素

$('标签名[属性名 $=value]')匹配给定属性是以某些值结尾的元素

$('标签名[属性名 *=value]')匹配给定属性包含某些值的元素

$('标签名[属性名] 标签名[属性名] 标签名[属性名]')复合选择器,需要同时满足多个条件时使用 

   例:$(input[id][name*=n]).css('background','red')


//4表单选择器

$(':enabled')所有激活的input元素(可以使用的input元素)

$(':disabled')所有禁用的input元素(不可以使用的input元素)

$(':selected')所有被选取 的元素,针对于(select元素-->下拉框

$(':checked')所有被选中的input元素,针对于checked多选框,jq要用.parent().css(':parent')匹配含有子元素或者文本的元素





</script>

</body>

</html>


批改老师:西门大官人批改时间:2019-04-08 10:19:11
老师总结:总结的很好,最好每个配上一个案例说明一下

发布手记

热门词条