jq/1

Posted 2020-09-21 qianxiamo

1  jquery是什么

<1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理htmldocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

2  什么是jquery对象

Jquery对象是通过jquery包装DOM对象后产生的对象。Jquery对象是jquery独有的。如果一个对象是jquery对象，那么他就可以使用jquery里的方法。

 

var $variable = jq对象

var variable = DOM对象

 

jQuery转换成DOM对象:

$variable[0]

jquery的基础语法：

$(selector).action()

 

3  寻找元素（选择器和筛选器）

1  选择器

基本选择器
$("*")  $("#id")   $(".class")  $("element"元素名)  $(".class,p,div")
<p>p</p>
<p id="p2">pp</p>
<p class="p3">ppp</p>
<div>DIV</div>
<div class="outer">
    <p>ppp</p>
    <div class="inner">
    <p>pppp</p>
    </div>
</div>
<p>ppppppppp</p>
$("*").css("color","red") ; ##通配符
$("p").css("color","red"); ##根据标签查找
$("#p2").css("color","red");##根据id查找
$(".p3").css("color","red");##根据类名查找

层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div"只包括后面的标签)

$(".outer p").css("color","red");##后代

$(".outer+p").css("color","red");##毗邻

$(".outer~p").css("color","red");##兄弟

层级选择器

$(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div"只包括后面的标签)

$(".outer p").css("color","red");##后代

$(".outer+p").css("color","red");##毗邻

$(".outer~p").css("color","red");##兄弟

属性选择器

$(‘[id="div1"]‘)   $(‘["alex="sb"][id]‘)

<input type="text" alex="123">

<script src="jquery-3.2.1.js"></script>

<script>

    $("[alex]").css("color","red")##引用属性

</script>

表单选择器

$("[type=‘text‘]")----->$(":text")         注意只适用于input标签  : $("input:checked")

<input type="text" name="alex" value="123">

<script src="jquery-3.2.1.js"></script>

<script>

    $("[type=‘text‘]").css("color","red")

</script>

筛选器

过滤筛选器
$("li").eq(2)  $("li").first()  $("ul li").hasclass("test")
<ul>
    <li class="item active">111</li>
    <li class="item">222</li>
    <li class="item">333</li>
    <li class="item items">444</li>
    <li class="item">555</li>
</ul>
<div class="div1">
    <div class="div2">
        <p id="p1">ppp</p>
    </div>
    <p class="p2">pppppp</p>
    <a href=""></a>

</div>
<script src="jquery-3.2.1.js"></script>
<script>
$("li").eq(2).css("color","red") ##查找索引值为2的标签
var $res=$("li").hasClass("item");##判断li标签是否有类名item
    console.log($res)
>>true
</script>

查找筛选器
$("div").children(".test")     $("div").find(".test")  

<div class="div1">
    <div class="div2">
        <p id="p1">PPP</p>
    </div>
    <p class="p2">PPPPP</p>
    <a href="">click</a>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
   $(".div1").children(".p2").css("color","yellow");##查找类名为div1的孩子
    $(".div2").find("#p1").css("color","red")
 $(".test").next()    $(".test").nextAll()    $(".test").nextUntil()   ##同级下面

$(".div2").next(".p2").css("color","blue")
$("ul li").nextAll(".item").css("color","red")
 
$("div").prev()  $("div").prevAll()  $("div").prevUntil()   ##同级上面

$(".p2").prev("div").css("color","red")
                        
 $(".test").parent()  $(".test").parents()  $(".test").parentUntil()