我与JS的那些陈年旧事（三）

JQuery概述

• JQuery：JavaScript Query(Js查询)

它是一个轻量的, 免费开源的JS函数库, 能够极大的简化JS代码

• JQuery优势

(1)可以极大的简化JS代码

(2)可以像css一样获取页面元素

(3)可以操作CSS属性来控制页面的效果

(4)可以兼容常用的浏览器
在JS中少数内容在不同的浏览器中不兼容。比如：innerText、removeNode()、replaceNode()等在火狐中无法使用.

//在CSS中：
div{ background-color:red }
//在jQuery中：
$("div").css("background-color","red");

//在CSS中：
#d1{ background-color:red }
//在jQuery中：
$("#d1").css("background-color","red");

• 版本支持

1.x – 支持常用浏览器, 以及IE6+以上的版本

2.x – 支持常用浏览器, 以及IE9+以上的版本

3.x – 支持常用浏览器, 以及IE9+以上的版本


jQuery的缺点：jQuery的高版本不兼容低版本。这是因为jQuery在升级时除了会做一些内部优化之外，还会增加或删除一些方法。如果升级到高版本，可能会造成之前的部分代码无法执行!

• jQuery引入

jQuery函数库本身是一个js文件,所以引入jQuery和引入一个普通的JS文件一样

---

1.JQuery语法

• $符号

**等价JQuery**，调用()等价于调用jQuery(), 该函数会返回一个jQuery对象, 该对象包含了若干个html元素, 可以调用jQuery中提供的方法或属性来操作这些元素.

• 文档就绪事件

$(function(){...}) 等价于window.onload事件

$(function(){
   //在文档加载完后立即触发执行 
});

• JQuery对象与JS对象的相互转换

为什么需要相互转换

jQuery是js的简单框架, 在使用时通过$()可以返回一个jQuery对象, 可以通过jQuery提供的属性或方法来操作其中的内容, 但是, 不可以通过jQuery对象来调用js的属性或者js的方法. 反之, 也不可以通过JS对象来调用jQuery的属性或者jQuery方法， 否则调用会报错!!

    
    
    
    


    
Hello JQuery!

2.JQuery选择器

• 基本选择器

1.元素名选择器：根据元素的名称选中指定名称的元素

格式：$('元素名称')

//1、改变元素名为 
 的所有元素的背景色为 #FF69B4"  id="b1"
    /* 选中b1按钮,为b1按钮绑定点击事件 */
        $('#b1').click(function(){
            //css("属性名","属性值")
            $("div").css("background","#FF69B4"); 
        });

2.类选择器：根据元素的class属性,匹配所有class值相同的元素

格式：$('.class值')

//3、改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
    /* 选中b3按钮,为b3按钮绑定点击事件 */
        $('#b3').click(function(){
            $('.mini').css("background","#FF0033");
        });

3.ID选择器：根据元素的id属性值, 匹配具有特定id的元素

格式：$("#id值")

//2、改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
    /* 选中b2按钮,为b2按钮绑定点击事件 */
        $('#b2').click(function(){
            $('#one').css("background","#9ACD32");
        });

4.多元素选择器 :匹配多个选择器选中的元素

格式：$("选择器1,选择器2,…选择器n")

//4、改变所有的元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b4"
    /* 选中b4按钮,为b3按钮绑定点击事件 */
        $("#b4").click(function(){
            $("span,#two,#one,.mini").css("background-color", "#006400");
        });

• 层级选择器

1.后代选择器

格式:$("祖先元素 后代元素")

//1、改变 div 内所有 span 的背景色为 #FF0000" id="b1"
    /* 选中b1按钮,为b1按钮绑定点击事件 */
        $("#b1").click(function(){
            $("div span").css("background-color", "#FF0000");
        });

2.子元素选择器

格式：$("祖先元素>子元素")

//2、改变 body 内子 div 的背景色为 #D8C93B"  id="b2"
    /* 选中b2按钮,为b2按钮绑定点击事件 */
        $("#b2").click(function(){
            $("body>div").css("background-color","#D8C93B");
        });

3.相邻兄弟选择器

格式:$("大哥+小弟")

//3、改变 id 为 two 的下一个 div 的背景色为 #0000FF"  id="b3"
    /* 选中b3按钮,为b3按钮绑定点击事件 */
        $("#b3").click(function(){
            $("#two+div").css("background-color","#0000FF");
        });

4.$(“#two~div”)：匹配id为two元素后面所有的兄弟div元素

//4、改变 id 为 two 的元素后面的所有 div 兄弟元素的背景色为 #76AA0F"  id="b4"
    /* 选中b4按钮,为b4按钮绑定点击事件 */
        $("#b4").click(function(){
            $("#two~div").css("background-color","#76AA0F");
        });

5.一些方法

方法	相关描述
siblings()	返回所匹配元素的所有兄弟元素
next/prev	返回所匹配元素后面/前面紧邻的兄弟元素
nextAll/prevAll	返回所匹配元素后面/前面所有兄弟元素

//5、改变 id 为 two 的元素所有 div 兄弟元素的背景色为 #FF6347"  id="b5"
        $("#b5").click(function(){
            $("#two").siblings("div").css("background-color", "#FF6347");
        });

• 基本过滤选择器

(后面单独讲解过滤)

格式：==元素:过滤形式==

过滤	相关描述
$("div:first")	匹配所有div中的第一个div元素
$("div:last")	匹配所有div中的最后一个div元素
$("div:not(.one)")	匹配所有div中class值不为one的div元素
$("div:eq(3)")	匹配所有div中的索引值为3的div元素
$("div:lt(3)")	匹配所有div中的索引值小于3的div元素
$("div:gt(3)")	匹配所有div中的索引值大于3的div元素
$("div:even")	匹配所有div中的索引值为偶数的div元素
$("div:odd")	匹配所有div中的索引值为奇数的div元素

baseFilter.gif

/* ---------基本过滤选择器练习--------- */
$(function() {
        //1、改变第一个 div 元素的背景色为 #FF6347"  id="b1"
        $("#b1").click(function(){
            $("div:first").css("background-color","#FF6347");
            //$("div:eq(0)").css("background-color","#FF6347");
        });

        //2、改变最后一个 div 元素的背景色为 #9ACD32" id="b2" 
        $("#b2").click(function(){
            $("div:last").css("background-color", "#9ACD32");
        });
        
        //3、改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" 
        $("#b3").click(function(){
            $("div:not(.one)").css("background-color", "#FF0033");
        });

        //改变索引值等于 3 的 div 元素的背景色为 #006400"  id="b4" 
        $("#b4").click(function(){
            $("div:eq(3)").css("background-color", "#006400");
        });
    })

• 内容选择器

选择器	相关描述
:contains	匹配包含给定文本的元素
:empty	匹配所有不包含子元素或文本的空元素
:has	匹配含有选择器所匹配的元素的元素
:parent	匹配含有子元素或文本的元素
:parents	获取当前所匹配所有祖先元素

• 可见选择器

选择器	相关描述
:hidden	匹配所有不可见元素，或者type为hidden的元素
:visible	匹配所有的可见元素

content_visible_selector.gif

$(function() {
        /* ---------内容选择器--------- */
        //1、改变含有文本 'one' 的 div 元素的背景色为 #FF6347" id="b1"
        $('#b1').click(function() {
            $("div:contains('one')").css({
                background: '#FF6347'
            });
        });
        
        //2、改变div空元素(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
        $("#b2").click(function() {
            $("div:empty").css({
                background: '#9ACD32'
            });
        });

        //=================================
        /* ---------可见选择器练习--------- */
        //1、让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b3"
        $("#b3").click(function() {
            var $div = $("div:hidden");
            $div.show();
            $div.css({
                background: '#FF69B4'
            });
        });

        //2、改变所有可见 div 元素背景色为 #F08080" id="b4"
        $("#b4").click(function(){
            $("div:visible").css("background-color", "#F08080");
        });

    })

• 表单选择器

选择器	相关描述
:input	匹配所有 input, textarea, select 和 button 元素
:text	匹配所有的单行文本框
:password	匹配所有密码框
:radio	匹配所有单选按钮
:checkbox	匹配所有复选框
:submit	匹配所有提交按钮
:reset	匹配所有重置按钮
:image	匹配所有图像域
:checked	匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
:disabled	匹配所有不可用元素
:selected	匹配所有选中的option元素

form_selector.gif

$(function() {
        /* ---------表单选择器练习--------- */
        //1、打印所有的 :input 元素 id="b1"
        /* :input元素可以选中所有的表单项元素(input、select、textarea) */
        $("#b1").click(function(){
            $(":input").each(function(){
                console.log( this );
            });
        });
        
        //2、打印所有的 :password 元素" id="b2"
        /* :password 匹配所有的密码输入框 */
        $("#b2").click(function(){
            $(":password").each(function(){
                console.log(this);
            });
        });

        //3、打印所有的 :radio 元素" id="b3"
        /* :radio 匹配所有的单选框 */
        $("#b3").click(function(){
            $(":radio").each(function(){
                console.log(this);
            });
        });
        
        //4、打印所有的 :checked 元素" id="b4"
        /* :checked 匹配所有被选中的单选框、复选框、option选项
         * :selected 匹配所有被选中option选项
         */
        $("#b4").click(function(){
            $(":checked").each(function(){
                console.log( this );
            });
            /*$("input:checked").each(function(){
                console.log( this );
            });*/
            /*$("input[type='radio']:checked").each(function(){
                console.log( this );
            });*/
            /*$("input[type='checkbox']:checked").each(function(){
                console.log( this );
            });*/
        });
    })