JQuery学习---JQuery基础知识

时间：2023-03-09 15:04:00
JQuery学习---JQuery基础知识

JQuery介绍：

【官网】http://jquery.com

【参考API】http://jquery.cuishifeng.cn/

JQuery的低版本支持IE低版本，JQuery的2版本不太支持IE的低版本，推荐用1版本的最高1.12

- 找元素（直接，间接）

- 操作   （属性..）

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

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

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

JQuery对象:  jQuery = $

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。

jQuery 对象是 jQuery 独有的. jQuery 对象可以使用 jQuery 里的方法: $(“#test”).html();

比如： $("#test").html()   意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

注意： 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法

同理DOM对象也不能使用jQuery里的方法.乱使用会报错

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.

var $variable = jQuery 对象

var variable = DOM 对象

基本语法：$(selector).action() 

选择器

基本选择器  $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")

层级选择器  $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")

基本筛选器  $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")

属性选择器  $('[id="div1"]')   $('["alex="sb"][id]')

表单选择器  $("[type='text']")----->$(":text") 注意只适用于input中type属性

$("input :checked")      // 注意input标签和checked属性直接有一个空格

基本选择器 + 层级选择器 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<body>

    <div>hello div</div>

    <div class="div1">hello div1</div>

    <p>hello p</p>

    <p id="p1">hello p1</p>

<!-- --------------------------------------------------- -->

    <div class="outer">

        <div class="inner">

            <p>hello p2</p>

        </div>

        <p>hello p3</p>

    </div>

    <p>毗邻标签</p>

</body>

</html>

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

<script>

    //基本选择器

    $("div").css("color","red");                // 标签选择器

//    $("div").css("color","red").css("background-color","yellow");  //JQuery支持级联样式

    $("*").css("background-color","yellow");    // 全局选择器

    $("#p1").css("color","blue");               // id选择器

    $(".div1").css("color","green")             // 类选择器

    //组合选择器

    $(".outer p").css("color","purple") ; //后代选择器，符合名字的后代都显示该样式

    $(".outer>p").css("color","purple") ; //子代选择器，只在子代显示该样式

    $(".outer+p").css("color","purple") ; //毗邻选择器，只在紧挨着outer元素的p子代显示该样式

    $(".outer~p").css("color","purple") ; //subling选择器，只向下找子代的p标签显示该样式

</script>

基本筛选器 + 属性选择器 + 表单选择器 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<body>

    <div class="div1">hello div1

        <ul>

            <li>1111</li>

            <li>2222</li>

            <li>3333</li>

            <li>4444</li>

        </ul>

    </div>

    <p school="peking">清华大学</p>

    <p school="beijing">北京大学</p>

    <input type="text">

    <input type="button">

</body>

</html>

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

<script>

    //基本筛选器，采用冒号

    $(".div1 li:first").css("color","red");    //取出li的第一个元素

    $(".div1 li:eq(1)").css("color","green");  //取出li的第2个元素[索引从0开始]

    $(".div1 li:last").css("color","blue");    //取出li的最后一个元素

    $(".div1 li:even").css("color","red");     //数组下标的偶数位变红色

    //属性选择器,中括号

    $("[school]").css("color","orange");       //此时school属性的所有的颜色都变了

    $("[school='beijing']").css("color","palegreen");  //给特定的北京大学变浅绿色

    // 表单选择器，中括号利用type标识

    $("[type='text']").css("height","12px");

    //另一种形式来表达，且只能用于input中type属性

    $(":button").css("width","55px");

    $("input: checked")   // 注意空格

</script>

筛选器

过滤筛选器
                    $("li").eq(2)  $("li").first()  $("ul li").hasclass("test")【返回boolean值，有则true】
      查找筛选器
                    $("div").children(".test")    $("div").find(".test") 
                    $(".test").next()    $(".test").nextAll()   $(".test").nextUntil()
                    $("div").prev()  $("div").prevAll()  $("div").prevUntil()
                    $(".test").parent()  $(".test").parents()  $(".test").parentUntil()
                    $("div").siblings()

$("div").children(".test")    $("div").find(".test")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<body>

    <div class="div1">hello div1

        <div class="div5">div5</div>

        <div class="div15">div15</div>

        <div class="div2">hello div2

            <div class="div3">hello div3</div>

            <div class="div4">hello grandson div4</div>

        </div>

        <div class="div4">hello uncle div4

            <div class="div7">div7</div>  <!-- 父子继承，会继承父类颜色 -->

        </div>

        <div class="div6">div6</div>

        <div class="div8">div8</div>

    </div>

</body>

</html>

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

<script>

        // childer: 只找儿子辈；  find：所有后代内查找

//    $(".div1").children().css("color","red")  // 不添加限定的，查找所有元素，div2, div3, grandson div4变色

//    $(".div1").children(".div4").css("color","green")  // 添加了限定只找儿子辈的div4变色，uncle div4变色

//    $(".div1").find(".div4").css("color","blue");  // 查找div1下所有div4的标签grandson div4, uncle div4变蓝色，

</script>

$(".test").next()    $(".test").nextAll()   $(".test").nextUntil()  +  $("div").prev()  $("div").prevAll()  $("div").prevUntil() 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<body>

    <div class="div1">hello div1

        <div class="div5">div5</div>

        <div class="div15">div15</div>

        <div class="div2">hello div2

            <div class="div3">hello div3</div>

            <div class="div4">hello grandson div4</div>

        </div>

        <div class="div4">hello uncle div4

            <div class="div7">div7</div>  <!-- 父子继承，会继承父类颜色 -->

        </div>

        <div class="div6">div6</div>

        <div class="div8">div8</div>

    </div>

</body>

</html>

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

<script>

//    $(".div2").next().css("color","palegreen");     // 找到了div2下一个div4以及子类div7

//    $(".div2").nextAll().css("color","red");        // 找到了div2下面所有类div4以及子类div7,div6

//    $(".div2").nextUntil(".div6").css("color","red");  // 从div2找到div6之前的元素，div4以及子类div7

//    $(".div2").prev().css("color","green")             // 找到div2上面一个元素，div5

//    $(".div2").prevAll().css("color","red")             // 找到div2上所有元素，div5，div15

//    $(".div2").prevUntil(".div5").css("color","yellow") // 从找到div2向上找到div5之前的所有元素，div15

</script>

$(".test").parent()  $(".test").parents()  $(".test").parentUntil()  +  $("div").siblings() 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

<body>

    <div class="div1">hello div1

        <div class="div5">div5</div>

        <div class="div15">div15</div>

        <div class="div2">hello div2

            <div class="div3">hello div3</div>

            <div class="div4">hello grandson div4</div>

        </div>

        <div class="div4">hello uncle div4

            <div class="div7">div7</div>  <!-- 父子继承，会继承父类颜色 -->

        </div>

        <div class="div6">div6</div>

        <div class="div8">div8</div>

    </div>

</body>

</html>

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

<script>

//    $(".div2").parent().css("color","red");      // 找到div1的父类后，又因为子类继承了父类，所以颜色全部变红

//    $(".div2").parents().css("color","yellow")    //这里的parsents是一个集合，一直向上找，找到body,子类继承父类

//    $(".div2").parentsUntil("body").css("color","blue") // 一直向上找到body之前的元素

   $(".div2").siblings().css("color","red"); // 向上和向下找兄弟类，div5，div15，hello uncle div4，div7，div6，div8变色

</script>

实例演示：

【更多参考】http://www.cnblogs.com/yuanchenqi/articles/5663118.html

相关文章