jQuery

最新推荐文章于 2022-05-21 21:23:58 发布

chenglanxiang6356

最新推荐文章于 2022-05-21 21:23:58 发布

阅读量1.5k

点赞数

原文链接：https://my.oschina.net/u/3384982/blog/1786687

版权

一.jQuery简介

1.点击元素p，元素p消失

<!DOCTYPE html>
<html>
<head>
	<title>jquery</title>
	<meta charset="utf-8">
	<!-- 导入jQuery库-->
	<!--【建议用CDN】如果不想下载，可使用google的CDN src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" -->
	<!-- 第一个script的引用可去掉type=“text/javascript。因为jquery是html默认脚本语言” -->
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		/*符号$是jQuery的代称，也就是变量名声明
		ready（）当页面图片文字都加载完会触发ready（）*/
		$(document).ready(function() {
			$("p.text").click(function(){
				$(this).hide()
			})
			/*改变原有文字*/
			$("#abc").click(function(){
				$(this).text("欢迎HJC大少爷")
			})
			/*以下两个是当鼠标在链接上变红色，离开变回蓝色*/
			$("[href$='zhilaiwu.com']").mouseover(function(){
				$(this).css("color","red");
			})
			$("[href$='zhilaiwu.com']").mouseout(function(){
				$(this).css("color","blue");
			})
		})
	</script>
</head>
<body>
	<div class="text">
		<p class="text">如果你点击我，我会被隐藏。</p>
		<p id="abc">点击文字改变。</p>
		<a href="http://www.zhilaiwu.com">知来屋</a>
	</div>
</body>
</html>

2.选择器

jQuery 元素选择器

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

jQuery CSS 选择器

$("p").css("background-color","red");

更多jq选择器：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

3.js事件

jQuery名称代号（就是$号）冲突解决办法: var jq=jQuery.noConflict()

更多jq事件：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

二.jQuery效果

1.隐藏和显示：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery效果-隐藏和显示</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		/*方法一：被注释部分
		$(document).ready(function(){
			$("#hide").click(function(){
				$("p").hide(1000);
			})
		})
		$(document).ready(function(){
			$("#show").click(function(){
				$("p").show(2000);
			})
		})*/

		/*方法二：toggle（收起时间[可以是毫秒，fast，slow]，收起后调用函数名称）自带显示隐藏功能*/
		$(document).ready(function(){
			$("button").click(function(){
				$("p").toggle(1000,changebuttoncolor);
			})
		})
		function changebuttoncolor() {
			var x=$("button").css("color");
			/*按钮文字如果是红色，就变成黑色*/
			if (x=="red") {
				$("button").css("color","black");
			}else{
				$("button").css("color","red");
			}
		}
	</script>
</head>
<body>
<p>点击隐藏按钮，我就会“消失”。</p>

<!-- 方法一：被注释部分
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button> -->

<!-- 方法二： -->
<button type="button">隐藏/显示</button>

</body>
</html>

2.淡入淡出：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery淡入淡出</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// 方法一：淡入
			$("button.b1").click(function(){
				$(".a").fadeIn(1000)
				$(".b").fadeIn(2000)
				$(".c").fadeIn(3000)
			})
			// 方法二：淡出
			$("button.b2").click(function(){
				$(".a").fadeOut(1000)
				$(".b").fadeOut(2000)
				//jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
				$(".c").fadeTo(3000,0.7)
			})

			/*方法三：按一下淡入，按一下淡出*/
			$("button.b3").click(function(){
				$(".a").fadeToggle(1000)
				$(".b").fadeToggle(2000)
				$(".c").fadeToggle(3000)
			})
		})
	</script>
</head>
<body>
	<button class="b1" type="button" >点我，淡入3个颜色框</button>
	<button class="b2" type="button" >点我，淡出3个颜色框</button>
	<button class="b3" type="button" >点我，淡入或淡出3个颜色框</button>
<div class="a" style="background-color: red;width: 80px;height: 80px;display: none;"></div>
<div class="b" style="background-color: blue;width: 80px;height: 80px;display: none;"></div>
<div class="c" style="background-color: green;width: 80px;height: 80px;display: none;"></div>

</body>
</html>

代码实践图：

3.上下滑动

<!DOCTYPE html>
<html>
<head>
	<title>滑动</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("p.flip").click(function(){
				$(".main").slideToggle(3000)//同理还有slideUp()和slideDown()
			})
		})
	</script>
	<style type="text/css">
		div,p.flip{
			text-align: center;
			background-color: #eeeeee;
			border:1px solid black;
			margin: 0px;

		}
	</style>
</head>
<body>
<div class="main">
	<h1>jQuery效果-滑动</h1>
	<p>坚持，坚持，再坚持。总有一天，你会让其他人感叹的！</p>
</div>
<p class="flip">点击这里上拉</p>
</body>
</html>

4.动画.animate(）

语法：

  $(this).animate({left:'250px'},2000,动画结束后调用的函数名称);

动画效果：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery动画</title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			background-color: green;
			text-align: center;
			font-size: 1.5em;
			width: 100px;
			height: 100px;
			border:1px solid red;
			color:white;
			/*默认地，所有 HTML 元素都有一个静态位置，
			且无法移动。如需对位置进行操作，
			要记得首先把元素的 CSS position 属性设置为 
			relative、fixed 或 absolute！*/
			position: relative;
		}
	</style>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("button").click(function(){
				
				$("div").animate({
					//让左侧腾出250px空间,第二次点击失效
					left:'250px',
					// 使用预定义的值，点击一次按钮隐藏，再点击一次出现。
					height:'toggle',
					// 使用相对值,每次点击按钮都增加50px宽度。
					width:'+=50px',
					// 第二次点击按钮都失效。
					opacity:'0.5',
					fontSize:'3em',
				},2000);
				/*点击一次按钮，下面这个animate会等上面的animate完成后接着上面继续完成。*/
				$("div").animate({
					//恢复原位,第二次点击失效
					left:'0px',
					// 使用预定义的值，点击一次按钮隐藏，再点击一次出现。
					height:'toggle',
					// 使用相对值,每次点击按钮都增加50px宽度。
					width:'+=50px',
					// 第二次点击按钮都失效。
					opacity:'1',
					fontSize:'1em',
				},2000);
			})
		})
	</script>
</head>
<body>
	<button type="button">点我</button>
	<div>
		<p>坚持</p>
	</div>
</body>
</html>

代码实践图：

5.停止动画.stop(）

语法：

$(this).stop(stopAll,goToEnd);

停止动画：

<!DOCTYPE html>
<html>
<head>
	<title>jQuery停止动画.stop()</title>
	<meta charset="utf-8">
	<style type="text/css">
		span{
			font-weight: bold;
		}
	</style>
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// 按下开始建，2s内执行完动画,包括右移，背景变大，字体变大3步骤。
			$("#start").click(function(){
				$("div.abc").animate({left:'200px'},2000);
				$("div.abc").animate({width:'+=100px',height:"+=100px"},2000);
				$("div.abc").animate({fontSize:'2em'},1000);
			})
			$("#stop").click(function(){
				$("div.abc").stop();
			})
			$("#stop2").click(function(){
				$("div.abc").stop(true);
			})
			$("#stop3").click(function(){
				$("div.abc").stop(true,true);
			})
		})
		
	</script>
</head>
<body>
<div>
	<button id="start" type="button">开始</button>
	<button id="stop" type="button">停止</button>
	<button id="stop2" type="button">停止所有</button>
	<button id="stop3" type="button">停止但要完成</button>
	<p><span>开始：</span>開始动画</p>
	<p><span>停止：</span>停止当前活动的动画，但允许已排队的动画向前执行</p>
	<p><span>停止所有：</span>停止当前活动的动画，并清空动画队列</p>
	<p><span>停止但要完成：</span>清空动画对列，但完成当前的动画</p>
	<div class="abc" style="height: 100px;width: 100px;background-color: green;position: relative;">
		<p>坚持</p>
	</div>
</div>
</body>
</html>

6.动画后调用函数callback

如果需要执行动画即可执行1函数的花：

错误案例（没有 callback）

$("p").hide(1000);
alert("The paragraph is now hidden");

正确案例

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

7.方法链接Chaining

解决多次使用对象名情况，如:

// 按下开始建，2s内执行完动画,包括右移，背景变大，字体变大3步骤。
$("#start").click(function(){
    $("div.abc").animate({left:'200px'},2000)
    $("div.abc").animate({width:'+=100px',height:"+=100px"},2000)
    $("div.abc").animate({fontSize:'2em'},1000)
})

用Chaining简化后不需要多次查找元素，

$("#start").click(function(){
    $("div.abc").animate({left:'200px'},2000).animate({width:'+=100px',height:"+=100px"},2000).animate({fontSize:'2em'},1000)
})

三.jQuery HTML

1.jQuery 获取

.text():获取文本

.html() ：获取代码

.val()：获取值

attr("href")：获取属性值

<!DOCTYPE html>
<html>
<head>
	<title>jQuery获取</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// 获取文本，得：知来物
			$("#text").click(function(){
				alert($("div").text())
			})
			// 获取html，得：<a href="http://www.zhilaiwu.com">知<b>来</b>物</a>
			$("#html").click(function(){
				alert($("div").html())
			})
			// 获取属性，得：http://www.zhilaiwu.com
			$("#attr").click(function(){
				alert($("a").attr("href"))
			})
			// 获取值，得：TEXT
			$("#val").click(function(){
				alert($("#text").val())
			})			
		})
	</script>
</head>
<body>
	<div style="border:1px solid red;height: 100px;width: 100px;background-color: green;">
		<a href="http://www.zhilaiwu.com">知<b>来</b>物</a>
	</div>
	<button id="text" type="button" value="TEXT">获取文本</button>
	<button id="html" type="button">获取html</button>
	<button id="attr" type="button">获取属性</button>
	<button id="val" type="button">获取值</button>
	

</body>
</html>

2.jQuery 设置

.text("噢"):替代原文本

.text(function(i,origText){ return origText+"哈哈"}):修改原文本

.html("<b>噢</b>"):替代原html代码

.html(function(i,origText){ return origText+"<b>哈哈</b>"}):修改原html代码

.val("luke"):替代值，比如在input中的value值

.val(function(i,origText){ return origText+"and KF"}):修改原值

.attr("href"，“http://www.zhilaiwu.com”):替代原链接地址

.attr(“href”，function(i,origText){ return origText+"/secondPage"}):修改原链接地址

<!DOCTYPE html>
<html>
<head>
	<title>jQuery设置</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#b1").click(function(){
				// 回调函数function（元素下标，原始值）
				// 元素下标指：有相同的元素情况下，比如多个li，对其按顺序排序
				$("div li").html(function(i,origText){
					return "原来的内容："+origText+",被更改后的内容： 【坚持努力，这是div下第"+i+"个li元素】"
				})
			})
			$("#b3").click(function(){
				// 局部改变html代码，.text()同理
				$(".u2 li").html(function(i,origText){
					return "<b>原来的内容</b>："+origText+",被更改后的内容： 【坚持努力，这是u2下第"+i+"个li元素】"
				})
			})
			$("#b4").click(function(){
				// 局部链接改变用法
				// 直接改变整个属性：.attr("href":"http://www.qq.com")
				$("a").attr("href",function(i,origText){
					return origText+"/123.html"
				})
			})
		})
	</script>
</head>
<body>
	<div>
		<ul class="u1">
			<li>【看看你的忍耐到哪儿】</li>
			<li>【看看你的忍耐到哪儿】</li>
			<li>【看看你的忍耐到哪儿】</li>
			<li>【看看你的忍耐到哪儿】</li>
		</ul>
		<ul class="u2">
			<li>【加油呀，黄继聪】</li>
			<li>【加油呀，黄继聪】</li>
			<li>【加油呀，黄继聪】</li>
			<li><a href="http://www.zhilaiwu.com">知来物</a></li>
		</ul>
		<button type="button" id="b1">对div下的li元素进行html回调</button>
		<button type="button" id="b3">对u2下的li元素进行html回调</button>
		<button type="button" id="b4">对知来物链接的href进行改变</button>
	</div>
</body>
</html>

3.jQuery 添加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

<!DOCTYPE html>
<html>
<head>
	<title>jQuery添加</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		function afterText() {
			/*以HMTL创建新元素*/
			var txt1="this ";  
			/*通过jQuery创建新元素*/
			var txt2=$("<i>").text("is ") 
			/*通过DOM创建新元素*/
			var txt3=document.createElement("big") 
			txt3.innerHTML="after()"

			$("ul").after(txt1,txt2,txt3)
		}
		function appendText() {
			/*以HMTL创建新元素*/
			var txt1="here ";  
			/*通过jQuery创建新元素*/
			var txt2=$("<i>").text("is ") 
			/*通过DOM创建新元素*/
			var txt3=document.createElement("big") 
			txt3.innerHTML="append()"

			$("ul").append(txt1,txt2,txt3)
		}
	</script>
	<style type="text/css">
		ul{
			background-color: green;
			width: 200px;
			height: 120px;
		}
	</style>
</head>
<body>
	<div>
		<ul>
			<li>开始</li>
			<li>持续中</li>
			<li>加油</li>
			<li>哈哈哈哈</li>
		</ul>
	</div>
	<div>
		<button type="button" id="button1" onclick="afterText()">.after()</button>
		<button type="button" id="button2" onclick="appendText()">.append()</button>
	</div>
</body>
</html>

代码实践图：

4.jQuery 删除/清空

$("div").remove() //删除元素div及其内容

$("p").remove(".a") //删除class=a的元素p

$(“div”).empty() //保留元素div但清除它包含的内容

<!DOCTYPE html>
<html>
<head>
	<title>jQuery删除/清空</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			// 删除元素及其内容
			$("#b1").click(function(){
				$("div").remove()
			})
			// 清空元素内容而已
			$("#b2").click(function(){
				$("div").empty()
			})
			// 删除class=a1的元素p
			$("#b3").click(function(){
				//这里是p
				$("p").remove(".a1")
			})
		})
	</script>
</head>
<body>
	<div style="width: 200px;height: 200px;background-color: green;color: blue;">
		<p>什么鬼</p>
		<p class="a1">我也不知道，我出来凑字数的（我的类名是a1）</p>
		<p>不管啦，加油吧！</p>
	</div>
	<button id="b1" type="button">删除元素及其包含内容</button>
	<button id="b2" type="button">仅清除元素包含内容</button>
	<button id="b3" type="button">仅清除元素包含类名为a1的内容</button>
</body>
</html>

代码实践图：

5.jQuery添加额外样式.addClass()

$（”p“）.addClass(“blue”) //增加额外样式.blue是<style>中的样式名称，比如 .blue{}。

$("p").removeClass("a") //删除样式a

$("p").toggleClass("b") //增加或删除样式b

<!DOCTYPE html>
<html>
<head>
	<title>jQuery增加样式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#b1").click(function(){
				$("#p1").addClass("blue")
			})
			$("#b2").click(function(){
				$("#p1").removeClass("F")
			})
			$("#b3").click(function(){
				$("#p1").toggleClass("blue")
			})
		})
	</script>
	<style type="text/css">
		.F{
			font-weight: bold;
			font-size: 2em;
		}
		.blue{
			color:blue;
		}
	</style>
</head>
<body>
	<div>
		<button type="button" id="b1">【添加新样式】文字变蓝</button>
		<button type="button" id="b2">【删除原有样式】大写取消</button>
		<button type="button" id="b3">【添加或取消新样式】文字变蓝或变黑</button>
		<p id="p1" class="F">什么鬼</p>
	</div>
</body>
</html>

6.jQuery获取和添加元素样式.css()

//获取背景颜色

$("div").css("background-color")

// 为元素修改样式

$("div").css("color","yellow")

// 为元素修改样式

$("div").css({ "color":"blue","background-color":"yellow"})

<!DOCTYPE html>
<html>
<head>
	<title>jQuery css获取和添加</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#b1").click(function(){
				// 获取div的样式
				alert($("div").css("background-color"))
			})
			$("#b2").click(function(){
				// 为元素修改样式
				$("div").css("color","yellow")
			})
			$("#b3").click(function(){
					// 为元素修改样式
				$("div").css({
					"color":"blue",
					"background-color":"yellow"
				})
			})
		})
	</script>
</head>
<body>
	<div style="color:red;background-color: green;">
		<p>加油，坚持！</p>
	</div>
	<button type="button" id="b1">获取div背景颜色样式</button>
	<button type="button" id="b2">为div添加单样式（字体颜色变黄）</button>
	<button type="button" id="b3">为div修改多样式（字体颜色变蓝，背景色变黄）</button>

</body>
</html>

7.jQuery元素/窗口尺寸.width().height()

//不包含内边距和边框

.width（）

.height（）

//包含内边距不包含边框

innerWidth()

innerHeight()

//包含内边距和边框

outerWidth（）

outerHeight（）

//包含内边距和边框和外边距

outerWidth（true）

outerHeight（true）

案例：获取浏览器窗口尺寸大小

<!DOCTYPE html>
<html>
<head>
	<title>获取窗口尺寸</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#b1').click(function(){
				// $('p').hide()
				$('p').text("窗口尺寸大小:"+$(window).width()+"x"+$(window).height())
			})
		})
	</script>
</head>
<body>
	<button type="button" id="b1">获取浏览器窗口尺寸</button>
	<p>我将会被代替</p>
</body>

四.jQuery 遍历

1.jQuery 父辈

//li的上一级父元素背景色变白色

$('li').parent().css("background-color","white")

//li的所有父元素背景色变白色

$('li').parents().css("background-color","white")

//li的所有父元素中id=div1的元素背景色变白色

$('li').parents("#div1").css("background-color","white")

//在li和父元素id=div1之间所有父元素背景色变白色

$('li').parentsUntil("#div1").css("background-color","white")

2.jQuery 儿辈

//id=div1的元素下一级儿子背景色变白色

$('#div1').children().css("background-color","white")

//获取div中所有class=1的元素背景色变白色

$("div").children("p.1").css("background-color","white")

//获取属于 <div> 后代的所有 <span> 元素背景色变白色

$("div").find("span").css("background-color","white")

//获取 <div> 的所有后代背景色变白色

$("div").find("*").css("background-color","white")

3.jQuery 同胞

//获取 <h2> 的所有同胞元素

$("h2").siblings();

//获取属于 <h2> 的同胞元素的所有 <p> 元素：

$("h2").siblings("p");

//获取<h2> 的下一个同胞元素

$("h2").next();

//获取<h2> 的往下所有跟随的同胞元素

$("h2").nextAll();

//获取介于 <h2>往下与 <h6> 元素之间的所有同胞元素：

$("h2").nextUntil("h6");

//获取<h2> 的上一个同胞元素

$("h2").prev()

//获取<h2> 的往上所有跟随的同胞元素

$("h2").prevAll()

//获取介于 <h2> 往上与 <h6> 元素之间的所有同胞元素：

$("h2").prevUntil("h6")

4.jQuery 过滤

//选取首个 <div> 元素内部的第一个 <p> 元素：

$("div p").first();

//选择最后一个 <div> 元素中的最后一个 <p> 元素：

$("div p").last();

//选取第二个 <p> 元素（索引号 1）

$("p").eq(1);

//返回带有类名 "intro" 的所有 <p> 元素

$("p").filter(".intro");

//返回不带有类名 "intro" 的所有 <p> 元素：

$("p").not(".intro");

五.Ajax（获取服务器数据）

1.Ajax加载.txt文件

语法：

$(selector).load(URL,data,callback);

例子：

//#hh2是.txt文件中某标题元素的id，#hh1是本html文件中标题的id
$("#hh1").load('a/ajax.txt #hh2',function(responseTxt,statusTxt,xhr){
        //responseTxt接受到的数据，statusTxt状态，xhr包含XMLHttpRequest对象（不懂）
	if (statusTxt=="success")
		alert("外部内容加载成功");
	if (statusTxt=="error") 
		alert("Error:"+xhr.status+":"+xhr.statusTxt);
                //如果出错，教程返回的是Error:404:未找到文件
});

2.Ajax get/post

$.get(URL,callback);

$.post(URL,data,callback);

例子：index.html

<!DOCTYPE html>
<html>
<head>
	<title>ajax get/post</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#b1").click(function(){
				// 语法：$.get(URL,callback);
				$.get("test_get.php",function(data,status){
					alert("数据:"+data+"\n状态:"+status);
				})
			})
			$("#b2").click(function(){
				// 语法：$.post(URL,data,callback);
				$.post("test_post.php",
				{
					name:"知来物",
					url:"https://www.zhilaiwu.com"
				},
					function(data,status){
						alert("数据:\n"+data+"\n状态:"+status)
				})

			})
		})
	</script>
</head>
<body>
	<button type="button" id="b1">发送http get请求并收到结果。</button>
	<button type="button" id="b2">发送http post请求并收到结果。</button>
</body>
</html>

test_get.php

<?php
echo "string";
?>

test_post.php

<?php
	$name=isset($_POST['name']) ? htmlspecialchars($_POST['name']):'';
	$url=isset($_POST['url']) ? htmlspecialchars($_POST['url']):'';
	echo '网络名：'.$name;
	echo "\n";
	echo "URL地址：".$url;
?>

六. $.noConflict()

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

转载于:https://my.oschina.net/u/3384982/blog/1786687

chenglanxiang6356

关注

0
点赞
踩
0

收藏

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

一.jQuery简介 1.点击元素p，元素p消失 <!DOCTYPE html><html><head> <title>jquery</title> <meta charset="utf-8"> &...
复制链接

扫一扫

jQuery

一.jQuery简介

1.点击元素p，元素p消失

2.选择器

jQuery 元素选择器

jQuery 属性选择器

jQuery CSS 选择器

3.js事件

二.jQuery效果

1.隐藏和显示：

2.淡入淡出：

3.上下滑动

4.动画.animate(）

5.停止动画.stop(）

三.jQuery HTML

1.jQuery 获取

.text():获取文本

.html() ：获取代码

.val()：获取值

attr("href")：获取属性值

2.jQuery 设置

.text("噢"):替代原文本

.html("<b>噢</b>"):替代原html代码

.val("luke"):替代值 ，比如在input中的value值

.attr("href"，“http://www.zhilaiwu.com”):替代原链接地址

3.jQuery 添加

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

4.jQuery 删除/清空

$("div").remove() //删除元素div及其内容

$("p").remove(".a") //删除class=a的元素p

$(“div”).empty() //保留元素div但清除它包含的内容

5.jQuery添加额外样式.addClass()

$（”p“）.addClass(“blue”) //增加额外样式.blue是<style>中的样式名称，比如 .blue{}。

$("p").removeClass("a") //删除样式a

$("p").toggleClass("b") //增加或删除样式b

6.jQuery获取和添加元素样式.css()

$("div").css("background-color")

$("div").css("color","yellow")

$("div").css({ "color":"blue","background-color":"yellow"})

7.jQuery元素/窗口尺寸.width().height()

//不包含内边距和边框

//包含内边距不包含边框

//包含内边距和边框

//包含内边距和边框和外边距

四.jQuery 遍历

1.jQuery 父辈

2.jQuery 儿辈

3.jQuery 同胞

4.jQuery 过滤

五.Ajax（获取服务器数据）

1.Ajax加载.txt文件

2.Ajax get/post

六. $.noConflict()

“相关推荐”对你有帮助么？

.val("luke"):替代值，比如在input中的value值