jQuery

Posted 2021-01-01 kkyl

一.jQuery简介
    1.1.什么是jQuery?
        jQuery是一个轻量的、免费开源的js函数库，极大简化了javascript代码。

    1.2.jQuery的优势:
        简化了JavaScript代码
        可以像css那样访问DOM
        可以修改css控制页面样式
        可以兼容常用的浏览器
        
    1.3.jQuery版本支持:
        jQuery分为很多版本，也分为压缩版和未压缩版，选择需要的版本进行下载
        1.x --- IE6+
        2.x --- IE9+
        3.x --- IE9+
        
        注意: jQuery不兼容老版本. jQuery升级除了会做一些内部优化之外, 还会删除或者添加一些新的方法, 所以升级之后, 以前的部分代码可能会无法执行!

    1.4.jQuery引入
        引入jQuery：
            <script src="jquery-1.4.2.min.js"></script>

======================================================
二.jQuery语法
    2.1.$介绍
        $是jQuery中jQuery函数的简写形式
        参见源码: window.jQuery = window.$ = jQuery;
        使用$()相当于调用了jQuery()函数, 该函数会返回一个jQuery对象, 该对象中包含一个或多个DOM元素. 可以通过jQuery上提供方法, 对这些元素进行操作.
        
    2.2.文档就绪事件
        $(document).ready(function(){
            // ...
        });
        ready()函数在html文档加载后立即执行
        其作用相当于: window.onload = function(){//...}
        其简写形式:
            $(function(){
                // ....
            });
    
    2.3.DOM对象和jQuery对象互相转化
        JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象!!
        2.3.1.dom对象转jQuery对象:
            var dom = document.getElementById("username");
            alert(dom.value);//获取用户名
            var $jquery = $(dom);//dom对象转jquery对象
            alert($jquery.val());//获取用户名
            
        2.3.2.jQuery对象转dom对象:
            var $jquery = $("#username");
            alert($jquery.val());//获取用户名
            var dom1 = $jquery.get(0);
            alert(dom1.value);//获取用户名
            var dom2 = $jquery[0];
            alert(dom2.value);//获取用户名

======================================================
三.jQuery选择器
    3.1.基本选择器：
        3.1.1.元素选择器:
            格式: $("元素名称")    
            如: $("p") 匹配所有的p元素
        3.1.2.类选择器:
            格式: $(".class值")    
            如: $(".c1") 匹配所有class值为c1的元素
        3.1.3.ID选择器:
            格式: $("#id值")    
            如: $("#d1") 匹配id值为d1的元素
        3.1.4.*号通配符: $("*") 匹配所有元素

        3.1.5.多条件选择器:
            格式: $("选择器1, 选择器2, ...")
            如: $("span, div, p") 匹配所有的span、div、p元素
    
    3.2.层级选择器：
        $("祖先 后代")    匹配祖先元素内部的所有后代元素
            如: $("div span") 匹配div下所有的span元素(span子孙元素)
            
        $("父类 > 子类") 获得父元素内部所有的子元素
            如: $("div>span") 匹配div下所有的span子元素
        $("元素A+元素B") 匹配A元素后紧邻的B元素
            如: $("div+span") 匹配div后紧邻的兄弟span元素

        $("元素A~元素B") 匹配A元素后所有的兄弟元素
            如: $("div~span") 匹配div后所有的兄弟span元素

    3.3.基本过滤选择器：
        :first        匹配第一个
            如: $("div:first") 匹配所有div中的第一个
        :last        匹配最后一个        //火狐浏览器 不支持
            如: $("div:last") 匹配所有div中的最后一个
        :not    匹配除什么之外的    
            如: $("div:not(.one)") 匹配所有div中的class不为one的div
        :eq(n)        匹配下标为n的元素
            如: $("div:eq(n)") 匹配所有div中索引值为n的元素
        :lt(n)        匹配下标小于n的元素
            如: $("div:lt(n)") 匹配所有div中索引值小于n的元素
        ...
    3.4.内容选择器：
        $("div:contains(‘bbb‘)")    匹配包含指定文本的元素
            如: $("div:contains(‘bbb‘)") 匹配所有div中包含指定内容的div元素
            结果: <div>aaabbbcccc</div>
        $("td:empty")                匹配不包含任何内容的元素
            如: $("div:empty") 匹配所有没有内容的div元素
        ...
    3.5.可见选择器：
        $("div:hidden") 匹配所有不可见的div元素
        $("div:visible") 匹配所有可见的div元素
        
    3.6.属性选择器：
        $("div[id]")        匹配所有包含id属性的div元素
        $("div[id=‘d1‘]")    匹配所有包含id属性, 并且属性值为‘d1‘的div元素
        $("div[id!=‘d1‘]")    匹配所有包含id属性, 并且属性值不为‘d1‘的div元素
        
    3.7.子元素选择器：
        $("div:nth-child(n)") 匹配div下第n个子元素
        $("div:first-child") 匹配div下第一个子元素
        $("div:last-child") 匹配div下最后一个子元素
        $("div:only-child") 匹配div下唯一的一个子元素
        ...
    3.8.表单选择器：
        $(":input")        匹配所有的input元素、select、textarea等元素
        $(":password")    匹配所有的密码框
        $(":radio")        匹配所有的单选按钮
        $(":checkbox")    匹配所有的复选框
        $(":checked")    匹配所有被选中的单选框/复选框/option元素
        $(":selected")    匹配所有被选中的option元素
        
======================================================
四.文档操作
    parent() -- 如: $("div").parent() 匹配所有div的父元素
    parents() -- 如: $("div").parents() 匹配所有div的父辈元素
    find() -- 如: $("div").find("span") 匹配div下所有的span元素
    next()
        -- 如: $("div").next() 匹配div后的相邻的兄弟元素
        -- 如: $("div").next("input") 匹配div后的相邻的input兄弟元素
    nextAll()
        -- 如: $("div").nextAll() 匹配div后的所有兄弟元素
        -- 如: $("div").nextAll("div") 匹配div后的所有div兄弟元素
    pre()
        -- 如: $("div").pre() 匹配div前一个相邻的兄弟元素
        -- 如: $("div").pre("input") 匹配div前一个相邻的input兄弟元素
    preAll()
        -- 如: $("div").preAll() 匹配div前面的所有兄弟元素
        -- 如: $("div").preAll("div") 匹配div前面的所有div兄弟元素
        
    siblings()
        -- 如: $("div").siblings() 匹配div前后所有的兄弟元素
        -- 如: $("div").siblings("div") 匹配div前后所有的div兄弟元素

    css()
        -- 如: $("div").css("width") 获取所有匹配元素中的第一个div元素的width的值
        -- 如: $("div").css("width", "200px") 设置所有匹配元素width的值为200px
        -- 如: $("div").css({"width":"200px", "height":"200px", "color":"red"})为所有匹配元素设置css属性

    html()
        -- 如: $("div").html()  获取所匹配元素的html内容
        -- 如: $("div").html("xxxx") 设置所匹配元素的html内容
    text()
        -- 如: $("div").text()  获取所匹配元素的文本内容
        -- 如: $("div").text("xxxx") 设置所匹配元素的文本内容
    attr()
        -- 如: $("div").attr("id"); 获取所匹配元素的id属性的值
        -- 如: $("div").attr("id", "d1"); 设置所匹配元素的id属性的值为d1

======================================================
五.事件
    5.1.click()
        $("xxx").click(function(){}) -- 为匹配的所有元素绑定点击事件, 在所匹配元素被点击之后立即触发
    5.2.blur()
        $("xxx").blur(function(){}) -- 为匹配的所有元素绑定失去焦点事件, 在所匹配元素失去输入焦点时触发
    5.3.focus()
        $("xxx").focus(function(){}) -- 为匹配的所有元素绑定获得焦点事件, 在所匹配元素获得输入焦点时触发
    5.4.change()
        $("xxx").change(function(){}) -- 为匹配的所有下拉选绑定选项切换事件, 在下拉选框切换选项时触发

    5.5.ready()
        -- 文档就绪事件, 在整个html加载完成之后立即触发执行
        如: $(document).ready(function(){...})
        简写形式为 $(function(){...})

======================================================    
六.效果
    6.1.show()
        $("xxx").show() -- 将匹配的所有元素由隐藏设置为显示
        
    6.2.hide()
        $("xxx").hide() -- 将匹配的所有元素由显示设置为隐藏
        
    6.3.toggle()
        $("xxx").toggle() -- 切换所匹配元素的可见状态, 如果显示则隐藏, 如果隐藏则显示.