JQuery学习---JQuery基础知识

JQuery介绍：

【参考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