浅谈jQuery基础选择器的简单使用(1)

清疚 2022-04-17 00:22 167阅读 0赞

## jQuery是javascript的库 ##

### 一、初识jQuery ###

##### jquery是由很多程序员编写的简写函数库 #####

###### 1、选择器 ######

var div=document.getElementByTagname("div")[0];//原生JS
    var div=$("div");//jquery

###### 2、事件机制 ######

div.addEventListener("div",clickhandler);
    function clickHandler(e){ 
    }//原生JS的点击事件
    div.on("click",{ a:1},function(e){ 
    });//jquery的点击事件

###### 3、AJAX ######

var xhr=new XMLHTTPRequest();
    xhr.addEventListener("load",loadHandler);
    xhr.open("POST","URl");
    xhr.send("a=1")//原生JS
    $.post("url","a=1",function(){ 
    });//jquery

## 二、基础选择符 ##

#### jQuery对象是一个类数组,不能使用数组的方法,不能使用DOM的方法和属性 ####

$()===jQuery();  //$===jQuery 都是函数，它也是构造函数，也是类，对象

$("div").text("a");
    console.log($("div"));//这是一个类数组

//jQuery对象.eq(index)获取到jQuery中某一个jQuery对象
    $("div").eq(0).text("a");
    console.log($("div").eq(0));

//这个就是jQuery对象转换成DOM对象的方法
    //通过jQuery[index]这种方法调用的结果就是DOM元素
    console.log($("div")[0]);
    $("div")[0].textContent="a";

//DOM对象的所有属性和方法不能在jQuery对象上使用,
    //同理jQuery的所有属性和方法,DOM中同样也不可以使用;
    //$(#id名)
    console.log($("#div0"));
    //$(.class名)
    $(".div").text("名字")

//放入文本
    $("#div0").text("内容");
    //放入HTML标签
    $("#div0").html("<div></div>");
    //设置多个样式
    $("#div0").css({ 
         color:"red",
         width:"100px"
    });

//侦听事件
    $("#div0").on("click",function(e){ 
          console.log(e);
    });
    $("#div0").on("click",clickHandler);
         //这种比较好,就一个函数
         //上面在循环的过程中会出现多个函数
    function clickHandler(e){ 
    
    }

## 三、进阶选择器 ##

<div>1
        <div class="div0">2</div>
        <div>3
            <div class="div0">4
                 <div>5</div>
            </div>
            <div>6</div>
        </div>
        <div>7</div>
    </div>
    
    <div>8
        <span class="div0">9</span>
    </div>  
    
    <nav>11
         <div class="div0">12</div>
    </nav>
    
    <script>
        //群组选择器 使用逗号分隔
        $("div,span").text("内容");
    
        //后代选择器
        $("div div").text("a");
        $(".div0"); //所有class名为div0的元素,4个
        $("div.div0").css("position","absolute");//所有div并且class名为div0的元素,三个
        $(div .div0).css("color","green");//class名为div0并且父元素是div的元素;
        
        通配符
        $("*")
        $("div *");//div下所有后代元素,不包含当前div;
        $("ul *,div *")
    </script>

## 四、高级选择符 ##

<div>1
        <div class="div0">2</div>
        <div>3
            <div class="div0">4
                <div>5</div>
            </div>
            <div>6</div>
        </div>
        <div>7</div>
    </div>
    <div>8
        <span class="div0">9</span>
    </div>
    <span>10</span>
    <nav>11
        <div class="div0">12</div>
        <span>13</span>
    </nav>
    <ul>
        <li></li>
        <li></li>
        <li class="li0"></li>
        <li></li>
        <li class="li1"></li>
        <li></li>
    </ul>
    <script>
        //子代选择器
        $("div>.div0")
        //相邻兄弟选择器
        $(".div0+div")
        console.log($(".div0+*"));
        //多个兄弟选择器
        console.log($(".div0~div"));
        
         $(".div0>div");
         $(".div0").find("div");//速度远快于上面,等同于$(".div0 div");
         $(".div0").children("div");//等同于$(".div0>div");
         console.log($("div").find(".div0"));
     //连缀
         //如果方法前是一个jQuery对象,我们这个方法就是对这个前面的对象起作用,
         //如果前面的不是jQuery对象,就会再向前找到第一个jQuery对象起作用;
         $(".div0").find("div").css("backgroundColor","red").text("abc").on("click",function(){ 
            console.log($(".div"))
         })
    
    $(".div0").next("div");//等同于$(".div+div");
    $(".div0").next().text("a");//等同于$(".div0+*");
    $(".li0").next().text("a");
    $(".li0").nextAll().text("a");//等同于$(".li0~*");
    $(".li0").nextAll(".li1").text("a");//等同于$(".li0~.li1");
    $(".li0").nextUntil(".li1").text("a");//从.li0标签向下找到.li1标签之间的内容,不包含.li1
    $(".li0").prev();//.li0向上一个元素;
    $(".li0").prev(".li1");//.li0向上一个元素是.li1的元素,如果没有就没有选中的;
    $(".li0").prevAll();//.li0向上所有的选择器;
    $(".li0").prevAll("div");//.li0向上所有哥哥是div的元素;
    $(".li0").prevUntil(".li1");//从.li0向上到.li1的所有元素,不包含li1;
    $(".li0").siblings().text("a");//从.li0的所有兄弟元素,也就是除了.li0以外的所有元素;
    $(".li0").siblings(".li1");//搜索.li0的兄弟元素中是.li1的元素;
    </script>

纯手工敲写  
如有错误  
请多多提醒,评论  
谢谢