jquery 方法

最新推荐文章于 2020-09-08 12:31:33 发布
最新推荐文章于 2020-09-08 12:31:33 发布
阅读量479 收藏
点赞数
分类专栏： JS jquery
JS 同时被 2 个专栏收录
29 篇文章 0 订阅
订阅专栏
jquery
10 篇文章 0 订阅
订阅专栏

test.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<input type="text" value="xx"/>
	<input type="text" value="yy"/>
	<input type="text" value="zz"/>
	
	<script type="text/javascript">
		alert( $("input").val() );//xx默认首项
	</script>	
  </body>
</html>
each.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<script type="text/javascript">
	
		/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
		var nameArray = new Array("哈哈","呵呵","嘻嘻");
		for(var i=0;i<nameArray.length;i++){
			document.write(nameArray[i]+"<br/>");
		}*/
		
		/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
		var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
		var $nameArray = $(nameArray);//jquery对象
		$nameArray.each(function(){
			this表示数组中每一个元素，this属性js对象，this代表string类型
			alert(this);
		});*/	
		
		//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
		var nameArray = [
			{
				name : "哈哈",
				sal : 6000
			},
			{	
				name : "嘿嘿",
				sal : 7000
			},
			{
				name : "笨笨",
				sal : 8000
			}
		];
		var $nameArray = $(nameArray);
		$nameArray.each(function(){
			//this代表object类型
			alert(this.name + ":"+this.sal);
		});
		
	</script>
  </body>
</html>

append_prepend.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<ul>
		<li>第一项</li>
		<li>第二项</li>
		<li>第三项</li>
	</ul> 
	 
	<hr/>
		
	<div>这是子元素，要插入到父元素内</div>
	
	<script type="text/javascript">
		
		//DIV标签插入到UL标签之后(父子关系)
		//$("ul").append( $("div") );	
		
		//DIV标签插入到UL标签之前(父子关系)
		$("ul").prepend( $("div") );
	
	</script>
	
  </body>
</html>

attr.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<form>
		<table>
			<tr>
				<td>
					<input type="text" name="username" value="张三"/>
				</td>
				<td>
					<input type="password" name="password" value="123456"/>
				</td>
			</tr>
		</table>
	</form>
	
	<script type="text/javascript">
		//取得form里第一个input元素的type属性
		//alert( $("form input:first").attr("type") );//text
		
		//设置form里最后个input元素的为只读文本框
		//$("form input:last").attr("readonly","readonly")
		//$(":password").attr("readonly","readonly")
		
	</script>
	
  </body>
</html>

create_element_text_attr.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
  
  	
  
  	<script type="text/javascript">
  		
  		//创建div元素，添加"哈哈"文本，ID属性，并添加到文档中
  		//<body><div id="2015">哈哈</div></body>
  		
  		/*js方式
  		var divElement = document.createElement("div");
  		divElement.innerHTML = "哈哈哈";
  		divElement.setAttribute("id","2015");
  		divElement.id = "2015";
		document.body.appendChild(divElement);*/
		  		
  		//jquery方式
  		var $div = $("<div id='2015'>哈哈哈哈哈</div>");
  		//$("body").append( $div );	
  		$(document.body).append( $div );	
  			
  	</script>
  
  </body>
</html>
remove_element.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
  	
  	
  	<ul id="a">
		<li>第一项</li>  	
		<li id="secondID">第二项</li>  	
		<li>第三项</li>  	
  	</ul>
  	
  	<ul id="b">
		<li>第一条</li>  	
		<li id="secondID">第二条</li>  	
		<li>第三条</li>  	
  	</ul>
  	
	<div>这是div元素</div>
  	
  	<script type="text/javascript">
  	
  		//删除ID为secondID的LI元素
		//$("#secondID").remove();
  		
  		//删除所有LI元素
  		//$("#a li").remove();
  		
  		//删除UL元素
  		$("#b").remove();
  		
  	</script>	
  	
  </body>
</html>

clone_true.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	
	<input type="button" value="原按钮" οnclick="alert('静态事件')"/> 
			 	
	<script type="text/javascript">
	
		//复制原input元素，添加到原input元素后，与其同级
		/* var $old = $(":button");
		var $new = $old.clone();
		$new.val("新按钮");
		$old.after( $new ); */
	
		//为原input元素动态添加单击事件，且复制原input元素，
		var $old = $(":button");
		$old.click(function(){
			alert("动态事件");
		});
		
        //添加到原input元素后，与其同级，且和原按钮有一样的行为
        var $new = $old.clone(true);
        $new.val("新按钮");
	$old.after( $new );	
	</script>
  </body>
</html>

replaceWith.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<table border="1" align="center">
		<tr>
			<td>
				<div style="width:165px;height:23px">
					双击会被替换成文本框
				</div>
			</td>
			<td>
				不会变
			</td>
		</tr>
	</table>
	
	<script type="text/javascript">
		//双击<div>中的文本，用文本框替换文本
		$("div").dblclick( function(){
			var $text = $("<input type='text' style='width:165px;height:23px'/>");
			//文本框替代div标签
			$(this).replaceWith( $text );
		} );
	</script>
	
  </body>
</html>

removeAttr.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<table>
		<tr>
			<td>
				添加属性border/align/width
			</td>
			<td>
				删除属性align
			</td>
		</tr>
	</table>
	
	<script type="text/javascript">
		//为<table>元素添加属性border/align/width
		var $table = $("table").attr("border","2").attr("align","right").attr("width","60%")
		
		//将<table>元素的align属性删除
		$table.removeAttr("align");
	</script>
	
  </body>
</html>

addClass_removeClass_toggleClass_hasClass.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
    	.myClass{
    		font-size:30px;
    		color:red
    	}
    </style>
   <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<div>无样式</div>
	
	<div class="myClass">有样式</div>
	
	<script type="text/javascript">
	
		//为无样式的DIV添加样式
		$("div:first").addClass("myClass");
		
		//为有样式的DIV删除样式
		$("div:last").removeClass("myClass");
		
		//切换样式，即有样式的变成无样式，无样式的变成有样式
		$("div").toggleClass("myClass");
		
		//最后一个DIV是否有样式
		var flag = $("div:last").hasClass("myClass");
		alert(flag?"有样式":"无样式");
	</script>
  </body>
</html>
offset_width_height.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	
	<img src="../images/zgl.jpg"/>
	
	<script type="text/javascript">
	
		//获取图片的坐标
		var offset = $("img").offset();
		var x = offset.left;
		var y = offset.top;
		alert(x+":"+y);
		
		//设置图片的坐标
		$("img").offset({
			top:100,
			left:200
		});
		
		//获取图片的宽高
		var w = $("img").width();
		var h = $("img").height();
		alert(w+":"+h);
		
		//设置图片的宽高
		$("img").width(500);
		$("img").height(600);
		
	</script>
  
  </body>
</html>

children_next_prev_siblings.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>method_1.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
	<p>Hello</p>
	<div>
		<span>
			Hello Again
			<b>
				Bold
			</b>
		</span>
	</div>
	<p>And Again</p>
	<span>And Span</span>

	<script type="text/javascript">
	
		//取得div元素的直接子元素内容，不含后代元素
		var $span = $("div").children();
		var content = $span.html();//包含子标签
		var content = $span.text();//不包含子标签
		alert(content);
		
		//取得div元素的下一个同级的兄弟元素内容	
		var $p = $("div").next();
		alert( $p.text() );
		
		//取得div元素的上一个同级的兄弟元素内容
		alert( $("div").prev().text() );
		
		//依次取得div元素的上下一个同级的所有兄弟元素的内容
		var $all = $("div").siblings("p");		
		$all.each(function(){
			alert( $(this).html() );
		});
		
	</script>
	
  </body>
</html>

动画效果

show_hide.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>

	<p>
		<img src="../images/zgl.jpg"/>
	</p> 
	 	
	<script type="text/javascript">
		//图片隐蔽
		$("img").hide(5000);
		
		//休息3秒
		window.setTimeout(function(){
		
			//图片显示
			$("img").show(5000);
		
		},3000);
		
	</script>
	
  </body>
</html>

fadeIn_fadeOut.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
   </head>
  <body>
	<p>
		<img src="../images/zgl.jpg" style="display:none"/>
	</p>  	
	
	<script type="text/javascript">
		//淡入显示图片
		$("img").fadeIn(3000);
		//淡出隐蔽图片
		$("img").fadeOut(3000);
	</script>	
		
  </body>
</html>

slideUp_slideDown.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
  </head>
  <body>
  
	<div>
		中国0<br/>	
		中国1<br/>	
		中国2<br/>	
		中国3<br/>	
		中国4<br/>	
		中国5<br/>	
		中国6<br/>	
		中国7<br/>	
		中国8<br/>	
		中国9<br/>	
	</div> 
	 
	<input type="button" value="我的好友"/>
	
	<script type="text/javascript">
		//向上下滑动
		$(":button").click(function(){
			//div标标上下移动
			$("div").slideToggle(1000);
		});
	</script>	
	
  </body>
</html>


Tomsheng321
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery通过find和attr找到对应的属性值
qq_35383788的博客
06-03 4205
例如：点击一个按钮，输出console.log(this.innerHTML);，得到： <img class="mui-media-object mui-pull-right" src="../../images/daiwanshan.png"><div class="mui-media-body">申请人:aa<p class="mui-ellipsis">计算机名:&nbsp;&nbsp;&nbsp;&nbsp;出厂编码:</
jQuery中的attr()与prop()设置属性、获取属性的区别
farmwang的专栏
02-27 1047
举例，比如我们要获取checkbox的属性或者设置checkbox选中或不选中。 $("#editForm").find("input[type='checkbox']").attr("checked",false);//非标准写法 $("#editForm").find("input[type='checkbox']").attr("checked",true);//非标准写法 $(&q
jquery中remove()与detach()的区别
我本无名的专栏
02-28 3万+
jquery是一个很大强的东西，在工作中常能用到，可是有些方法还是因为不常用到，或是没有注意到而被我们而忽略。 　　remove()和detach()可能就是其中的一个，可能remove()我们用得比较多，而detach()就可能会很少了。可能我用的不够精吧，我是一次也没有用过。可是这次因为一个项目中一个问题，而用到它，感觉很有意思就记录下来，与大家分享。 　　remove():官方的解释是
Jquery选择器以及JQuery属性获取 attr
我是孤单的飞鸟
06-01 2353
var ctype = $(".people-askclass li a.act:eq(0)").attr('data-ctype') 解释： 第一个 li 下面  a 标签 带act 样式的 含 ‘data-ctype’属性的值  切记   a.act:eq(0)  中间不能有空格
JQuery利用find查找子元素并修改其样式和属性
T型人小付的博客
09-08 9099
最近做项目遇到一个根据ajax结果自动更新form表单内元素的需求，涉及到JQuery关于子元素的一些操作，特意记录一下。 文章目录测试环境子元素查找修改元素样式和属性 测试环境 html如下 <div id="container"> <div id="box1"><span id="span1"></span></div> <div id="box2"><span id="span2"></span&
jquery方法
05-06
常用的jquery方法进行了总结，以便于用的时候查找
Jquery方法大全
03-17
Jquery 方法大全
JQuery方法事件大全
10-13
JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全，JQuery方法事件大全
jQuery 方法大全方便学习参考
10-29
学习jquery的朋友可以了解下jquery的属性与参数，方便资料的查找。
常用jquery方法大全
07-28
NULL 博文链接：https://newleague.iteye.com/blog/774908
jQuery中获取属性值：attr()、html()、text()、val()等(一)
五彩世界的博客
07-16 3985
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;01_basic.html&lt;/title&gt; &lt;meta name="keywords" content="keyword1,keyword2,keyword3"&gt; &lt;meta nam
jquery中select操作append、prepend、remove、find、val、get、selectedIndex、attr、option
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-29 4856
全栈工程师开发手册 （作者：栾鹏） jquery系列教程2-DOM操作全解 jquery中select操作jquery中select操作函数和字段包括append、prepend、remove、find、val、get、selectedIndex、attr、option，具体功能如代码中注释。代码如下：$("#selectId").append("<option value='"+value+"'
jquery中val获取值，attr获取属性值和attr设置属性值
u010746364的博客
11-24 8806
$(document).ready(function(){ $("#btn1").click(function(){ alert("Value: " + $("#test").val()); }); $("#btn2").click(function(){ alert("Value: " + $("#btnValue").val()); }); }); 姓
jQuery attr()获取属性和设置属性的方法
热门推荐
u013746071的专栏
09-06 7万+
前言： 在JS中设置节点的属性与属性值用到setAttribute(),获得节点的属性与属性值用到getAttribute(),而在jquery中，只需要用到attr()这个函数就可以了。attr是attribute（属性）的缩写。 语法： 1、attr(“属性名”)； //获取属性的值（取得第一个匹配元素的属性。通过这个方法可以方便的从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，
input输入框对伪类（after，before）支持情况
Young的博客
09-07 1万+
input 对伪元素(:before :after)的支持情况 伪类是个很便捷的元素，今天写东西的时候，突然发现没效果，后来发现input对伪类也有不支持的，记录一下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
javaWeb之JQuery
我就是大佬 的博客
04-12 221
JQuery 基础 1. 概念： 一个JavaScript框架。简化JS开发 * jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一...
javaweb项目中导入jquery
梦想天空分外蓝
10-12 9987
导入jquery文件 --> helloworld.html --> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); If you click on me, I will disappear.
选择器
weixin_34232363的博客
10-08 66
包含：基本选择器；层级选择器；基本过滤选择器；层级选择器；筛选选择器 基本选择器 层级选择器 基本过滤选择器 属性选择器 筛选选择器 转载于:https://www.cnblogs.com/zhao-ting/p/9756643.html...
Javaweb jQuery介绍
weixin_45829957的博客
08-23 350
1、jQuery 介绍 什么是jQuery ? jQuery，顾名思义，也就是JavaScript 和查询（Query），它就是辅助JavaScript 开发的js 类库。 jQuery 核心思想！！！ 它的核心思想是write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度 jQuery 现在已经成为最流行的JavaScript 库，在世界前10000 个访问最多的网站中，有超过55%在使用 jQuery。 jQuery 好处！！！ jQ.
jquery 方法重写
最新发布
08-23
在jQuery中，你可以通过使用`$.fn.extend`方法来重写已有的jQuery方法。这个方法可以用来扩展或修改jQuery的原型对象。 下面是一个简单的例子，展示如何重写`click`方法： ```javascript // 重写click方法 $.fn....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值