A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© wk020510 初级黑马   /  2019-3-28 13:50  /  804 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

JQuer与JS对象的区别与转换

- jq----->js        jq对象【索引】或者 jq对象.get(索引)
- js----->jq       $(js对象)

选择器:筛选标签

1. 事件绑定
       $("#A").click(function(){
               alert("A是按钮的id")
       })
2. 入口函数
       $(function(){
       与window.onload区别
       *window.onload只能定义一次,如果定义多次,后面会覆盖
       *$(function)可以定义多次的
       })
3. 样式控制:css方法
       $("#div").css("backgroundColor","red");

选择器分类

- 基本选择器

           
                            1. 标签选择器(元素选择器)
                                    * 语法: $("html标签名") 获得所有匹配标签名称的元素
   
                            2. id选择器
                                    * 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
                            3. 类选择器
                                    * 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
                            4. 并集选择器:
                                    * 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素

            $(function () {
                // <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
                            $("#b1").click(function () {
                                    $("#one").css("backgroundColor","pink");
                });
   
                // <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
                $("#b2").click(function () {
                    $("div").css("backgroundColor","pink");
                });
   
                // <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
                $("#b3").click(function () {
                    $(".mini").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
                $("#b4").click(function () {
                    $("span,#two").css("backgroundColor","pink");
                });
            });

- 层级选择器

                            1. 后代选择器
                                    * 语法: $("A B ") 选择A元素内部的所有B元素               
                            2. 子选择器
                                    * 语法: $("A > B") 选择A元素内部的所有B子元素
            3. 属性选择器
                            1. 属性名称选择器
                                    * 语法: $("A[属性名]") 包含指定属性的选择器
                            2. 属性选择器
                                    * 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
                            3. 复合属性选择器
                                    * 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器

            $(function () {
                            // <input type="button" value=" 含有属性title 的div元素背景色为红色"  id="b1"/>
                            $("#b1").click(function () {
                                    $("div[title]").css("backgroundColor","pink");
                });
                            // <input type="button" value=" 属性title值等于test的div元素背景色为红色"  id="b2"/>
                $("#b2").click(function () {
                    $("div[title='test']").css("backgroundColor","pink");
                });
                            // <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)背景色为红色"  id="b3"/>
                $("#b3").click(function () {
                    $("div[title!='test']").css("backgroundColor","pink");
                });
                            // <input type="button" value=" 属性title值 以te开始 的div元素背景色为红色"  id="b4"/>
                $("#b4").click(function () {
                    $("div[title^='te']").css("backgroundColor","pink");
                });
                            // <input type="button" value=" 属性title值 以est结束 的div元素背景色为红色"  id="b5"/>
                $("#b5").click(function () {
                    $("div[title$='est']").css("backgroundColor","pink");
                });
                            // <input type="button" value="属性title值 含有es的div元素背景色为红色"  id="b6"/>
                $("#b6").click(function () {
                    $("div[title*='es']").css("backgroundColor","pink");
                });
                            // <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素背景色为红色"  id="b7"/>
                $("#b7").click(function () {
                    $("div[id][title*='es']").css("backgroundColor","pink");
                });
   
            });

- 过滤选择器

                            1. 首元素选择器
                                    * 语法: :first 获得选择的元素中的第一个元素
                            2. 尾元素选择器
                                    * 语法: :last 获得选择的元素中的最后一个元素
                            3. 非元素选择器
                                    * 语法: :not(selector) 不包括指定内容的元素
                            4. 偶数选择器
                                    * 语法: :even 偶数,从 0 开始计数
                            5. 奇数选择器
                                    * 语法: :odd 奇数,从 0 开始计数
                            6. 等于索引选择器
                                    * 语法: :eq(index) 指定索引元素
                            7. 大于索引选择器
                                    * 语法: :gt(index) 大于指定索引元素
                            8. 小于索引选择器
                                    * 语法: :lt(index) 小于指定索引元素
                            9. 标题选择器
                                    * 语法: :header 获得标题(h1~h6)元素,固定写法

                    $(function () {
                // <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
                            $("#b1").click(function () {
                                    $("div:first").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
                $("#b2").click(function () {
                    $("div:last").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
                $("#b3").click(function () {
                    $("div:not(.one)").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
                $("#b4").click(function () {
                    $("div:even").css("backgroundColor","pink");
                });
   
   
                // <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
                $("#b5").click(function () {
                    $("div:odd").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
                $("#b6").click(function () {
                    $("div:gt(3)").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
                $("#b7").click(function () {
                    $("div:eq(3)").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
                $("#b8").click(function () {
                    $("div:lt(3)").css("backgroundColor","pink");
                });
                // <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
                $("#b9").click(function () {
                    $(":header").css("backgroundColor","pink");
                });
   
            });


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马