zoukankan      html  css  js  c++  java
  • jQuery获取元素的方式

    一、通过id选择器获取并操作元素--------$("#id属性的值")

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                //根据id选择器获取按钮,添加点击事件,修改按钮的value属性值
                $("#btn").click(function(){
                    $(this).val("已经点击");
                });
            });
            //注意:val()是jQuery中获取或者设置表单value属性值的方法
                //jQuery对象.val()------获取属性值
                //jQuery对象.val("值")------设置属性值
        </script>
        <input type="button" value="点击" id="btn">

    二、通过标签选择器获取并操作元素--------$("标签名字")

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("p").text("我们都是P")
                });
            });
            //注意:
            //1.jQuery对象.text()方法相当于DOM中的.innerText属性
            //2.对象.text()-------获取该元素的文本内容
            //3.对象.text("值")----设置该元素的文本内容
            //4.在本例中,获取的p标签之后直接设置值,而不是像DOM操作一样,需要循环遍历,
            //因为jQuery内部已经帮助我们进行了循环操作------->隐式迭代
        </script>
        <input type="button" value="点击" id="btn">
        <p id="p1">第一个P</p>
        <p id="p2">第二个P</p>
        <p id="p3">第三个P</p>
        <p id="p4">第四个P</p>
    </body>

    三、通过类选择器获取并操作元素--------$(".class属性的值")

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $(".cls").css("border","2px solid red");
                    $(".cls").css("backgroundColor","yellow");
                });
            });
            //注意:
            //对象.css("属性","值")------设置某个元素的css样式属性值
            //多个属性值写法:对象.css("属性1":"值","属性2":"值",....)
        </script>
        <input type="button" value="点击" id="btn">
        <div class="cls">我是一个div</div>
        <p class="cls">我是一个p</p>

    四、通过交集选择器获取并操作元素--------$("标签+类选择器")

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("p.p1").css("background","yellow");
                });
            });
        </script>
        <input type="button" value="点击" id="btn">
        <p class="p1">有类选择器的p</p>
        <p>没有类选择器的p</p>

    五、通过并集选择器获取并操作元素--------$("选择器1,选择器2,.....")

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#dv,.p1,span").css("background","yellow");
                });
            });
        </script>
        <input type="button" value="点击" id="btn">
        <div id="dv">一个div</div>
        <p class="p1">一个p</p>
        <span>一个span</span>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    $("#dv,.p1,span").css("background","yellow");
                });
            });
        </script>
        <input type="button" value="点击" id="btn">
        <div id="dv">一个div</div>
        <p class="p1">一个p</p>
        <span>一个span</span>

    六、通过层次选择器获取并操作元素

    • 后代选择器-----------------空格

    • 子代选择器----------------- >

    • 兄弟选择器----------------- ~

    • 直接兄弟选择器----------- +

        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
            $(function(){
                $("#btn").click(function(){
                    //后代
                    $("#dv span").css("background","yellow");
                    //子代
                    $("#dv>span").css("background","red");
                    //兄弟
                    $("#dv~span").css("background","blue");
                    //直接兄弟
                    $("#dv+span").css("background","white");
                });
            });
        </script>
        <input type="button" value="点击" id="btn">
        <div id="dv">
            <p>
                <span>div的后代span</span>
            </p>
            <span>dv的子代span</span>
        </div>
        <span>dv的直接兄弟span</span>
        <span>dv的兄弟span</span>

    七、基本筛选选择器

    • :eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元素在进一步筛选,注意jQuery合集都是从0开始索引
    • gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始

    八、内容筛选选择器

    • :contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素
    • 如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的
    • :parent与:empty是相反的,两者所涉及的子元素,包括文本节点

    九、可见性筛选选择器

    • :hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等
    • 我们有几种方式可以隐藏一个元素:CSS display的值是none;type="hidden"的表单元素;宽度和高度都显式设置为0;一个祖先元素是隐藏的,该元素是不会在页面上显示;CSS visibility的值是hidden;CSS opacity的指是0
    • 如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局

    十、属性筛选选择器

    • [att=val]、[att]、[att|=val]、[att~=val]  属于CSS 2.1规范
    • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范
    • [name!="value"]  属于jQuery 扩展的选择器

    十一、元素筛选选择器

    • :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
    • :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
    • 如果子元素只有一个的话,:first-child与:last-child是同一个
    • :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
    • jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
    • nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

    十二、表单元素选择器

    除了input筛选选择器,几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

    十三、表单对象属性筛选选择器

    • 选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器
    • 在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素

    十四、特殊选择器this

    this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
    <body>
        <h2>特殊选择器this</h2>
    
        <p id="test1">点击测试:通过原生DOM处理</p>
        
        <p id="test2">点击测试:通过原生jQuery处理</p>
    
        <script type="text/javascript">
            var p1 = document.getElementById('test1')
            p1.addEventListener('click',function(){
                //直接通过dom的方法改变颜色
                this.style.color = "red"; 
            },false);
        </script>
    
        <script type="text/javascript">
            $('#test2').click(function(){
                //通过包装成jQuery对象改变颜色
                $(this).css('color','blue');
            })
        </script>
    
    </body>
  • 相关阅读:
    C语言 sprintf 函数 C语言零基础入门教程
    C语言 printf 函数 C语言零基础入门教程
    C语言 文件读写 fgets 函数 C语言零基础入门教程
    C语言 文件读写 fputs 函数 C语言零基础入门教程
    C语言 fprintf 函数 C语言零基础入门教程
    C语言 文件读写 fgetc 函数 C语言零基础入门教程
    C语言 文件读写 fputc 函数 C语言零基础入门教程
    C语言 strlen 函数 C语言零基础入门教程
    Brad Abrams关于Naming Conventions的演讲中涉及到的生词集解
    适配器模式
  • 原文地址:https://www.cnblogs.com/EricZLin/p/9100038.html
Copyright © 2011-2022 走看看