javaScriptJQ

JQ常用选择器

基本选择器

                $("#div")   => id为div
                $(".div")   => class为div
                $("div")    => 标签为div
                $("*")      => 所有的

层级选择器

                $("div span")       => 获取div后面的所有后代
                $("div>span")       => 获取div里面的子元素
                $("div+span")       => 获取div紧跟着的span
                $("div~span")       => 获取div后面所有的span

过滤选择器

                $("li:first")       => 获取所有li当中第一个
                $("li:last")        => 获取所有li当中最后一个
                $("li:eq(n)")       => 获取li当中下标为n的那个元素 下标从0开始
                $("li:not(n)")      => 获取li当中下标不为n的那个元素 下标从0开始
                $("li:even")        => 获取所有li当中下标为偶数的 下标从0开始
                $("li:odd")         => 获取所有li当中下标为奇数的 下标从0开始
                $("li:lt(n)")       => 获取所有li当中下标小于n的 下标从0开始
                $("li:gt(n)")       => 获取所有li当中下标大于n的 下标从0开始                   

可见选择器

    			$("li:visible")     => 获取所有可见的元素
                $("li:hidden")      => 获取所有隐藏的元素
                可见方法
                    $("li:visibel").hide();
                    $("li:hidden").show();
                    $("li").toggle() //切换 ,如果是隐藏就显示,如果显示就隐藏       

属性选择器

                $("div[id]")			匹配属性有id
                $("div[id=i1]")			匹配所有div中属性为id,id值为i1
                $("div[id!=i1]")		匹配所有div中属性为id,id值不为i1
                $("div[id^=i]") 		匹配所有div中属性为id,id值以i开头
                $("div[id$=i]")  		匹配所有div中属性为id,id值以i结尾
                $("div[id*=i]")			匹配所有div中属性为id,id值包含i

筛选选择器

				//获取父元素
				 $("li:eq(2)").parent().css("background","red")
				//获取所有父元素
				 $("li:eq(2)").parents().css("background","red")
				//获取上一个同级元素
				 $("li:eq(1)").prev().css("background","red")
				//获取下一个同级元素
				$("li:eq(2)").next().css("background","red")
				//获取同级所有上面的元素
				$("li:eq(4)").prevAll().css("background","red")
				//获取同级所有下面的元素
				$("li:eq(2)").nextAll().css("background","red")
				//获取除了它自身以外的所有同级元素
				$("li:eq(2)").siblings().css("background","red")
				//获取子元素
				$("ul").find("li").css("background","red")

JS与JQ互相转换

JQ转JS

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

JS转JQ

 let d = $(div)
 console.log(d);

JQ操作属性

操作原生属性

设置属性（有则修改，无则添加）

$("div").prop("id","mode")

删除属性

$("div").removeAttr("id")

操作自定义属性

设置属性（有则修改，无则添加）

$("div").attr("data-mod","123")

JQ操作类名

1. 添加

$("div").addClass("box")

3. 删除

 $("div").removeClass("box")

5. 切换

$("div").toggleClass("red")

JQ操作样式

单个操作

 $("div").css("color","red")

批量操作

  $("div").css({
		"color":'red',
	  	"width":"100px",
	 	"height":"100px"
 })

JQ操作元素

操作DOM父元素
追加到末尾

 let li = $("<li></li>")
 li.html("Box")
 // 将元素追加到最后面 
$("ul").append(li1)

追加到末尾

let li = $("<li></li>")
li.text("box)
li.appendTo("ul")

插入第一个子元素前面

let li = $("<li>box</li>")
li.prependTo($("ul"))

JQ克隆

html

 <ul>
        <li>第1个</li>
        <li>第2个</li>
        <li id="ii">第3个</li>
        <li>第4个</li>
        <li>第5个</li>
        <li>第6个</li>
        <li>第7个</li>
        <li>第8个</li>
        <li>第9个</li>
        <li>第10个</li>
    </ul>

单个替换（replaceWith）

let newli = $("<li>您好</li>")
$("li:eq(7)").replaceWith(newli)

全部替换(replaceAll)

let newli = $("<li>您好呀</li>")
$(newli).replaceAll($("li")

克隆（clone）
普通克隆不能克隆事件

 let ul = $("ul").clone()
 $("body").append(ul)

clone(true)
可以克隆事件

let ul = $("ul").clone(true)

获取元素的位置

html代码

<div class="box">
	<p>我是一个端落</p>
</div>

        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 80px;
            position: relative;
            top: 20px;
            left: 20px;
        }
        .box p{
            width: 50px;
            height: 50px;
            background-color: springgreen;

            position: absolute;
            left: 40px;
            top: 40px;
        }

        button{
            position: fixed;
            top: 200px;
            left: 200px;
        }

        body{
            height: 3000px;
            width: 4000px;
        }

1. offset:获取元素的偏移量，参照物是当前视口，只对可见元素有效

$(".box").offset()

2. position：获取元素的定位

$(".box p").position()

3. scrollTop：获取卷出的高度

$(this).scroll(function(){
    console.log($(window).scrollTop());
    console.log($(document).scrollTop());
})

获取元素的尺寸

innerWidth() => 获取元素的 内容+内边距的宽
innerHeight() => 获取元素的 内容+内边距的高
innerWidth(500) => 设置元素的宽 => 内容+内边距
innerHeight(500) =
设置元素的高 => 内容+内边距

outerWidth => 获取元素的 内容+内边距+边框的宽
outerHeight => 获取元素的 内容+内边距+边框的高

outerWidth(true) => 获取元素的 内容+内边距+边框+外边距 的宽 outerHeight(true) =>
获取元素的 内容+内边距+边框+外边距 的高

JQ自定义动画

自定义动画从参数

参数一：动画的对象
参数二：动画的过渡时间
参数三：动画的效果
参数四：动画结束时执行的函数

<div class="a">我是一个div</div>

 *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }

       $(".a").animate({
            width:"1000px",
            "height":"1000px",
            color:'#fff',
            "font-size":"99px"
        },1000,"linear",function(){
            console.log("执行完毕之后运行这个函数");
        });