jQuery整理

最新推荐文章于 2022-04-16 16:25:56 发布

Dawn_WL

最新推荐文章于 2022-04-16 16:25:56 发布

阅读量621

点赞数

本文链接：https://blog.csdn.net/Dawn_WL/article/details/78148985

版权

 
 jQuery基础： 

 
 、、、、、、、、、一套定义好的方法 

 
 jquery主旨： 

以更少的代码，实现更多的功能

 
 优势： 

 
 1、可以像css一样访问和操作dom 

 
 2、修改css控制页面外观 

 
 3、简化js代码操作 

 
 4、事件处理更加容易 

 
 5、动画效果使用方便 

 
 6、Ajax技术更加完美 

 
 7、大量的基于jquery的插件 

 
 8、可以自定义扩展功能插件 

 
 其他库： 

 
 1、YUI 

 
 2、prototype最早成型的js库之一 

 
 3、dojo 

 
 4、mootools轻量、简介、模块化和面向对象的js框架 

 
 5、extjs主要用于创建前端用户界面 

 
 语法： 

 
 格式：$(selector).action() 

 
 1、美元符号本身是对象的缩写 

 
 2、选择符查询和查找html元素 

 
 3、action执行对元素的操作 

 
 示例：$('p').hide():隐藏p元素 

 
 js对象和jq对象转换： 

              //把原生对象转成jq对象
               var p1=document.getElementById('p1');
               var jp= $(p1);
               jp.html('ssss');
               //jq转原生对象
               var jp=$('#p1');
               var p1=jp[0];
               p1.innerText='sssss';

 
  解决多库冲突; 
 
  jquery.noconflict();//放弃$ 
 
  API文档： 
 
  http://jquery.cuishifeng.cn/ 
   
  选择器：

#id

element

class

selector1,selector2,selectorN

层级选择器：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//层级选择器
				//$("form input").val('test');//选中后代，包括非直系后代
				//选中直系后代，不包括非直系后代
				//$('form > input').val('test');
				//$('#l1+input').val('test');//匹配紧接在该元素下一元素，匹配的必须是同级的
				$("form ~input").val('test');//匹配后面同级别的所有元素
			})
		</script>
	</head>
	<body>
		<form>
		  <label id="l1">Name:</label>
		  <input name="name" />
		  <fieldset>
	      <label>Newsletter:</label>
	      <input name="newsletter" />
		  </fieldset>
		</form>
		<input name="none" />
	</body>
</html>

 
  属性选择器： 
 
 
   
  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//$("div[id]").html('test');//选中包含属性的元素
				//$("input[name='a']").attr('checked',true);//指定属性名匹配的元素
				//$("input[name^='a']").attr('checked',true);//匹配以指定值开头的元素
				//$("input[name$='c']").attr('checked',true);//匹配以指定值结尾的元素
				//$("input[name*='f']").attr('checked',true);//匹配有指定值得元素
				$("input[id][name*='f']").attr('checked',true);//匹配多个条件
			})
		</script>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				border: 2px solid red;
				
				
			}
		</style>
	</head>
	<body>
		<div class="a">
			
		</div>
		<div id="d1" class="b">
			
		</div>
		<input type="checkbox" name="afb"  value="" />
		<input type="checkbox" name="afc" id="" value="" />
		<input type="checkbox" name="fc" id="" value="" />
		<input type="checkbox"  id="" value="" />
	</body>
</html> 
 
 
   内容选择器： 
  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>内容选择器</title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//$("div:contains('ss')").html('aaaa');//匹配包含文本的元素
			
				//$("div:empty").html('saaaaa');//匹配为空的元素
				//$("div:has('p')").html('12344');//匹配元素里含有匹配的元素
				$("div:parent").html('哈哈');//匹配含有子元素或者文本的元素
				
			})
		</script>
		<style type="text/css">
			div{
				height: 200px;
				width: 200px;
				background-color: red;
				border: 3px solid black;
				
			}
		</style>
	</head>
	<body>
		<div id="">
			ssss
		</div>
		<div id="">
			<p></p>
		</div>
		<div id="d1"></div>
		<textarea name="" rows="" cols="" style="resize: none;"></textarea>
	</body>
</html>
 
  设置元素及内容: 
 
 
  html():获取元素中html内容 
 
 
  html（value）：设置元素中html内容 
 
 
  text（）：获取元素中文本内容 
 
 
  text（value）：设置原生中文本内容 
 
 
  val():获取表单中的文本内容 
 
 
  value（value）:设置表单中的文本内容 
 
 
   操作元素属性： 
  
attr(key):获取某个元素key属性的属性值
 
  attr(key,value):设置某个元素key属性的属性值 
 
 
  attr({key1:value2,key2:value2...}):设置某个元素多个key属性的属性值 
 
 
  attr(key,function(index,value){}):设置某个元素key通过fn来设置 
 
 
   操作CSS: 
  

 
   来回切换指定样式和默认样式: 
  
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//$("#d1").addClass('demo');//添加css样式
				//$("#d1").removeClass('demo');//删除css样式
				
                $("#d1").mouseover(function(){
                	$("#d1").toggleClass("demo");
                }).mouseout(function(){
                	$("#d1").toggleClass('demo2');
                })								
			})
		</script>
		<style type="text/css">
			.demo{
				height: 300px;
				width: 300px;
				border: 2px solid orange;
				
				background-size: auto;
				
			}
			.demo2{
				height: 300px;
				width: 300px;
				border: 3px solid red;
				
				background-size: contain;
			}
		</style>
	</head>
	<body>
		<div id="d1" class="demo">
			
		</div>
	</body>
</html>
 
  文档的宽高度及内边框大小操作： 
  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//alert($('div').width());
				//$('div').width(500);
				/*$('div').width(function(index,width){
					return width-100+'px'
				})*/
				//计算内外边距
				alert($('div').width());//宽度
				alert($('div').innerWidth());//包含内边距的宽度
				alert($('div').outerWidth());//包含边框和内边距
				alert($('div').outerWidth(true));//包含边框和内边距，外边距
			})
			
		</script>
		<style type="text/css">
			div{
				width: 300px;
				padding: 100px;
				border: 100px solid red;
				margin: 100px;
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html> 
 
 
   位置偏移： 
  
 
   
  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				alert($('div').offset().top);//获取相对于视口的偏移值
				alert($('strong').offset().top);
				alert($('strong').position().top);//获取某元素相对于父元素的值
				$(window).scrollTop(300);//使滚动条处于相对视口顶端300单位的位置
			})
		</script>
		<style type="text/css">
			div{
				position: absolute;
				top: 5px;
			}
			strong{
				position: absolute;
				top: 1px;
			}
		</style>
	</head>
	<body>
		<div id="">
			<strong></strong>
			<p>1</p>
			<p>1</p>
			<p>1</p>
			
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
			
			<p>1</p>
			<p>1</p>
			<p>1</p>
			<p>1</p>
		</div>
	</body>
</html> 
 
 
  创建节点： 
 
 
  <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>dom操作节点</title>
		<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var box=$('<div id="box">节点</div>');//创建节点
				$('body').append(box);//插入节点
				$("div").append(function(index,html){//使用指定索引添加元素
				return '<strong>dom</strong>';
			    })
				$('strong').appendTo('div');//将已有的元素移动到指定元素里
				$('div').prepend('<strong>dom</strong>')//把它放到节点的前面
				
				
			})
			
		</script>
	</head>
	<body>
		<strong>dom</strong>
		<div >
			节点
		</div>
	</body>
</html> 
 