jQuery部分知识点选择器总结(via 代码)

最新推荐文章于 2021-06-17 15:11:16 发布

原创最新推荐文章于 2021-06-17 15:11:16 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文深入探讨了jQuery和DOM在获取网页元素上的不同方法，包括id、类名、标签名等选择器的使用，以及.html(), .text(), .val(), .css()等方法的功能与区别。同时，讲解了如何利用jQuery进行元素的样式修改、事件绑定，以及层级、基数与偶数、索引选择器的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery是javascript框架库的一种。

1，Dom和jquery获取元素的不同方式


        /*
        *
        * DOM中获取元素的方式:
        * document.getElementById("id的值");根据id获取元素,一个
        * document.getElementsByTagName("标签的名字");根据标签的名字获取元素,多个
        * document.getElementsByName("name属性的值");根据name属性的值获取元素,多个
        * document.getElementsByClassName("类样式的名字");根据的是类样式的名字来获取元素,多个
        *
        * */
        /*
        *
        * jQuery获取元素的方式:通过各种选择器来获取元素
        * 1.根据id来获取--->id选择器  ---->$("#id的值");一个
        * 2.根据标签的名字来获取---标签选择器--->$("标签的名字");多个
        * 3.根据类样式的名字获取--->类选择器--->$(".类样式的名字");多个
        *
        *
        * */

2，// .html()方法,小括号中什么也没有,表示的时候获取div中的元素内容，写内容是设置标签中间显示其他标签及内容,类似于innerHTML
// .text()方法,小括号什么也不写,表示的是获取这个元素中的文字内容，写内容是设置标签中间显示的文本内容,类似于innerText
// .val()方法.小括号中什么也不写,获取元素的value属性的值，写内容是设置input标签中value的值,类似于value
// .css()方法,.该方法如果只是设置一个样式的属性和值,那么这个方法写两个参数,第一个参数是属性,第二个参数是值
//$("#dv").css("backgroundColor","yellow");
//.css();方法,里面可以直接写键值对的方式

$("#dv").css({"width":"300px","height":"200px","backgroundColor":"yellow"});

3，层级选择器

//页面加载后获取ul标签中的所有的li标签
        $(function () {
            //根据层次选择器获取li
            $("#uu>li").mouseover(function () {
                //鼠标进入
                $(this).css("backgroundColor","red");
            });
            $("#uu>li").mouseout(function () {
                //鼠标离开
                $(this).css("backgroundColor","");
            });
        });

$(function () {
            $("#btn").click(function () {
                //*就是所有的元素
                $("#dv *").css("backgroundColor","yellow");
            });
        });

4，基数与偶数 odd even

 $(function () {
            $("#btn").click(function () {
                //偶数的li
                $("#uu>li:even").css("backgroundColor","yellow");//偶数的li
                $("#uu>li:odd").css("backgroundColor","red");//奇数的li
            });
        });

5,索引选择器大于小于等于 :gt :lt :eq

 $(function () {
            $("#btn").click(function () {
                //获取ul中的索引为4的li标签元素
                //$("#uu>li:eq(4)").css("backgroundColor","red");
                //获取ul中的索引大于4的所有的li标签元素
                //$("#uu>li:gt(4)").css("backgroundColor","red");
                //获取ul中的索引小于4的所有的li标签元素
                //$("#uu>li:lt(4)").css("backgroundColor","red");
            });
        });