前端小白必备资料之jQuery(一)

jQuery选择器

选中所有的div标签

$("div")

选中某一个div标签

$("div").eq(0)

给某一个div标签添加文本和CSS样式

    $("div").eq(0).text("你好").css("color","red");

jQuery中不能使用DOM操作方法

    $("div").style.color="red";//错误
    $("div").addEventListener("click",clickHandler);//错误

将jQuery对象中某个元素转换为DOM对象

    console.log($("div")[0]);
    console.log($("div").get(0));

将jQuery转换DOM数组

    console.log(Array.from($("div")));

既然可以将jQuery转为DOM就可以将DOM转为jQuery对象
将DOM转换为jQuery

    var div=document.createElement("div");
    console.log($(div));

将列表转换为jQuery对象

    var list=$(document.getElementsByTagName("div"));
    console.log(list);

后代选择器

    $("div.div1");
    $("div .div1");//div后面加不加空格都一样
    $("div *");//所有后代 如果不加*号那么将选择不到div的后代 但是子代选择器不一样 后面会有
    $("ul").find('a');//等同后代选择器

子代选择器

    $("ul>li");
    $("ul>*");
    $("ul>");//虽然后面没有东西 但是相当于后面有*
    $("ul").children("li");
    $("ul").children().length);//子元素数量

相邻兄弟选择器

    $("div+ul");
    $("div+");
    $("div").next("ul");//等同于+

所有兄弟选择器

    $("div~ul");
    $("div~");
    $("div").nextAll("ul");//等同于~
    $(".div0").nextUntil(".div1")//从前面的元素向下查找 直到后面的元素 不包含前后两个元素
    $(".div1").prev();//向上选择相邻一个元素
    $(".div1").prevAll();//向上选择所有的兄弟元素
    $(".div1").prevUntil(".div0");//向上选择到某个选择器结束

根据属性名选择

    $("[name]");//选择属性名name的元素
    $("div[name]");//选择属性名name的div元素
    $("input[name=age]");//选择属性名name=age的input元素
    $("input[name!=age]");//选择属性名name不等于age的input元素
    $("input[name^=a]");//选择属性名name的值是以a字母起头的input元素
    $("input[name$=a]");//选择属性名name的值是以a字母结束的input元素
    $("input[name*=a]");//选择属性名name的值当中包含a字母的input元素

    $("div[abc|=a]").text("aaaa");//|就是属性值中以a起头后面紧跟-或者值就是a
    $("div[class~=div3]")//~就是属性值都是一组用空格分离值，包含当前这个div3或者就是div3
    // 用于class

jQuery过滤器

选择li列表中的第一个li并给他设置颜色

    $("li").first().css("color","red");
    $("li:first").css("color","red");

将每个li的父元素的第一个子元素是li的设置为红色

    $("li:first-child").css("color","red");//查找父元素中的第一个元素 如果这个元素是li的话，那么就给这个元素设置css 否则的话就结束
    $("li:first-of-type").css("color","red");//查找父元素下的第一个li元素 如果第一个不是li的话 那么就向下查找直到找到第一个为li的为止

将每个li的父元素的最后一个子元素是li的设置为红色

    $("li:last").css("color","red");
    $("li:last-child").css("color","red");
    $("li:last-of-type").css("color","red");

nth-child() 选择器

    $("li:nth-child(1)").css("color","red");//$("li:first-child")给第一个li元素添加样式
    $("li:nth-of-type(1)").css("color","red");//$("li:first-of-type") 给第一个类型为li的元素添加样式

    $("li:nth-child(2n)");//偶数
    $("li:nth-of-type(2n)");//偶数
    $("li:nth-child(2n-1)");//奇数
    $("li:nth-of-type(2n-1)");//奇数

    $("li:nth-child(even)");//偶数
    $("li:nth-of-type(even)");//偶数
    $("li:nth-child(odd)");//奇数
    $("li:nth-of-type(odd)");//奇数
    $("li:only-child").css("color","red")//仅有一个子元素的
    // 选择不是什么的
    $("li:not(.li1)").css("color","red");
    $("li").not(".li1")

其他规则选择器

// 下标从0开始
    $("li:eq(1)").css("color","red");
    $("li").eq(1).css("color","red");
    //li列表中索引大于2的
    $("li:gt(2)").css("color","red");
    //li列表中索引小于2的
    $("li:lt(2)").css("color","red");

    //从第二个到第五个之间li
    $("li").slice(2,5).css("color","red");
    $(".li1").siblings();//所有兄弟
    $(":header");//h1-h6
    $(":animated");//animation动画
    $(":focus");//当前汇聚焦距的元素
    $(":empty");//没有内容或者没有子元素的标签
    $(":contains(6)")//获取后代元素中包含有6字符的所有元素

    //有后代或者子元素或者内容的元素
    $("li:parent")

    //查找到所有包含li1的父元素
    $(":has(.li1)")  
        
    $(".li1").parent();//找到这个li1的父元素
    $(".li1").parents();//找到这个li1的所有父元素
    $(".li1").parentsUntil("body");//找到这个li1的所有父元素到body为止

    $(":hidden");//仅接受display:none
    $(":visible");//所有可见元素

特殊选择器

    //特殊  都返回布尔值，后面不能使用连缀
    //hasClass仅能判断元素中包含这个class是li1的元素
    $("li").hasClass("li1")

    //可以判断class也可以判断id，属性。。。
    $("li").is(".li1")
    $("li").is("#li1")

jQuery遍历

这个没什么说的直接上代码

    var arr=[1,2,3,4];
    $.each(arr,function(index,item){
        console.log(index,item);
    })
    //$.each 里面匿名函数的第一个参数为索引第二个参数为当前对象

    var data={
            a:1,
            b:2,
            c:3
            }

    $.each(data,function(prop,value){
        console.log(prop,value);
      }) //遍历内容为key值和value值

    $("div").each(function(index,item){
    $(item).html("<a href='#'>"+index+"</a>")
        }) //给每一个div中添加a标签

html text val

$("div").html("<a href='#'>aaa</a>");
console.log($("div").html());//获取，仅能获取到第一个元素的html内容
$("div").eq(1).html("<a href='#'>aaaa</a>");

将数组中的内容添加到html当中去

    var arr=[
        {site:"腾讯",url:"http://www.qq.com"},
        {site:"网易",url:"http://www.163.com"},
        {site:"淘宝",url:"http://www.taobao.com"},
        {site:"百度",url:"http://www.baidu.com"},
        {site:"京东",url:"http://www.jd.com"},
            ];
    $("div").html(function(index,item){
        return `<a href='${arr[index].url}'>${arr[index].site}</a>`
            })

更改div中的文本

    $("div").text(function(index){
        return index+1;
        })

更改value值

    $("input").val("你好");
    console.log($("input").val());//仅获取到第一个元素
    $("input").val(function(index){
        return index;//return的值就是添加的value值
            })