Skip to content

jq-02 选择器

一、选择器

选择器的实现比较复杂,消耗性能比较大,建议相同的选择器进行变量保存操作,避免重复使用选择器;

css选择器

可以使用所有的样式选择器;

选择器说明
#id获取id名
.class获取class类名
div获取标签名
div,p,li群组选择器
div.red获取class为red的div标签
div>span获取div下的直接子元素span;
div spandiv下的所有子元素span标签;
div~span选择下面所有的;

基本筛选选择器

选择器说明
:first第一个
:last最后一个
:eq(index)指定第一个,下标从0开始;
:not()除了小括号的标签;
:odd下标为奇数的标签,下标是从0开始的,所以选择的是偶数标签;
:even下标为偶数的标签
:gt(1)下标大于1的元素
:lt(1)下标小于1的元素;
:header所有h标签;
:root选中html标签;
:animated匹配所有正在执行动画效果的元素;

$("div:not(:animated)").animate({"width":"+=200"}) //给没有在动画的div,加长

内容选择器

选择器说明
:contains(我)选择内容有我的标签
:empty选择内容为空的标签,有空格或标签都不为空;
:parent选择有内容的标签;
:has(span)选择有span标签的标签;

隐藏看见

选择器说明
:hidden获取看不见的标签(在页面中不显示的标签) type="hidden" 和display:none;
:visible获取可以看见的标签,页面中显示的

属性选择器

选择器说明
div[class]有class属性的
div[class=box]div的class属性值为box的;
div[class^=box]以box开头的
div[class$=box]以box结尾的
div[class*=box]包含box的;
div[class][title]有class属性并且有title属性的;

子元素选择器

选择器说明
ul li:first-child选择所有父元素中第一个li first的区别:第一个父元素下所有li中的第一个li
ul li:last-child选择所有ul下的最后一个li;
:nth-child()选择指定的第几个标签,从1开始
:first-of-type选择第一次出现的;
:last-of-type最后一次出现的;
:nth-of-type()指定的第几个标签;

child:是从第一个孩子开始找;

of-type:是从第一次出现的孩子找的;

表单选择器

:input 选中所有表单标签,包括select、textarea;

选中具体某个input标签可以冒号type类型,select直接使用标签选择器;

例:

:text 选中单文本框;

.attr("checked",true);设置复选框被选中状态

表单对象属性

选择器说明
:enabled选中所有可用的;
:disabled选中所有禁用的;
:checked选中的;
:selected下拉框被选中的;

二、迭代

$.each

js
$.each($('li'), function(index, item) {})

// or
$('li').each(function(index, item){
    // 这里的item是每个元素, 使用jquery需要再次$(item)
    // 也可以$(this), this指向当前这个item
})

$.map

js
var arr = [1,2,3,4]
$.map(arr, function(item, index){
    
})

当map操作数组返回null和undefined时,不会保存在新的数组中;

$.map不能直接$(b).map(function(){});

js
var ary = [1,2,3,4]
var aa = $.map(ary,function(a,b){
        if(a>3){
            return null
        }else{
            return a
        }
});
console.log(aa);    //[1,2,3],4满足条件,返回空;

这里的aa是dom元素的,如果$(ary).map调用的话直接将类型转换jquery元素了;低版本浏览器会发生不兼容;标准调用方法是$.map(ary,function(){});

三、extend

扩展

$.extend(obj,obj1,obj2);将obj1和obj2扩展到obj中,一般obj是一个空对象{};

js
var obj3 = $.extend({},obj1,obj2)

深拷贝

复制地址和数据

原理:根据地址找到内容,并复制内容在堆中重新存储,返回新的地址;新的值修改的地址不影响旧的值;

js
var obj2 = $.extend(true,{},obj3)

默认是false(浅拷贝);true深拷贝;如果不用true相当于声明了两个变量(加载慢);如果用true就是拷贝;

js
var obj4 = {name:"zs"};
var obj6 = $.extend(true,{},obj4);
obj6.name = "ls";
console.log(obj6);    //ls
console.log(obj4);    //zs

浅拷贝(原生方法)

只复制地址,不复制数据;修改新变量的值,旧变量的值也一起修改了;

js
var obj4={name:"zs"};
var obj5=obj4;
obj5.name="ls";
console.log(obj5.name);        //ls
console.log(obj4.name);        //ls

原理:复制了obj4的地址,数据没有复制,所以修改了内容,obj4的地址也是那个内容,所以obj4就是obj5的内容;

四、方法

所有事件的调用:$("button").click(function(){});

直接去掉on;直接括号函数,

.index();元素的下标;

jquery选项卡

js
$("button").click(function(){
    $(".box div").eq($(this).index()).addClass("active").siblings("div").removeClass();
    $(this).addClass("on").siblings("button").removeClass();
})
//链式调用,可以一直写点,
//隐式循环,不用循环,隐式调用循环;

高频面试题

● $(document).ready() 方法和 window.onload 有什么区别?

● jQuery 的属性拷贝 (extend) 的实现原理是什么,如何实现深拷贝?

Released under the MIT License.