jQuery核心函数+选择器

框架：提高开发效率（减少代码量），性能降低

jQuery:是一个脚本框架，是一个快速、简洁的JavaScript框架；

        设计宗旨是“write Less,Do More”（链式编程）obj.m1().m2().m3()......

        Js:提供丰富的页面效果===>人机交互  富客户端技术

        jQuery主要目的：操作html、css

        jQuery只是一个JavaScript框架，他的功能没有JavaScript强大，以后的开发中，如果jQuery不能满足需求，那么需要退到JavaScript操作【jQuery提供了与DOM之间的转化】。如果JavaScript也不能满足需求，就说明脚本解决不了此问题。

        jQuery提高开发效率，可以屏蔽底层浏览器的差异（版本）问题。

1、核心函数：是 jQuery 的基础语法，也是 jQuery 提供其它功能的平台

                页面onload 函数：jQuery(callback)

                查找指定对象：jQuery(expression, [context])

                Dom 对象转换 jQuery对象：jQuery(elements)

                html 转换 jQuery对象：jQuery(html, [ownerDocument])

jQuery() 可以直接使用 $() 取代：

	//页面加载完毕后 执行，三个代码没有任何区别，进行了简写
	jQuery(document).ready(function () {
	    alert("111");
	});
	//jQuery简写成$
	$(document).ready(function () {
	    alert("222");
	});
	//再继续简化
	$(function () {
	    alert("3333");
	});

jQuery对象无法使用 DOM对象属性方法，DOM对象也无法使用 jQuery对象属性方法

	<script>
	    //DOM操作，DOM对象无法使用jQuery对象属性方法.html("")
	    function clickDIV() {
	        document.getElementById("mydiv").innerHTML="您好！";
	        // $("#mydiv").innerHTML="您好！";
	    }
	    //jQuery操作，jQuery对象无法适用DOM对象属性方法.innerHTML=""
	    function clickDIV2() {
	        $("#mydiv").html("您好1！");
	        // document.getElementById("mydiv").html("您好1！")
	    }
	</script>

对象互换：

DOM 对象转换为 jQuery对象：

        只需要用$()将 DOM对象包装起来，就可以获得 jQuery对象 ---  $(DOM对象)

        var variable = document.getElementById(“mydiv”); // DOM对象

        var $variable = $(variable);  // jQuery对象

jQuery 对象转换为 DOM对象：

        通过两种方式转换 [index] 和 get(index)

        $variable = $(“#mydiv”); // jQuery对象

        方式一：var variable = $variable[0]; // DOM对象

        方式二：var variable = $variable.get(0); // DOM对象

    $("#mydiv").get(0).innerHTML="您好！";
	$(document.getElementById("mydiv")).html("您好1！");

注：如果jQuery对象能够满足需求，使用jQuery对象进行操作；如果jQuery不能满足需求，那么使用DOM 对象。

2、jQuery选择器：预先操作，必先选中

        是jQuery的根基,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器

        jQuery 内部提供了 9 种选择器，

基本选择器：是 jquery所有选择器的基础，通过元素的id属性、class属性、标签名称进行选择

#id：根据id属性查找一个元素  例如：$(“#mydiv")

.class：根据class属性查找元素 例如：$(".myClass");

element：根据元素标签名称查找所有元素  例如： $("div");

*：匹配所有元素 例如 $("*");

selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回

    // 基本选择器    
    <script TYPE="text/javascript">
        $(function () {
            //通过each() 在每个div元素前 加入 “欢迎光临"
            $("div").each(function () {
                this.innerHTML="欢迎光临"+this.innerHTML;
            })

            // 通过size()方法 / length 打印页面中 class属性为 one 的元素数量
            // alert($("div").size());
            alert($(".one").length);

            // 通过index()  打印 id属性为foo 的div标签 是页面内的第几个div标签
            alert($("div").index($("#foo")));
        })
    </script>

层次选择器：是根据DOM元素的层级关系，通过后代元素、子元素、兄弟元素进行选择

ancestor descendant：获取ancestor元素下边的所有元素  $("form input")

parent > child：获取parent元素下边的所有直接child 子元素  $("form > input")

prev + next：获取紧随pre元素的后一个兄弟元素 $("label + input")

prev ~ siblings：获取pre元素后边的所有兄弟元素 $("form ~ input")

    // 层次选择器    
    <script type="text/javascript">
        $(function () {
            //将class属性值为one的元素下所有a元素字体变为红色
            $(".one a").attr("style","color:red");

            //将class属性值为one的元素下直接a元素字体变为蓝色
            $(".one > a").css("color","blue");

            // 将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
            $(".one ~ a").css({color:'yellow','font-size':'30px'});
        })
    </script>

过滤选择器：是对基本选择器和层次选择器的结果进行过滤，通过 ":" 添加过滤条件；过滤选择器被分为七类：

 基本过滤选择器：

:first  选取第一个元素 $("tr:first")

:last   选取最后一个元素 $("tr:last")

:not(selector)  去除所有与给定选择器匹配的元素 $("input:not(:checked)")

:even  选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even")

:odd  选取所有元素中奇数索引的元素 ，从 0 开始计数 $("tr:odd")

:eq(index) 选取指定索引的元素  $("tr:eq(1)")

:gt(index)  选取索引大于指定index的元素  $("tr:gt(0)")

:lt(index)   选取索引小于指定index的元素  $("tr:lt(2)")

:header  选取所有的标题元素  如：h1, h2, h3   $(":header")

:animated  匹配所有正在执行动画效果的元素

    //基本过滤选择器：
    <script type="text/javascript">
        $(function () {
            // 设置表格第一行，显示为红色
            $("tr:first").css("color","red");
            $("tr:eq(0)").css("color","red");
            $("tr").eq(0).css("color","red");

            // 设置表格除第一行以外 显示为蓝色
            $("tr:not(tr:first)").css("color","blue");
            $("tr:gt(0)").css("color","blue");
            $("tr").not("tr:first").css("color","blue");

            // 设置表格奇数行背景色 黄色
            $("tr:even").css("background-color","yellow");
            // 设置表格偶数行背景色 绿色
            $("tr:odd").css("background-color","green");

            // 设置页面中所有标题 显示为粉色
            $(":header").css("color","pink");

            // 设置页面中正在执行动画效果div背景色黄色
            $("div").click(function () {
                $(this).css("background-color","yellow");
                $(this).slideToggle("slow");
            })

            //没有效果的DIV变为绿色，点击后变为背景色为黄色，动画淡出
            $("div:not(:animated)").css("color","green");
        })
    </script>

内容过滤选择器：是对子元素和文本内容的操作

        :contains(text)  选取包含text文本内容的元素  $("div:contains('John')")

        :empty  选取不包含子元素或者文本节点的空元素 $("td:empty")

        :has(selector)选取含有选择器所匹配的元素 $("div:has(p)").addClass("test")

        :parent  选取含有子元素或文本节点的元素  $("td:parent")

    // 内容过滤选择器
    <script type="text/javascript">
        $(function () {
            // 设置含有文本内容 ”上海” 的 div 的字体颜色为红色
            $("div:contains('上海')").css("color","red");

            // 设置没有子元素的div元素 文本内容 ”这是一个空DIV“
            $("div:empty").html("这是一个空DIV").css("color","green");

            // 设置含有 含p元素 的 div 背景色为黄色
            $("div:has('p')").css("background-color","yellow");

            // 设置所有含有子元素 span 字体为蓝色
            $("span:parent").css("color","blue");
            // $("div:has('span')").css("color","blue");
            // 不可使用"div:has()"，输出是div下所有的内容，也包含span标签后的，输出不满足要求
        })
    </script>

可见度过滤选择器：根据元素的可见与不可见状态来选取元素

        :hidden 选取所有不可见元素$("tr:hidden")，匹配所有display:none、input hidden元素

        :visible  选取所有可见的元素 $("tr:visible")

    // 可见度过滤选择器
    <script type="text/javascript">
        $(function () {
            // 为表单中所有隐藏域  添加 class属性，值为one
            $("input:hidden").addClass("one");

            // 设置table所有 可见 tr 背景色 黄色
            $("tr:visible").css("background","yellow");

            // 设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
            $("tr:hidden").each(function () {
                alert($(this).text());
            })
            $("tr:hidden").css("color","red");

            //显示隐藏元素
            $("tr:hidden").show();//展示的是display:none的元素
        })
    </script>

属性过滤选择器：通过元素的属性来选取相应的元素

        [attribute] 选取拥有此属性的元素  $("div[id]")

        [attribute=value] 选取指定属性值为value的所有元素

        [attribute !=value] 选取属性值不为value的所有元素

        [attribute ^= value] 选取属性值以value开始的所有元素

        [attribute $= value] 选取属性值以value结束的所有元素

        [attribute *= value]  选取属性值包含value的所有元素

        [selector1] [selector2]…[selectorN] 复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合

    // 属性过滤选择器
    <script type="text/javascript">
        $(function () {
            // 设置所有含有id属性的div，字体颜色红色
            $("div[id]").css("color","red");

            // 设置所有class属性值 含有one元素背景色为黄色
            $("*[class *='one']").css("background","yellow");

            // 对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
            $("div[id][class]").click(function () {
                alert($(this).html());
            })
        })
    </script>

子元素过滤选择器：对某元素中的子元素进行选取

        :nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素  ----- index 从1开始

        :first-child  选取第一个子元素

        :last-child  选取最后一个子元素

        :only-child 选取唯一子元素，它的父元素只有它这一个子元素

    // 子元素过滤选择器    
    <script type="text/javascript">
        $(function () {
            // 选择id属性mytable 下3的倍数行，字体颜色为红色
            $("#mytable tr:nth-child(3n)").css("color","red");

            // 表格 奇数行 背景色 黄色
            // $("tr:even").css("background","yellow");
            $("#mytable tr:even").css("background","yellow");
            
            // 表格 偶数行 背景色 灰色
            // $("tr:odd").css("background","pink");
            $("#mytable tr:odd").css("background","pink");

            // 只有一个td的 tr元素 字体为 蓝色
            $("td:only-child").css("color","blue");
        })
    </script>

表单过滤选择器：选取表单元素的过滤选择器

        :enabled  选取所有可用元素

        :disabled  选取所有不可用元素

        :checked  选取所有被选中的元素，如单选框、复选框

        :sele cted  选取所有被选中项元素，如下拉列表框、列表框

    // 表单过滤选择器
    <script type="text/javascript">
        $(function(){
            // 对所有text框和password框，添加离焦事件，校验输入内容不能为空
            //blur不能为空
            $(":text,:password").blur(function(){
                var inputValue = $(this).val();
                inputValue = $.trim(inputValue);
                if(inputValue == ""){
                    alert("输入不能为空！");
                }
            });

            //  对button 添加 点击事件，提交form表单
            $(":button").click(function(){
                $("#myform").submit();
            });
        });
    </script>

    // 表单对象属性过滤选择器
    <script type="text/javascript">
        $(function(){
            // 点击button 打印radio checkbox select 中选中项的值
            $("#mybutton").click(function(){
                // 获得radio的值
                $("input[name='gender']:checked").each(function(){
                    alert($(this).val());
                });
                // 获得checkbox的值
                $("input[name='hobby']:checked").each(function(){
                    alert($(this).val());
                });
                // 获得select的值
                $("select[name='city'] option:selected").each(function(){
                    alert($(this).val());
                });
            });
        });
    </script>

3、DOM属性操作：

属性操作：是 jQuery 提供对文档属性的增删改查操作，常用有以下几个方法：

        attr(name)  获取指定名称的属性

        attr(key, value)  设置指定名称的属性值

        attr(properties)  将一个“名/值”形式的对象设置匹配的元素属性

        removeAttr(name)  从元素中删除属性

    // 设置元素的属性    
    <script type="text/javascript">
        $(function(){
            $("#addAttrBtn").click(function(){
                $("div").attr({'id':'mydiv','name':'mydivname','class':'myclass',
'customerAttr':'自定义属性'});
                $("div").attr("age","20");
                alert($("div").attr("name"));//获取name并跳出窗口
                $("div").removeAttribute("customerAttr");
            });
        });
    </script>

4、样式操作：是 jQuery 提供对文档样式的操作：

        attr(“style”,”color:red”)   设置/获取 style属性

        css(name)  获取一个CSS样式属性

        css(name, value)  设置一个CSS样式属性

        css(properties)  传递key-value对象，设置多个CSS样式属性

        addClass(class)  添加一个class属性

        removeClass([class])  移除一个class属性

        toggleClass(class)  如果存在（不存在）就删除（添加）一个类

    // CSS样式操作    
    <script type="text/javascript">
        $(function () {
            // 点击 button，使一个 div的背景颜色变为 黄色
            $("#button1").click(function () {
                $("#div1").css("background-color","yellow");
                $("#div1").attr("style","color:red");
            })
            // 通过 toggleClass(class) 实现点击字体变为蓝色，再点击样式还原
            $("#button2").click(function () {
                // $("#div1").toggleClass("one");//添加class属性
                $("#div1").css("color","blue");
                $("#div1").addClass("one two");
                alert();
                $("#div1").removeClass("");
            })
        })
    </script>