jQuery学习笔记--随学随记

最新推荐文章于 2021-07-25 15:31:06 发布

鹈鹕吃吃吃

最新推荐文章于 2021-07-25 15:31:06 发布

阅读量184

点赞数 1

分类专栏： JavaWeb Java 文章标签： java jquery 前端 html javascript

本文链接：https://blog.csdn.net/m0_46437589/article/details/105626940

版权

Java 同时被 2 个专栏收录

23 篇文章 7 订阅

订阅专栏

JavaWeb

4 篇文章 0 订阅

订阅专栏

jQuery的基础语法

语法：

$(selector).action();

工厂函数$()：将Dom对象转换为jQuery对象
选择器selector：获取需要操作的Dom元素
方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

reday方法称为文档就绪方法，表示当页面加载完成后执行参数中的函数

$(document).ready(function() {
// 设置id为mydiv的标签，文字的颜色和大小
   $("#mydiv").css("color","blue");
   $("#mydiv").css("font-size","30px");
});

由于经常使用$(document).ready()，我们就可以所缩写为$()

所以上面的代码可以改为：

$(function () {
    $("#mydiv").css("color","blue");
    $("#mydiv").css("font-size","30px");
});

在jQuery中，$其实是jQuery的别名，一般都直接使用$符号许多JavaScript的库都用$做标记，jQuery也一样，所以当使用多个JavaScript库会出现冲突。

解决方法：重新设置jQuery的别名

// 重新设置jQuery的别名，不再使用$
var jq = jQuery.noConflict();

jq(function () {
    $("#mydiv").css("color","blue");
    $("#mydiv").css("font-size","30px");
});

window.onload和$(document).ready()

window.onload：

执行时机：
必须等待网页中所有的内容加载完毕后，才能执行
编写个数：
同一个页面不能编写多个
简化写法：无

$(document).ready()

执行时机
网页中所有Dom文档结构绘制完毕后立即执行，可能与Dom元素关联的内容（图片，flash，视频等）并没有加载完。
编写个数
同一个页面可以编写多个
简化写法
$();

Dom对象和jQuery对象的相互转换

html标签

<div id="mydiv">Hello World</div>

Dom对象转jQuery对象

 $(function () {
    var divDom = document.getElementById("mydiv");
    var divjQuery = $(divDom);
    divjQuery.css("color","blue");
});

jQuery对象转Dom对象

$(function () {
// jQuery对象实际上是一个数组，这个数组只包含一个元素
    var divjQuery = $("#mydiv");
    // 可以通过[index]的方法，得到相应的dom对象
    var divDom = divjQuery[0];
    divDom.innerHTML="hahah";

	// jQuery本身提供，通过.get(index)方法，得到相应的dom对象
	var divjQuery = $("#mydiv");
	var divDom = divjQuery。get(0);
    divDom.innerHTML="hahah";
});

jQuery语法特点

读取设置可以使用一个方法

// html标签
<input type="button" value="读取内容" id="bt1"/>
<input type="button" value="设置" id="bt2"/>
<br/>
<p id="itany" >Hello World</p>

// 读取设置使用一个方法
$(function () {
    $("#bt1").click(function () {
        console.log($("#itany").html());
    });

    $("#bt2").click(function () {
        $("#itany").css("font-size","30px");
        $("#itany").css("color","purple");
    });
});

链式操作元素

$(function () {
  // 这样写就比较麻烦
   /*$("#itany").html("哈哈哈");
   $("#itany").css("color","blue");
   $("#itany").css("font-size","30px");
   $("#itany").css("border","1px solid #ccc");
   $("#itany").width(300);
   $("#itany").height(100);*/
   // 可以更改为链式操作，这样写效果和上面的一样
    $("#itany").html("哈哈哈").css("color","blue").css("font-size","30px")
    .css("border","1px solid #ccc").width(300).height(100);

// 不过这样写显得十分的乱，我们通常像下面这样写
$("#itany").html("哈哈哈").css({
       "color":"blue",
       "font-size":"30px",
       "border":"2px solid blue"
   }).width(100).height(50);
});

jQuery选择器

选择器事jQuery的根基，在jQuery中，对事件处理，遍历Dom和Ajax操作都依赖选择器

jQuery选择器的优点

简洁的写法

$("#id") 等价于 document.getElementById("#id");
$("aname") 等价于 document.getElementsByTagName("aname")

完善的事件处理机制
val()–获取第一个匹配元素的当前值。

选择器的分类

选择器可以分为基本选择器和过滤选择器。
基本选择器是jQuery中最常用的选择器，也是最简单的选择器。
过滤选择器主要是通过特定的过滤规则来筛选出所需的Dom元素，过滤器都以冒号开头。
按照不同的过滤规则，过滤器可分为6中：基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤器。

基本选择器

基本选择器通过元素id、class和标签名来查找Dom元素。

基本选择器使用案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">
    </script>
    
    <script>
        $(function () {
            // id选择器
            $("#but1").click(function () {
                $("#first").css("background","blue");
            });
            // 标签选择器
            $("#but2").click(function () {
                $("div").css("background","blue");
            });
            // 类选择器
            $("#but3").click(function () {
                $(".hehe").css("background","blue");
            });
            // 并集选择器,选的是符合任意一个条件的元素，有点类似Java的|
            $("#but4").click(function () {
                $(".hehe,#first").css("background","blue");
            });
            // 交集选择器,选的是p标签并且class为hehe，有点类似Java的&
            $("#but5").click(function () {
                $("p.hehe").css("background","blue");
            });
        })
    </script>
</head>
<body>
<input type="button" value="ID选择器" id="but1"/>
<input type="button" value="标签选择器" id="but2"/>
<input type="button" value="类选择器" id="but3"/>
<input type="button" value="并集选择器" id="but4"/>
<input type="button" value="交集选择器" id="but5"/>

<br/>

<div id="first">ha1</div>
<div class="hehe">ha2</div>
<div>ha3</div>
<div class="hehe">ha4</div>
<div">ha5</div>

<br/>

<p class="hehe">p</p>
<p>pp</p>
<p>ppp</p>
<p>pppp</p>
<p>ppppp</p>
</body>
</html>

层次选择器

如果想通过Dom元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素、兄弟元素等，则需要层次选择器
注意：(“prev~div”）选择器只能选择"prev"，元素后面的同辈元素。而jQuery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            // 后代选择器，选取div下的所有span
            $("#but1").click(function () {
                $("div#first span").css("background","blue");
            });

            // 子选择器，选取div下的span，只选div下的一层
            $("#but2").click(function () {
                $("div#first > span").css("background","blue");
            });

            // 相邻选择器，只能选取后面的相邻元素
            $("#but3").click(function () {
                $("div#first + div").css("background","blue");
            });

            // 兄弟选择器，选择同一级的同名标签，只能选择自己后面的
            $("#but4").click(function () {
                $("div#first ~ div").css("background","blue");
            });
        })
    </script>
</head>
<body>
<input type="button" value="后代选择器" id="but1"/>
<input type="button" value="子选择器" id="but2"/>
<input type="button" value="相邻选择器" id="but3"/>
<input type="button" value="兄弟选择器" id="but4"/>

<br/>
<div>这是第一个div</div>
<div id="first">
    <p>
        <span>haha</span>
        <span>haha</span>
        <span>ID为firstdiv中的p中的span</span>
    </p>
    <span>ID为firstdiv中的span</span>
</div>
<div class="hehe">
    <p>
        <span>haha</span>
        <span>haha</span><br/>
        <span>class为hehe中的p中的span</span>
    </p>
    <br/>
    <span>class为hehe中的span</span>
</div>
<div>ha3</div>
<div class="hehe">ha4</div>
<div">ha5</div>

<br/>

<p class="hehe">p</p>
<p>pp</p>
<p>ppp</p>
<p>pppp</p>
<p>ppppp</p>
</body>
</html>

过滤选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            // 选择第一个span元素
            $("#but1").click(function () {
                $("span:first").css("background","blue");
            });

            // 选择最后一个p元素
            $("#but2").click(function () {
                $("p:last").css("background","blue");
            });

            // 选择class为hehe的div元素
            $("#but3").click(function () {
                $("div.hehe").css("background","blue");
            });

            // 选择class不为hehe的div元素
            $("#but4").click(function () {
                $("div:not(.hehe)").css("background","blue");
            });

            // 选择索引为偶数的span元素
            $("#but5").click(function () {
                $("span:even").css("background","blue");
            });

            // 选择索引为奇数的span元素
            $("#but6").click(function () {
                $("span:odd").css("background","blue");
            });

            // 选择索引大于1的span元素
            $("#but7").click(function () {
                $("span:gt(1)").css("background","blue");
            });

            // 选择索引小于1的span元素
            $("#but8").click(function () {
                $("span:lt(1)").css("background","blue");
            });

            // 选择索引等于1的span元素
            $("#but9").click(function () {
                $("span:eq(1)").css("background","blue");
            });

            // 选择所有的标题元素
            $("#but10").click(function () {
                $(":header").css("background","blue");
            });
        });
    </script>
</head>
<body>
<input type="button" value="选择第一个span元素" id="but1"/>
<input type="button" value="选择最后一个p元素" id="but2"/>
<input type="button" value="选择class为hehe的div元素" id="but3"/>
<input type="button" value="选择class不为hehe的div元素" id="but4"/>
<input type="button" value="选择索引为偶数的span元素" id="but5"/>
<input type="button" value="选择索引为奇数的span元素" id="but6"/>
<input type="button" value="选择索引大于1的span元素" id="but7"/>
<input type="button" value="选择索引小于1的span元素" id="but8"/>
<input type="button" value="选择索引等于1的span元素" id="but9"/>
<input type="button" value="选择所有的标题元素" id="but10"/>

<br/>
<div>这是第一个div</div>
<div id="first">
    <p>
        <span>haha</span>
        <span>haha</span>
        <span>ID为firstdiv中的p中的span</span>
    </p>
    <span>ID为firstdiv中的span</span>
</div><br/>
<h3>小标题</h3><br/>
<div class="hehe">
    <p>
        <span>haha</span>
        <span>haha</span><br/>
        <span>class为hehe中的p中的span</span>
    </p>
    <br/>
    <span>class为hehe中的span</span>
</div>
<div>ha3</div><br/>
<h2>中标题</h2><br/>
<div class="hehe">ha4</div>
<div">ha5</div><br/>

<br/>
<h1>大标题</h1><br/>
<p class="hehe">p</p>
<p>pp</p>
<p>ppp</p>
<p>pppp</p>
<p>ppppp</p>
</body>
</html>

内容过滤器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内容过滤器</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            // 选择包含Hello的最后一个p元素
            $("#but1").click(function () {
                $("p:contains(Hello):last").css("background", "blue");
            });

            // 选择空的p元素，为了能显示出来，加一个值，空格不算是空
            $("#but2").click(function () {
                $("p:empty").css("background", "blue").html("这原本是个空的元素");
            });

            // 选择包含id为Hello元素的div元素
            $("#but3").click(function () {
                $("div:has(#Hello)").css("background", "blue");
            });

            // 选择非空的p元素
            $("#but4").click(function () {
                $("p:parent").css("background", "blue");
            });
        });
    </script>
</head>
<body>
<input type="button" value="选择包含Hello的最后一个p元素" id="but1"/>
<input type="button" value="选择空的p元素" id="but2"/>
<input type="button" value="选择包含Hello的最后一个p元素" id="but3"/>
<input type="button" value="选择非空的p元素" id="but4"/>

<div>
    <p id="Hello">今天星期四</p>
</div>
<p></p>
<p>今天天气很好</p>
<div>
    <p>Hello world</p>
</div>
<p>Hello Java</p>
<p>Java Web</p>
</body>
</html>

属性过滤选择器

属性过滤选择器的规则是通过元素的属性来获取相应的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性过滤选择器</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            // 选取拥有此属性的元素
            $("#but1").click(function () {
                $("[Hello]").css("background", "blue");
            });

            // 选取p元素hello属性值为heihei的
            $("#but2").click(function () {
                $("p[Hello=heihei]").css("background", "blue");
            });

            // 选取p元素中hello属性不为heihei的
            $("#but3").click(function () {
                $("p[Hello!=heihei]").css("background", "blue");
            });

            // 选取指定属性的值以h开始的元素
            $("#but4").click(function () {
                $("p[Hello^=h]").css("background", "blue");
            });

            // 选择以“啦”结束的标签
            $("#but5").click(function () {
                $("p[Hello$=java]").css("background", "blue");
            });

            // 选择指定属性的值含有“java”的元素
            $("#but6").click(function () {
                $("p[Hello*=h]").css("background", "blue");
            });
        })
    </script>
</head>
<body>
<input type="button" value="选择包含Hello属性的元素" id="but1"/>
<input type="button" value="选取p元素hello属性值为heihei的" id="but2"/>
<input type="button" value="选择p元素中hello属性不为heihei的" id="but3"/>
<input type="button" value="选择以h开始的p元素" id="but4"/>
<input type="button" value="选择以“啦”结束的标签" id="but5"/>
<input type="button" value="选择指定属性的值含有“java”的元素" id="but6"/>

<div>
    <p id="Hello">今天星期四</p>
</div>
<p></p>
<p>今天天气很好</p>
<div>
    <p>Hello world</p>
</div>
<p Hello="heihei">Hello Java</p>
<p Hello="haha java">Java Web</p>
<p world="Hello">haha</p>
<p world="Hello java">haha</p>
<p world="Hello">haha</p>
<div id="wewe">
    <p>噜啦啦</p>
</div>
</body>
</html>

子元素过滤选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素过滤选择器</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            // 选取每个div元素的第二个子元素
            $("#but1").click(function () {
                $("div :nth-child(2)").css("background", "blue");
            });

            // 选取每个div元素的第一个子元素
            $("#but2").click(function () {
                $("div :first-child").css("background", "blue");
            });

            // 选取每个p元素的最后一个子元素
            $("#but3").click(function () {
                $("p :last-child").css("background", "blue");
            });

            // 选取只有一个子元素的p元素
            $("#but4").click(function () {
                $("p :only-child").css("background", "blue");
            });
        })
    </script>
</head>
<body>
<input type="button" value="选取每个父元素的第二个子元素" id="but1"/>
<input type="button" value="选取每个父元素的第一个子元素" id="but2"/>
<input type="button" value="选取每个父元素的最后一个子元素" id="but3"/>
<input type="button" value="选取只有一个子元素的父元素" id="but4"/>
<div>
    <a>lala</a>
    <a>wawa</a>
    <a>xixi</a>
    <a>haha</a>
</div>

<div>
    <a>张三</a>
    <a>丁一</a>
    <a>李二</a>
</div>
<p>
    <a>java</a>
    <a>c#</a>
    <a>c</a>
    <a>c++</a>
    <a>python</a>
</p>

<p>
    <a>java最棒</a>
</p>
</body>
</html>

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见的状态来选择相应元素。
可见选择器：hidden不仅包含样式属性display为none的元素，也包含文本隐藏域（<input type="hidden>"和visibility :hidden（<span><span>）之类的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>可见性过滤器</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $(function () {
            // 读取所有可见div元素
            $("#sub1").click(function () {
                $("div:visible").css("background", "blue");
            });

            // 读取所有不可见div元素
            $("#sub2").click(function () {
                $("div:hidden").css({
                    display:"block",
                    background:"blue"
                });
            });
        })
    </script>
</head>
<body>
<input type="button" value="选取所有可见元素" id="sub1"/>
<input type="button" value="选取所有不可见元素" id="sub2"/>

<div>可见div1</div>
<div>可见div2</div>
<div style="display:none">不可见的div</div>
</body>
</html>