jquery1

最新推荐文章于 2022-05-07 17:06:26 发布

筱欢喜

最新推荐文章于 2022-05-07 17:06:26 发布

阅读量126

点赞数 1

本文链接：https://blog.csdn.net/hhjava123/article/details/92398779

版权

一、对jQuery的认识

jquery是一个javaScript库。把js比作手机，jquery就是带了壳的手机

二、jquery与dom相互转化

例如：

var  box=document.getElementById("box");

//dom元素转化为jquery

           var jqbox=$("box");

三、选择器

基本选择器

符号(名称)	说明	用法
#	Id选择器	$(“#btn”).css(“color”, “blue”); 选择id为btn的一个元素（返回值为jQuery对象）
.	类选择器	$(“.box”).css(“color”, “red”); 选择含有类box的所有元素
element	标签选择器	$(“li”).css(“color”, “red”); 选择标签名为li的所有元素

层级选择器

符号(名称)	说明	用法
层级选择器
空格	后代选择器	$(“#box li”).css(“color”, “red”); 选择id为box的元素的所有后代元素li
>	子代选择器	$(“#box > ul > li”).css(“color”, “red”); 选择id为box的元素的所有子元素ul的所有子元素li

过滤选择器

:eq(index)

选择匹配到的元素中索引号为index的一个元素，index从0开始

$(“li:eq(1)”).css(“color”, ”blue);

选择li元素中索引号为1的一个元素

:odd

选择匹配到的元素中索引号为奇数的所有元素，index从0开始

$(“li:odd”).css(“color”, “blue”);

选择li元素中索引号为奇数的所有元素

:even

选择匹配到的元素中索引号为偶数的所有元素，index从0开始

$(“li:odd”).css(“color”, “blue”);

选择li元素中索引号为偶数的所有元素

筛选选择器

符号(名称)	说明	用法
find(selector)	查找指定元素的所有后代元素（子孙）	$(“#box”).find(“li”).css(“color”, “yellow”); 选择id为box的所有后代元素li
children()	查找指定元素的直接子元素（儿子）	$(“#box").children(“ul”).css(“color”, “red”); 选择id为box的所有子代元素ul
siblings()	查找所有兄弟元素（不包括自己）	$(“#box”).siblings().css(“color”, “red”); 选择id为box的所有兄弟元素
parent()	查找父元素（自己的父元素，不包括父亲的父亲）	$(“#box”).parent(“ul”).css(“color”, “red”); 选择id为box的父元素
eq(index)	查找指定元素的第index个元素，index是索引号，从0开始	$(“li”).eq(2).css(“color”, “red”); 选择所有li元素中的第二个

过滤选择器：

 <script>
        $(function(){
            //利用过滤设置偶数位元素背景
            var jqliodd=$("ul li:odd");
            jqliodd.css("background","red");//获取奇数位索引
            //利用过滤获取奇数位元素背景
            var jqlieven=$("ul li:even")//获取偶数位索引
            jqlieven.css("background","yellow");


            var jqlifirst=$("ul li:eq(0)");
            jqlifirst.css("background","pink");

            var jqlilast=$("ul li:eq(5)");
            jqlilast.css("background","greenyellow");
        });
    </script>
</head>
<body>
<ul>
    <li>老帅了，最棒了/li>
    <li>老帅了，最棒了</li>
    <li>老帅了，最棒了</li>
    <li>老帅了，最棒了</li>
    <li>老帅了，最棒了</li>
    <li>老帅了，最棒了</li>
</ul>
</body>

筛选选择器：

 <script>
        jQuery(function () {
            var jqul=$("ul");
            //find(selector),从jQuery后代中查找
            jqul.find("li").css("background","pink");
            //children（）不写参数获取所有子元素，只能找它的直系子元素，不能找到孙子
            jqul.children("li").css("background","yellow");

            //eq(索引值) 要求该数组中的第几个
            jqul.children().eq(0).css("background","red");
            //next() 查找该元素的下一个兄弟元素
            jqul.children().eq(0).next().css("background","blue");
            //siblings 查找该元素的所有兄弟元素
            jqul.children().eq(0).next().siblings().css("border","1px solid green");
            //parent() 该元素的父元素
            console.log(jqul.children().eq(0).parent());
        });
    </script>
</head>
<body>
<ul>
        <li>老帅了，最棒了，未来是高级教师</li>
        <li class="box">老帅了，最棒了，未来是高级教师</li>
        <li id="box">老帅了，最棒了，未来是高级教师</li>
        <span>老帅了，最棒了，未来是高级教师</span>
        <a href="#">老帅了，最棒了，未来是高级教师</a>
        <li>老帅了，最棒了，未来是高级教师</li>
        <ol>
            <li>我是ol中的li</li>
            <li>我是ol中的li</li>
            <li>我是ol中的li</li>
        </ol>

</ul>
</body>

筱欢喜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery1

一、对jQuery的认识 jquery是一个javaScript库。把js比作手机，jquery就是带了壳的手机二、jquery与dom相互转化例如：var box=document.getElementById("box");//dom元素转化为jquery var jqbox=$("box");三、选择器基本选择器...
复制链接

扫一扫