Jquery详解

一.Jquery介绍

1.jQuery 是一个快速、简洁的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画效果和 AJAX 交互等操作，使开发者能够更轻松地创建动态和交互性强的网页。对原生js的封装,提供了很多时间,调用Api即可,并且对浏览器做了兼容性
快速入门:

//1.$(function(){})等价于原生的js的,当页面加载完成就会执行的function(){}$(function (){//$btn01是一个jquery对象,其实就是对dom对象的封装//jquery中获取对象的方法是$(#id),编程中规定jquery的对象以#开头命名var $btn01 = $("#btn01");$btn01.click(function (){alert("hello,jquery...")})})

2.什么是jquery对象
①jquery对象是对dom对象包装后的对象
②jquery对象是jquery独有的,如果一个对象是jquery对象,那么他可以使用jquery的方法

3.dom对象和query对象互转

①dom对象转window.onload=function (){var username = document.getElementById("username");//alert(username.value)var $username = $(username);alert($username.val()+"juqer的")}<body>用户名: <input type="text" name="username" id="username" value="小明">
</body>

②

window.onload=function (){var $username = $("#username");alert($username.val())}<body>用户名: <input type="text" name="username" id="username" value="小明">
</body>

③jquer对象转dom对象

 <script type="text/javascript">$(function (){var $username = $("#username");//将jquery对象转为dom对象,jquery是一个数组对象//方式一var username1 = $username[0];alert(username1.value)//方式二var username2 = $username.get(0);alert(username2.value)})</script>

二.Jquery选择器

	在dom编程中,若网页没有id=value的元素就会报错,而jqueery编程不会报错**1.基本选择器**  包括类,元素,标签选择器

 <style type="text/css">.mini{width: 60px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family: Roman;}#two{width: 100px;height: 30px;background: chartreuse;border: #000 1px solid;font-size: 12px;}#s_two{width: 100px;height: 30px;background: darkslategrey;border: #000 1px solid;font-size: 12px;}</style><script type="text/javascript" src="script/jquery-3.7.1.min.js"></script><script type="text/javascript">$(function () {//1.改变id为one的元素的背景色(id选择器)$("#b1").click(function () {var $one = $("#one");$one.css("background", "#0000FF")})//2.改变class为mini的所有元素的背景色(类选择器)$("#b2").click(function () {$(".mini").css("background", "#FF0033")})//3.改变元素名为<div>的所有元素背景(元素选择器)$("#b3").click(function () {$("div").css("background", "#00FFFF")})//4.改变所有元素的背景色$("#b4").click(function (){$("*").css("background","#00FF33")})//5.改变所有的<span>元素和id为two class的所有元素的背景色为#3399FF(组合选择器)$("#b5").click(function (){$("#two,span").css("background","#3399FF")})})</script>
</head>
<body>
<input type="button" value="改变id为one的元素的背景色为#0000FF" id="b1">
<input type="button" value="改变class为mini的元素的背景色为#FF0033" id="b2">
<input type="button" value="改变元素名为<div>的所有元素的背景色为#00FFFF" id="b3">
<input type="button" value="改变所有元素的背景色为#00FF33" id="b4">
<input type="button" value="改变所有的<span>元素和id为two class的所有元素的背景色为#3399FF" id="b5"><div id="one" class="mini">div id为one</div>
<div id="two" >div id为two</div>
<div id="three" class="mini">div id为three</div>
<span id="s_one" class="mini">span one</span>
<span id="s_two">span two</span></body>

2.层次选择器,
想通过dom元素之间的层次关系来获取特定元素,例如后代元素,子元素,兄弟元素,相邻元素就要用到层次选择器

<script type="text/javascript">$(function (){//1.改变<body>内所有<div>的背景色为#0000FF$("#b1").click(function (){$("div").css("background","#0000FF")})//2.改变<body>内子<div>的背景色为#FF0033$("#b2").click(function (){$("body > div").css("background","#FF0033")})//3.改变id为one的下一个<div>的背景色为#0000FF$("#b3").click(function (){// $("#one").next().css("background","#0000FF")$("#one+div").css("background","#0000FF")})//4.改变id为two的元素后面的所有兄弟<div>的元素的背景为"#0000FF"$("#b4").click(function (){//$("#two~div").css("background","#0000FF")$("#two").nextAll("div").css("background","#0000FF")})//5.改变id为two的元素所有<div>兄弟元素的背景色为#0000FF$("#b5").click(function (){$("#two").siblings("div").css("background","#0000FF")})})</script>
</head>
<body>
<input type="button" value="改变<body>内所有<div>的背景色为#0000FF" id="b1">
<input type="button" value="改变<body>内子<div>的背景色为#FF0033" id="b2">
<input type="button" value="改变id为one的下一个<div>的背景色为#0000FF" id="b3">
<input type="button" value="改变id为two的元素后面的所有兄弟<div>的元素的背景为#0000FF" id="b4">
<input type="button" value="改变id为two的元素所有<div>兄弟元素的背景色为#0000FF" id="b5"><div id="one" class="mini">div id为one</div>
<div id="two" >div id为two
<div id="two01">id two 01</div><div id="two02"> id two02</div>
</div>
<div id="three" class="mini">div id为three
<div id="three01"> id three01</div></div>
<span id="s_one" class="mini">span one</span>
<span id="s_two">span two</span></body>

3.基础过滤选择器
在这里插入图片描述

4.内容过滤选择器

5.可见度过滤选择器
在这里插入图片描述

6.属性过滤器
在这里插入图片描述

7.子元素过滤器

8.表单属性过滤器

jquerydom_206">三.jquery的dom操作

**1.创建节点**

在这里插入图片描述

2.删除节点
用jquery的remove方法,当删除节点时,包括删除该节点所有的子节点
清空节点:用empty方法会清空节点的所有子节点,不包含属性节点(清空节点内容)
3.复制节点
clone():克隆匹配的dom元素,返回值为克隆后的副本,但此时复制的新节点不具有任何行为
clone(true):复制元素的同时也复制元素中的事件
4.替换节点
replaceWith():将所有匹配的元素都替换为指定的HTML或者Dom元素:A.replacewith(B)
replaceAll():颠倒了的replaceWith()方法.A.replaceAll(B)
注意事项:若在替换之前,已经在元素上绑定了事件,则替换后原先绑定的事件会与原先的元素一起消失
5.属性操作
attr() 用于获取属性和设置属性,传递一个参数获取指定属性,传递两个参数为设置属性的值
如removeAttr():删除指定元素的指定属性
6.样式操作
//1.获取和设置样式
$(“#first”).attr(“class”,“one”)
//2.追加样式
$(“#first”).addClass(“one”)
//3.移除样式
$(“#first”).removeClass()
//4.切换样式
$(“#first”).toggleClass(“one”)
//5.判断是否含有某个样式
$(“first”).hasClass(“one”)
7.常用遍历节点方法
在这里插入图片描述