jquery选择器

jquery的选择器与css的选择器的作用是完全一样的,目的是精确快速的定位到某个html元素上并获取该元素对象,进而使用jquery的方法对该html进行操作.

jquery常用的选择器有如下几个:基本选择器,基本过滤选择器.属性选择器,表单属性选择器.层级选择器等.

基本选择器

标签选择器(元素选择器)😒("html标签名")

id选择器;$("#id的属性值")

类选择器:$(".class的属性值")

复制代码

复制代码
层级选择器

获得A元素内部的所有的B元素:$("A B ") --- 后代选择器
获得A元素下面的所有B子元素:$("A > B")
获得A元素同级下一个B元素:$("A + B")
获得A元素同级所有后面B元素:$("A ~ B")

复制代码

复制代码
属性选择器

获得有属性名的元素:$("A[属性名]")
获得属性名 等于 值 元素:$("A[属性名=值]")
复合属性选择器,多个属性同时过滤:$("A[属性名!=值][属性名!=值][属性名!=值]")

复制代码

复制代码
基本过滤选择器

不包括指定内容的元素例如: :not(selecter)
偶数,从 0 开始计数: :even
奇数,从 0 开始技术: :odd
指定第几个: :eq(index)
大于n个: :gt(index)
小于n个: :lt(index)
获得标题 (

/
.... ) :header --- 固定写法
获得动画的 :animated ---固定写法 正在执行的动画
复制代码

复制代码
表单属性选择器

可用: :enabled
不可用: :disabled
选中(单选radio ,多选checkbox): :checked
选择(下列列表
$("#b1").click(function(){
//获取多个input标签属性值是 enabled, type属性值是text 返回数组
var $inputs = $("input[type='text']:enabled");
for(var i=0;i<$inputs.length;i++){
//把数组中的DOM对象变成Jquery对象,调用方法val()
alert($($inputs[i]).val());
}
});
//
$("#b2").click(function(){
//获取多个input标签属性值是disabled,返回数组
var $inputs = $("input[type='text']:disabled");
for(var i=0;i<$inputs.length;i++){
//把数组中的DOM对象变成Jquery对象,调用方法val()
alert($($inputs[i]).val());
}
});
//
$("#b3").click(function(){
var $inputs = $("input[type='checkbox']:checked");
alert($inputs.length);
});
//
/*

html()DOM对象的innerHTML
text()
DOM对象的innerText
*/
$("#b4").click(function(){
var $inputs = $("option:selected");
for(var i=0;i<$inputs.length;i++){
alert($($inputs[i]).text());
}
});

posted @ 2020-11-23 15:28  顾生  阅读(92)  评论(0编辑  收藏  举报