选择器

id选择器

$("#id") 等同于 document.getElementById("id")

类选择器

$(".classname")

类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选。也就是可以有多个div的class都为相同的一个值。
如果通过javascript处理document.getElementsByClassName("name")得到的是一个合集,需要通过循环给合集中每一个元素修改样式。

元素选择器

$("elementname")

元素选择器即为标记名称后的元素。例如 < div > 标签,同样可以取得合集。等同于document.getElementsByTagName("div")

筛选选择器

基本筛选选择器

基本筛选选择器针对的都是元素DOM节点。
例如 < div class = "name" > </ div >
< div class = "name" > </ div >
$(".name:first")找到第一个name。

image

内容筛选选择器

基本筛选选择器针对的都是元素DOM节点,如果我们要通过内容来过滤。

image

:contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素。

 <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>

$(".div:has(span)")查找所有class='div'中DOM元素中包含"span"的元素节点。

$(".div:contains(':contains')")查找所有class='div'中DOM元素中包含"contains"的元素节点。

属性筛选选择器

属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性。

image

<div class="div" testattr="true" name="a b">
            <a>[att~=val]</a>
</div>
<div class="div" testattr="true" name='p1'>
            <a>[att=val]</a>
</div>  

$('div[name~="a"]')查找所有div中,有属性name中的值包含一个连字符“空”和“a”的div元素。

$("div[name=p1]")查找所有div中,属性name=p1的div元素。

表单元素选择器

$(":input") :input 选择器基本上选择所有表单控件

$("input:text")匹配所有input元素中类型为text的input元素。

表单对象属性筛选选择器

表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选。

<input type="text" value="设置disabled" disabled="disabled" />
<input type="text" value="未设置disabled" />

<select name="garden" multiple="multiple">
            <option>imooc</option>
            <option selected="selected">慕课网</option>
            <option>aaron</option>
            <option selected="selected">博客园</option>
</select>

$("input:enabled")查找所有input所有可用的(未被禁用的元素)input元素。
$("input:disabled")查找所有input所有不可用的(被禁用的元素)input元素。

$("option:selected").removeAttr('selected')查找所有option元素中,有selected属性被选中的选项移除option的selected属性。这样一来下拉框默认没有选中任何条目。

特殊选择器this

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。

javascript中:

var p1 = document.getElementById('test1')
        p1.addEventListener('click',function(){
            //直接通过dom的方法改变颜色
            this.style.color = "red"; 
        },false);

this.style.color等同于p1.style.color

jquery 中:

通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,我们就可以用jQuery提供的快捷方法直接处理样式了。

$('#test2').click(function(){
            //通过包装成jQuery对象改变颜色
           $(this).css('color','blue');
    })
posted @ 2020-07-05 21:32  六月的余晖  阅读(179)  评论(0编辑  收藏  举报