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

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>

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