jQuery学习知识点总结

最新推荐文章于 2022-07-25 15:11:12 发布
置顶 最新推荐文章于 2022-07-25 15:11:12 发布
阅读量325 收藏 4
点赞数
分类专栏： 前端 文章标签： jquery js html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43389754/article/details/110702671
版权

一、jQuery

1.1 jQuery介绍

  • jQuery是一个封装JavaScript的第三方库：简化了基本语法、提供了便捷的HTML标签属性及样式操作的方法、封装了AJAX请求

  • 特点：操作简单，功能强大，选择器丰富，插件库丰富，浏览器兼容性好。

  • jQuery设计的宗旨是“write Less，Do More”

1.2 jQuery组成

  • 选择器
    • $("#id") ==> document.getElementById(“id”)
    • $(“div”) ==> document.getElementById(“div”)
    • $(".class") ==> document.getElementsByClassName(“class”)
  • 筛选：对选择器选中的元素进行筛选和过滤
  • HTML标签属性操作
  • HTML标签CSS操作
  • 动画效果
  • DOM操作
  • AJAX封装

二、jQuery使用

2.1 引用jQuery库

将jquery.js文件通过script标签引入到HTML文档中

方式一：本地引用

  • 下载jQuery文件：https://jquery.com/download/
    • 开发版本（非压缩、体积大、提供了比较完整调试提示功能）：development jquery-3.4.1.js
    • 生产版本（压缩、体积小、可读性差）：production jquery-3.4.1.min.js
  • 在HTML文档中通过script标签引用下载的jquery.js
    • 引用JS库一般在head中引用
    • 引用JS库要使用独立的script标签
  • <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>

方式二：CDN引用

  • CDN 内容分发网络

  • 我们可以理解为就是把 jQuery的js文件存储在一个网络服务器上,我们无需下载，在html文档中直接引用这个服务器的地址即可

    • https://code.jquery.com/jquery-3.5.1.min.js
    • http://libs.baidu.com/jquery/2.0.0/jquery.min.js

  • <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>

三、基本使用方式

jQuery的库中定义一个名为jQuery对象，此对象是一个全局对象 jQuery==$

3.1 jQuery(selector)

这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。

  • $(document) ,选择当前HTML文档对象
//当当前文档加载完成执行function
$(document).ready(function(){

});
//可以简写为：
$(function() {
})

原生js和jquery加载模式区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<img id="img" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" >
	<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>	
	<script type="text/javascript">
		//当页面加载完毕。打印图片的宽度
		
		//1.使用原生的js
		// window.onload = function(){
			
		// 	var img = document.getElementById("img")
		// 	var width = window.getComputedStyle(img).width
		// 	console.log("js"+width);
		// }
		
		
		//2.使用jquery
		$(function(){
			var $img = $("#img");
			
			var width = $img.width();
			
			console.log("jq"+width);
		})
		
		/**
		 * 
		 * 区别一：
		 * 原生js与jquery加载的区别
		 * js会在dom节点加载完毕的同时，要等img图片的内容也加载完才会执行入口函数[页面加载完事件函数]
		 * jquery只会在dom加载完毕后立即执行入口函数[页面加载完事件函数]
		*/
	   
	   /**
	    * 区别二：原生的入口如果写多次会从下往上覆盖，但是jquery的入口如果有多个不会相互覆盖
	   */
		
		// window.onload = function(){
			
		// 	console.log("！！！！！！");
			
		// }
		
		
		$(function(){
			console.log(">>>>>>>>>>>>>");
			
		})
		
	</script>	
	</body>
</html>
  • $("") 通过css选择器语法获取元素

四、jQuery选择器

选择器，用于匹配HTML文档中的元素

4.1 基本选择器

  • ID选择器 $("#id") 相当于 document.getElementById(“id”)
    • var e1 = $("#id");
    • var e2 = document.getElementById(“id”);
    • 将jQuery转换成JS对象
//实际上jQuery选择器匹配的元素是存放在一个jQuery的容器中
//将jQuery匹配的元素转换成JS元素
var jQueryContainer = $("img");
var img1 = jQueryContainer[0];

  • class选择器 $(".class") 相当于 document.getElementsByClassName(“class”)

  • 标签选择器 $(“tagName”) 相当于 document.getElementsByTagName(“tagName”)

  • *：表示所有的元素。例如：$("*")

  • select1,select2,selectN：组合，例如：$("#div1, #span1, .class1, li");

4.2 层级选择器

  • select1 select2：选择器1 空格 选择器2，选择器1中的所有的后代选择器2元素。

  • select1,select2：将每一个选择器匹配到的元素合并后一起返回

  • select1>select2：选择器1中的所有的儿子选择器2元素。

  • select1+select2：选择器1中的下一个紧挨的选择器2元素（兄弟）。

  • select1~select2：选择器1中的后面的选择器2元素（兄弟）。

4.3 常用基本选择器

通常来说带有:(冒号)的选择器一般会与其他选择器组合使用。

与下标相关：:last, :first，:eq,:gt,:lt。例如：

  • $(“li:first”)：得到所有的li中的第一个。

  • :not(select1)：取反。例如：

  • $(“li:not(:eq(2))”)：得到所有的li中下标不为2的

  • :even：偶数（下标为0，2，4…）

  • :odd：奇数（下标为1，3，5…）

  • 例如：$(“tr:odd”)得到所有的奇数行。

案例：

  • 1、实现全选/全不选功能，使用一个复选框方式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选功能</title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
	</head>
	<body>
		<input type="checkbox" /><br />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />

	</body>
</html>

<script>
	$(function(){
		$("input:first").click(function(){
			// 获取动态属性值
			var val = $("input:first").prop("checked");
			// 两个参数是设置值
			$("input:gt(0)").prop("checked",val);
		});
	})
</script>
  • 2、写一个表格，实现奇偶行变色。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
	</head>
	<body>
		<table>
			<thead>
				<th>ID</th>
				<th>产品名称</th>
				<th>产品价格</th>
				<th>产品描述</th>
			</thead>
			
			<tbody>
				<tr>
					<td>1</td>
					<td>哇哈哈</td>
					<td>2.5</td>
					<td>很好喝</td>
				</tr>
				<tr>
					<td>1</td>
					<td>哇哈哈</td>
					<td>2.5</td>
					<td>很好喝</td>
				</tr>
				<tr>
					<td>1</td>
					<td>哇哈哈</td>
					<td>2.5</td>
					<td>很好喝</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

<script>
	$(function(){
		$("tbody").append("<tr></tr>").append("<td>2</td>");
		$("tr:even").css("background-color","red");
		$("tr:odd").css("background-color","orange");
	})
</script>

4.4 内容、可见性、属性选择器

内容相关：

  • :contains(text)：内容包含某字符串的元素。

  • :empty：内容为空的元素。

  • :parent：得到内容不为空的元素。

  • :has(select1)：内容包含另一个标签。例如：$(“div:has§”)，表示得到里面包含p元素的div元素。

可见性：

  • :hidden：得到隐藏元素。

  • :visible：得到可见元素。

属性相关：

  • 所有的属性相关的选择器都需要使用[]。

  • [attr]：表示得到有某个属性的元素。例如：$(“div[id]”)：得到有id属性的所有div

  • [attr=v]、[attr!=v]、[attr^=v]、[attr$=v]、[attr*=v]、也可以一次写多种属性相关选择器。

  • 例如：$("input[id][name$=abc][value*=hello]")：得到所有的input包含id属性，name以abc结尾，value包含hello的元素。

4.5 子元素、表单元素选择器

子元素：

  • :first-child：得到组元素的第一个元素。与:first的区别在于，:first只会得到第一个元素，即使有多组，也只会当作一组，会得到第一组的第一个元素。而:first-child会得到每一组的第一个元素。

  • :last-child：得到组元素的最后一个元素。与:last的区别在于，:last只会得到最后一个元素，即使有多组，也只会当作一组，会得到最后一组的最后一个元素。而:last-child会得到每一组的最后一个元素。

  • :nth-child(n)：得到组元素的第几个元素，序号从1开始。如果有多组会每一组都得到第n个元素。与:eq(index)的区别：eq会将多组元素当成1组，下标从0开始，把多组的元素相加计算下标。

表单相关选择器：

由于表单元素不同的元素，可能都是以input作为标签的名称，所以如果通过标签名称来查找比较麻烦，jquery提供了一些便利的选择器以获取表单元素。

  • :input跟input类似，都能够获取所有的input标签。

  • :text、:password、:radio、:checkbox、:file、:image、:button、:reset、:submit、:hidden等便利的选择来获取表单元素。

表单元素的属性：

  • :checked：获取单选框、复选框中被选中的元素。

  • :selected：获取下拉框被选中的option

  • :enabled：获取可以使用的元素。

  • :disabled：获取不可使用的元素。

五、属性赋值、内容改变

5.1 属性赋值

  • attr()用来访问属性。包含get和set。

  • removeAttr(“name”)：删除属性。

例如：操作a链接：

//获取值
var h = $("a").attr("href"); 
//设置值：
$("a").attr("href", "https://www.baidu.com");

如果要操作一些特殊的属性，例如：checkbox中checked属性。
需要使用prop：
removeProp(“name”)：删除属性。

例如：

//获取值
var h = $(":checkbox").prop("checked"); 
//设置值：
$(":checkbox").prop("checked", true);

attr和prop的使用以及区别


<script type="text/javascript">

    $(function(){
    //dom操作的核心思想，先获取dom才能操作dom

    //获取dom对象的标签属性
    // 	var id = $("#img").prop("id");
    // 	console.log(id);

    // 	//修改dom对象的标签属性
    // 	$("#img").prop("id","id-img")

    //attr与prop的区别
    //区别一：attr获取的dom对象的标签属性,即dom对象的attributes，而prop获取的是所有的属性
    //区别二：attr获取checked、selected、disabled属性返回的是非boolean类型的数据，而prop获取checked、selected、disabled返回的是boolean类型的数据，
    //官方推荐：当要判断单选按钮是否被选中、多选按钮是否被选中、option是否被选择、输入框是否被禁用，建议使用prop
    //获取radio的选中状态
    //1.attr获取
    console.log($("input:radio").attr("checked"));

    //2.prop获取
    console.log($("input:radio").prop("checked"));

})
</script>

注意：

  • 特殊属性操作：文本框的value属性操作。

  • 例如：

//获取文本框的值
var v = $(":text").val();
// 设置文本框的值
$(":text").val("hello");

5.2 内容改变

  • html()：获取元素内容，或者改变元素内容。相当于innerHTML。

  • text()：获取元素文本内容，或者改变元素文本内容。相当于innerText。

  • 例如：操作a链接中间的文字信息。

//获取文字信息
var h = $("a").text(); 
//设置文字信息：
$("a").text("百度");

六、CSS操作

class操作：

  • addClass(“className”)：添加class样式

  • removeClass(“className”)：移除class样式

直接操作css：

两种方式：

  • 1、一个属性的操作，使用两个参数：例如：$("div").css("color", "red");

  • 2、一次操作多个属性,使用一个对象参数。例如：$("div").css({"color":"red", "border":"1px solid red"});

一些特殊的样式，有单独操作方式：

  • 例如高度、宽度设置：$("div").height(200);
<script type="text/javascript">

    $(function(){

    // //给div加一些样式
    // $("#container").css("border","1px solid red")//一次性给一个样式
    // //一次性给多个css样式
    // $("#container").css({
    // 	width:"300px",
    // 	height:"200px",
    // 	margin:"0px auto"
    // })

    // //获取样式属性
    // console.log($("#container").css("border"));

    //addClass 给目标dom对象加类样式
    //$("#container").addClass("container");

    //removeClass移除类样式
    // $("#container").removeClass("container");

    //toggleClass切换样式
    //原理如果有样式那么removeClass，如果没有那么addClass
    $("button").click(function(){
        //样式的切换
        $("#container").toggleClass("container")
    })

})

</script>

七、事件

跟原生的事件名称相似，去掉on。例如：click、change、focus、blur等.

事件的绑定方式

  • 一个元素可以绑定多个事件、也可以一个事件绑定多次，不会覆盖

$(function(){

    //方式一：通过on函数来绑定点击事件
    //参数1：事件的名称，参数2：事件触发后要执行的函数
    // $("button").on("click",function(){
    // 	alert("ok!")
    // })
    
    //方式二：直接通过事件名函数绑定事件【推荐】
    // $("button").click(function(){
    // 	alert("ok!")
    // })

    //以上两种方式的区别
    //区别一：on的方式可以自定义事件，而方式二不行
    //区别二：on可以一次绑定多个事件,而方式二一次性只能绑定一个事件

    //给div两个事件分别是（点击与鼠标悬停）

    $(".container").on({
        click:function(){ alert("click")},
        mouseenter:function(){console.log("mouseenter");}
    })
})

阻止事件冒泡与阻止事件默认行为

<script type="text/javascript">

    $(function(){

    // $(".father").click(function(){
    //  console.log("fathrer");

    // })
    // //方式一：阻止事件冒泡
    // // $(".son").click(function(){
    // // 	console.log("son");

    // // //阻止事件冒泡
    // // return false;
    // // })

    // //方式二：阻止事件冒泡
    // $(".son").click(function(event){
    // 	console.log("son");
    // //阻止事件冒泡
    // 	event.stopPropagation();
    // })

    //
    // $("a").click(function(){
    //  console.log("click a!!!");
    // })

    //阻止a标签的默认行为
    //方式一：阻止默认行为
    // $("a").click(function(){
    // 	console.log("click a!!!");
    // //阻止默认行为
    // return false;
    // })

    //方式二：阻止默认行为
    $("a").click(function(event){
        console.log("click a!!!");
        //阻止默认行为
        event.preventDefault()			
    })  
})


</script>

事件自动触发

  • trigger triggerHandler
$(function(){
    //绑定click事件
    $(".son").click(function(){
        console.log("son");
    })

    $(".father").click(function(){
        console.log("father");
    })

    //页面加载完毕，就立即触发son的点击事件,会出现冒泡
    // $(".son").trigger("click")	
    //页面加载完毕，就立即触发son的点击事件,会阻止出现冒泡
    $(".son").triggerHandler("click")	

})

自定义事件

  • on 、trigger
$(function(){
    //自定义事件
    $(".son").on("zhuxm",function(){
        console.log("zhuxm");
    })

    //采用trigger触发
    $(".son").trigger("zhuxm") ;
})

事件委托

$(function(){
    //添加按钮绑定点击事件
    $("button").click(function(){
        //add 小丽
        $("ul").append("<li>new 小丽</li>")
    })


    //给小丽绑定点击事件
    // $("li").click(function(){
    // 	console.log($(this).text());
    // })



    //怎么解决新增的元素不能绑定事件的问题，通过事件委托解决
    $("ul").delegate("li","click",function(){
        console.log($(this).text());
    })
})

八、效果

  • 隐藏和显示

  • 淡出和淡入

  • 滑动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
	</head>
	<body>
		<img src="img/11.jpg" />
		<input type="button" id="btn1" value="隐藏" />
		<input type="button" id="btn2" value="淡出"/>
		<input type="button" id="btn3" value="收起"/>
	</body>
</html>
<script>
	$(function(){
		$("#btn1").click(function(){
			if($("#btn1").val() == "隐藏"){
				$("img").hide(1000);
				$("#btn1").val("显示");
			}else{
				$("img").show(1000);
				$("#btn1").val("隐藏");
			}
		});
		
		
		$("#btn2").click(function(){
			if($("#btn2").val() == "淡出"){
				$("img").fadeOut(2000);
				$("#btn2").val("淡入");
			}else{
				$("img").fadeIn(2000);
				$("#btn2").val("淡出");
			}
		});
		
		$("#btn3").click(function(){
			if($("#btn3").val() == "收起"){
				$("img").slideUp(2000);
				$("#btn3").val("打开");
			}else{
				$("img").slideDown(2000);
				$("#btn3").val("收起");
			}
		});
	});
</script>

对联广告案列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 200px;
				border: 1px solid red;
				display: none;
			}
			
			.left{
				position: fixed;
				left: 0px;
				top: 180px;
			}
			
			.right{
				position: fixed;
				right: 0px;
				top: 180px;
			}
		</style>
	</head>
	<body>
		
		<div class="left"></div>
		<div class="right"></div>
		
		<script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
		<script>
			
			$(function(){
				//监听滚动条的滚动事件
				$(window).scroll(function(){
					//$("html").scrollTop()：获取滚动条距上边框的距离
					if($("html").scrollTop() > 50){
						// 显示对联广告
						$("div").show(1000);
					}else{
						// 隐藏对联广告
						$("div").hide(1000);
					}
				})
			})
		</script>
		<br />
		<br />
		<br />
		<br />


	</body>
</html>

滑动菜单案列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>

</head>

<body>
    <ul class="nav">
        <li>
            <a href="#" class="item">首页</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="item">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="item">视频</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="item">个人中心</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js" ></script>
    <script>
       $(function(){
       		// 方式一：绑定鼠标悬停事件
       		$(".item").mouseenter(function(){
       			$(this).siblings().slideDown();
       		})
       		//绑定鼠标移出事件
       		$(".item").mouseleave(function(){
       			$(this).siblings().slideUp();
       		})
       		
       		//方式二：鼠标悬停与移出可以直接使用hover，不需要绑定两次
			// $(".item").hover(
			// 	function(){//鼠标悬停
			// 		$(this).siblings().slideDown()
			// 	},
			// 	function(){//鼠标移出
			// 		$(this).siblings().slideUp()
			// 	}
			// )
			// 方式三 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
		     /*$(".item").hover(function(){
		     	$(this).siblings().slideToggle("slow");
		     });*/
       })
    </script>
</body>

</html>

九、元素的添加和删除

添加元素：

  • append：给某个元素里面添加子元素，放到所有的子元素的最后。

  • prepend：给某个元素里面添加子元素，放到所有的子元素的最前。

  • after：给某个元素后面添加兄弟元素。

  • before：给某个元素前面添加兄弟元素。

删除元素：

  • empty()：清空子元素。

  • remove()：删除元素本身。

  • remove(select1)：删除元素满足select1选择器条件的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="citySelect">
			<option value="">请选择</option>
			<option value="1">武汉</option>
			<option value="2">黄石</option>
		</select>
		<input type="button" value="删除" />
	</body>
</html>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>
	$(function(){
		$(":button").click(function(){
			$("#citySelect option").remove(":gt(0)"); // 删除除了请选择以外的option
		});
	});
</script>

十、筛选和遍历

筛选：选择器只能静态获取元素，如果需要动态获取元素，则需要使用以下筛选函数。

  • first()、last()得到第一个或最后一个元素。

  • parent(exp)：得到经过里面的选择器筛选的父元素。

  • children(exp)：得到经过里面的选择器筛选的子元素。

  • siblings(exp)：得到经过里面的选择器筛选的兄弟（前后的）元素。

  • $each() ,$.map()：遍历。

$each() ,$.map()区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			div{
				width: 200px;
				height: 200px;
				border: 1px solid green;
				margin: 0px auto;
				
			}

		</style>
	</head>
	<body>
	
	<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>	
	<script type="text/javascript">
		
		$(function(){
			var ages = [1,3,5,7,9,"a"];
			// var eachres = $.each(ages,function(value,index){
			// 	console.log(value,index);
			// })
			
			// console.log(eachres);
			
			// var mapres = $.map(ages,function(value,index){
			// 	console.log(value,index);
			// 	return value;
			// })
			// console.log(mapres);
			
			//区别一：each返回值默认就是数组本身；map返回值默认就是一个空数组
			//区别二：map返回的数组可以自定义，而each返回值是固定的
		
			//需求：将ages数组的元素集体+1
			var arr = $.map(ages,function(value,index){
				
				return value+1;
			})
			console.log(arr);
		})
	</script>	
	</body>
</html>

十一、jQuery的让渡

当一个页面引入了多个js库，而这些库都使用$作为变量名，那么就会出现冲突，此时可以>使用jQuery来代替$。也可以自定义变量，此时，需要使用让渡。例如：

var jq = jQuery.noConflict();// 自定义jQuery的核心变量

jq(function(){
    var arr = [10,20,30,40,50];

    jq.each(arr, function(index, obj) {
        console.log(index) // 下标
        console.log(obj) // 数组元素
    });
})

十二、jQuery-Ajax

允许浏览器与服务器交互而无需刷新当前页面

传统请求方式存在的弊端

  • 1.网速不稳定的情况下，页面加载速度慢、用户等待时间长

  • 2.表单提交后，如注册，如果有一项不符合后台校验，会导致页面重新加载，表单必须重新填写，用户体验差

在jQuery中，提供了多种AJAX写法。

常用的有三种：

  • 1、发送get请求
$.get("url", {"username":"zhangsan"}, function(data){
    // 回调代码
});

  • 2、发送post请求，将上面的get改成post即可。

  • 3、当发送的请求比较复杂时，可以采用相对复杂的封装方式：

$.ajax({
    "type":"GET",	//  配置请求方式【get、post】
    "data":{},	// 请求数据 
    "url":"", 	//配置请求地址
    "contentType":"application/json",
    "dataType":"json",	// 回调成功，服务端返回的数据类型【text、json、xml】 
    "success":function(){	//成功回调
        
    },
    "error":function(){
        
    }
});
缘灬小太阳
关注
专栏目录
jQuery知识点总结
梓栋DREM
04-06 2861
jquery day01 一：体验 jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM、遍历和修改、AJAX… 注意 jquery 可以有多个并且不会被覆盖 只需要文档加载成...
jQuery(expression,[context]) 核心函数
JQuery_SEO专用哦!!!
03-28 142
这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都基于这个函数，或者说都是在 以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果没有指定context参数，...
jQuery设计思想
10-11 553
http://developer.51cto.com/art/201107/278647.htm jQuery设计思想(1) 2011-07-26 15:30 阮一峰 阮一峰的网络日志 我要评论(1) 字号：T | T jQuery是目前
jQuery基础知识点总结(DOM操作)
10-22
jQuery基础知识点总结(DOM操作) 在现代网页开发中，jQuery凭借其简洁的语法和强大的功能，成为了一个不可或缺的JavaScript库，尤其在进行DOM操作时，jQuery提供了统一而方便的接口，极大简化了DOM元素的样式和类的...
jQuery常用知识点总结以及平时封装常用函数
11-23
本文主要总结了jQuery中的一些常用知识点和自定义函数封装，旨在帮助初学者更好地理解和运用jQuery。 1. **基本选择器与DOM操作** - `$(selector)`：这是jQuery的核心，用于选取DOM元素。例如，`$("p")`会选择所有...
jQuery学习心得总结(必看篇)
10-22
这篇文章主要总结了学习jQuery的一些关键知识点。 首先，jQuery对象是通过jQuery包装DOM对象后生成的，它拥有jQuery特有的方法，不能直接使用DOM对象的方法。在jQuery中，通常用$符号来表示jQuery对象。jQuery对象...
JS和JQuery的知识点和用法总结与分析
10-12
**JavaScript基础知识** 1. **变量和数据类型**：JavaScript支持var、let和const声明变量，数据类型包括基本类型（如字符串、数字、布尔、null和undefined）和引用类型（如对象和数组）。 2. **控制流**：包含条件...
jQuery
water7_melon7的博客
06-03 147
jQuery
jquery 知识点总结
好记性不如烂键盘
04-23 913
一、匿名函数自执行的优势 使用匿名函数自执行，创建一个私有空间，这样内外部的命名空间就不会相互干扰了。可以避免变量全局污染； 把window做为参数传进来： 一是便于代码压缩，有时候关键字是没法被压缩的 兼容模块化写法。在浏览器环境下，给factory传入的是window 可以节省查找全局window的时间，提高性能 noGlobal为undefined，确保undefined可以使用;在低...
jquery知识点总结
qq_52619560的博客
07-25 429
例如$("inputchecked").length被选中元素的个数。chencked选择器表示查找被选中的表单元素。$('')动态创建了li标签。七.动画队列及其停止排队方法。九.自定义动画animate。first获取第一个元素。eq(n)获取第n个元素。last获取最后一个元素。even索引号是偶数行。odd索引号是基数行。十二.内容文本值操作。十一.表单选中事件。......
jQuery总结
qq_34536381的博客
07-03 233
1、jquery 特点： jquery是一款免费且开放源代码的javascript代码库，引入了全新的DOM选择器引擎，同时提供UI库组件。 jquery优点： 轻量级 强大的DOM选择器，简化javascript和ajax开发。 解决不同浏览器兼容问题 提供UI库组件，让页面开发更方便。 2、导入jquery: 3、Jquery事件添加，全部采用现代事件添加方
jquery中的知识点总结
a514932631的博客
09-14 193
首先得在页面引入jquery框架（如下的各种版本）：         事件的响应：      $(document).ready(function() {      $("#b").click(function() {         alert("Hello world!");          });        }); alert按钮
深入理解jQuery：知识点总结与应用实例
本文是一篇详细的jQuery学习总结，旨在介绍jQuery的基础知识和核心功能。jQuery是一个流行的JavaScript库，它简化了前端开发中与DOM（文档对象模型）交互的工作，特别适合处理网页元素的选择和操作。 1. **窗口加载...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值