jQuery学习心得总结

jQuery● jQuery是于2006年初建立的一个轻量级javascript库(即一个快速的，简洁的javaScript库)。● Jquery是对javaScript做了轻量级的封装,简化语法● jQuery 理念: 写得少(语法简单), 做得多(功能强大)。jQuery 对象jQuery 对象就是通过 jQuery() 或$()包装 DOM 对象后产生的对象。jQuery 对象是 jQuer

☆青鸟☆

5507人浏览 · 2021-10-24 20:49:46

☆青鸟☆ · 2021-10-24 20:49:46 发布

jQuery学习

一级目录

二级目录

三级目录

● jQuery是于2006年初建立的一个轻量级javascript库(即一个快速的，简洁
的javaScript库)。
● Jquery是对javaScript做了轻量级的封装,简化语法
● jQuery 理念: 写得少(语法简单), 做得多(功能强大)。

jQuery 对象

jQuery 对象就是通过 jQuery() 或$()包装 DOM 对象后产生的对象。
jQuery 对象是 jQuery 独有的,如果一个对象是 jQuery 对象, 那么它就可以使用
jQuery 里的方法: $(“#id”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery
里的任何方法。

原生DOM对象与 jquery对象的区别
原生DOM对象实际表示网页中的标签.
jquery对象是一个数组对象,将原生的DOM包含在里面,然后在数组对象中封装了许多方法.
dom对象中的方法与 jquery对象中的方法完全不同,不能相互调用

 //var jobj = jQuery("#textid");
			  var jobj = $("#textid");//jquery的语法获得标签对象   jQuery对象
			  //alert(jobj.val());

		  //dom对象转为jquery对象
		  //alert($(tobj));

jQuery与2006年创建的一个轻量级的javaScript库
对javaScript做了轻量级的封装,简化了语法
理念:写得少,做的多

	   误区: jquery代替了javaScript  这是错误

选择器

●选择器是 jQuery 的根基, 在 jQuery 中对事件处理, 遍历DOM 操作都依赖于选择器
● jQuery 选择器的优点: 简洁的写法

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过
标签 id, class 和标签名来查找 DOM 标签(在网页中 id 只能使用一次,
class 允许重复使用

表单选择器

对于以下组件进行简便化:

:input :text :password : radio : button :submit :reset :image :checkbox :file :hidden

		  //标签选择器
		  //var objs = $("input");
		  
		  //类选择器
		  //var objs = $(".incss");
		  
		  //选择器组合
		  //var objs = $(".incss,input");
		  
		  //通配选择器
		  //var objs = $("*");
		  
		  //var objs = $("li:first");
		  //var objs = $(".lis:first");
		  //var objs = $(".lis:last");
		  
		  //var objs = $("li:odd")
		  //var objs = $("li:even")
		  
		  //var objs = $("li:gt(0)")
		  
		  //var objs = $("li[name]")
		   var objs = $("li[name!='aa']")
		  console.log(objs.length)
	  }
	</script>
</head>
<body class="incss">
	<input type="text" id="textid" class="incss"/>
	<ul>
	    <li class="lis" name="aa">list item 1</li>
	    <li class="lis" name="bb">list item 2</li>
	    <li class="lis">list item 3</li>
	    <li class="lis">list item 4</li>
	    <li class="lis">list item 5</li>
	</ul>
	<input type="button" value="测试" onclick="test()" />
</body>
</html>

  function test(){
			
			//val() 获得第一个匹配标签的value属性值
			//val(v) 设置所有匹配的标签的value属性值  
			//$("#textid2").val($("#textid1").val());
			
			//console.log($("input").val());
			//$("input").val("aaa");
			
			//attr("属性名") 获得指定属性的值
			//console.log($("input").attr("type"));
		 
		    //attr("name","value"); 设置匹配标签的属性值
			//$(":checkbox").attr("checked",false);
			
			//删除属性
			//$(":checked").attr("checked",false);
			$(":checked").removeAttr("checked");
		
		  }

jQuery操作-html属性

● val() 获得第一个匹配标签的当前值
● val(val)设置所有匹配标签的值
● attr(name)获得第一个匹配标签的属性值
● attr(name,value)设置所有匹配的标签设置一个属性值
● attr方法只能操作标签中已经定义的属性,不能操作动态添加的属性
removeAttr(name);删除所有匹配的标签中已经定义的属性

jQuery操作- css属性

● 取得样式name属性的值
cs s (name)
● 设置样式name属性的值
cs s (name,val)
cs s ({“name”:” val”, “name”:” val” })
● 为每个匹配的标签添加指定的clas s
addClas s (clas sname)
● 从所有匹配的标签中删除全部或者指定的
removeClass (clas sname)
● 如果已经存在就删除一个类，如果没有就添加一个类
toggleClass (cal s sname)

    // console.log($("#div1").css("background-color")); 获得指定属性的值
  
   // $("#div1").css("background-color","red"); 设置属性值
   //css(name,value) 设置的是行内样式表 优先级高
   //$("#div1").css({"background-color":"red","width":"200px","height":"200px"});
	//$("#div2").addClass("divcss");  添加类
	//$("#div2").removeClass("divcss");  删除类
	
	$("#div2").toggleClass("divcss");  //切换类   有 就删除  没有 就添加

jQuery操作-文本

• 获得第一个匹配标签的html内容
html()
• 设置所有匹配标签的html内容
html(val)
• 获得所有匹配标签文本内容
text()
• 设置所有匹配标签文本内容
text(val)

● 向所有匹配标签中追加一些HTML标记
append(content);
● 匹配的标签之后追加HTML内容。
after(content)
● 匹配的标签之前追加HTML内容。
before(content)
● 把指定的标签移动到指定的标签中
appendTo(content)
• 从DOM中删除所有匹配的标签
remove()
• 清空DOM中所有匹配的内容
empty()

筛选-祖先

筛选是对获取的对象进行筛选，最终留下符合某些特征的对象。
parent()返回被选标签的直接父标签
parents()返回被选标签的所有祖先标签，它一路向上直到文档的根标签

筛选-后代

● children()返回被选标签的所有直接子标签
● find()返回被选标签的后代标签，一路向下直到最后一个后代

筛选-同胞

● siblings()返回被选标签的所有同胞标签
● next()返回被选标签的后一个相邻标签
● nextAll()返回被选标签的所有后面的同胞标签
● prev()返回被选标签的前一个相邻标签
● prevAll()返回被选标签的所有前面的同胞标签

<script type="text/javascript">
		  function test(){
		    //祖先(直接父级  父级的父级)
              //var objs = $("#div1").parent();//只获得直接上级标签
			  //var objs = $("#div1").parents();//获得所有的父级标签
			  //var objs = $("#div1").parents("html");//获得祖先中指定的父级标签

			//后代 (子级,孙子)  
			  //var objs = $("#div1").children();  获得所有的儿子级别的标签
			  //var objs = $("#div1").children("b"); 获得指定的儿子级别的标签
			  
			  //var objs = $("#div1").find("b"); //获得指定的后代标签
			  
			//同胞  
			//var objs = $("#div1").siblings();//获得上下所有的兄弟标签
			//var objs = $("#div1").siblings("p"); 获得上下指定的兄弟标签
			
			//var objs = $("#div1").next();
			//var objs = $("#div1").nextAll();
			//var objs = $("#div1").nextAll("p");
			
			//var objs = $("#div1").prev();
			//var objs = $("#div1").prevAll();
			  console.log(objs.text())
	     }
		</script>

筛选-过滤

● first()返回被选标签的首个标签
● last()返回被选标签的最后一个标签
● eq()返回被选标签中带有指定索引号的标签
● filter()返回匹配的标签
● not()返回不匹配标准的所有标签

筛选-判断

● is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合，如果这些
标签中至少有一个标签匹配给定的参数，则返回 true
● hasClass()检查当前的标签是否含有某个特定的类，如果有，则返回
true。

jQuery事件-ready事件

● 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
● 这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的。响应速
度。
语法：

$(document).ready(匿名函数);
$(document).ready(function(){ 在这里写你的代码... });
简单写法：
$(fucntion(){
在这里写你的代码... }

jQuery事件-绑定事件

给此div在js中动态绑定点击事件

 $(function(){ $("#divOne").click(function(){ alert("div被点击了"); }); });

jQuery事件-合成事件

hover()：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方
法，当鼠标移动到一个匹配的标签上面时，会触发指定的第一个函数。当鼠标移
出这个标签时，会触发指定的第二个函数。
$(“选择器").hover( fn1,fn2);

jQuery事件-其它常用事件

● on()方法绑定事件处理程序到当前选定的jQuery对象中的元素
● one() 一次性事件
● resize()当浏览器窗口改变大小时触发

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript">

	      //window.οnlοad=function(){}
		  //ready(fn) 等同于 onload事件  网页加载就绪后执行
		 /* $(document).ready(function(){
			  
			  $("#btnid").click(function(){
				  alert("按钮");
			  });
		  }); */
	
	     //ready的简写方式
		  $(function(){
			  //为标签动态添加事件,以及事件的处理函数
			  /* $("#btnid").click(function(){
					 test();
			  }); */
			  
			/*  $("#btnid").dblclick(function(){
				  alert();
			  }); */
			  
			  //批量的为标签添加事件 及 处理函数
			 /* $("input[type='button']").click(function(){
				    alert($(this).val());
			  }); */
			  
			  /*
			  //添加事件 
			  $("#btnid").bind("click",function(){
				  alert(this.value);
			  })
			  删除指定事件
			  $("#btnid").unbind("click"); */
			  
			  //hover(over,out) over移入触发的函数  out是移出触发的函数
			  /* $("#div1").hover(
			            function(){
							$(this).css("background-color","red");
						},
						function(){
							$(this).css("background-color","green");
						}
			  ); */
			  
			  //事件切换  toggle(fn1,fn2,fn3...)
			  /* $("#btnid").toggle(
			      function(){
					  $(this).css("background-color","green");
				  },
				  function(){
				  	 $(this).css("background-color","red");	  
				  },
				  function(){
				  	$(this).css("background-color","blue");	  			 			  
				  }
			   ); */
			   
			   //一次性事件
			   $("#btnid").one("click", function(){
			     alert( $(this).val() );
			   });
		  })
		  
		  //监听浏览器窗口发生变化时触发
		  $(window).resize(function(){
		    console.log(window.innerWidth+"::"+window.innerHeight);
		  });
		  
		  function test(){
		  	 alert("按钮");  
		  }
		 
		</script>
	</head>
	<body>
		 
		<input type="button" value="按钮1" id="btnid" />
		<input type="button" value="按钮2"  />
		<input type="button" value="按钮3" />
		
		<div id="div1" style="background-color: green;">
			aaaa
		</div>
	
	</body>
</html>