jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

金清泽

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量94

点赞数

分类专栏：前端文章标签： jquery html5 javascript

本文链接：https://blog.csdn.net/m0_53752829/article/details/120447698

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习目标：

掌握jQuery的基本知识

学习内容：

1、 jQuery概述 2、选择器 3、操作 4、筛选 5、事件

学习时间：

提示：这里可以添加计划学习的时间
例如：
1、 2021年9月15日
2、 2021年9月16日
3、 2021年9月20日

学习产出：

1、技术笔记 1 遍 2、CSDN 技术博客 1 篇

jQuery概述

jQuery建于2006年，是一个轻量级（快速、简洁）的JavaScript库

jQuery对JavaScript做了轻量级的封装，简化了语法

理念：写得少（语法简单），做得多（功能强大）

jQuery对象与DOM对象

jQuery对象：

就是通过jQuery（）或者$（）包装DOM对象后产生的对象

jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么它就可以使用jQuery里面的方法：$("#id").html();

jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery对象的方法

jQuery对象转成DOM对象

(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象

(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

		var jobj = $("#textid");//jquery的语法获得标签对象 
			jobj[0];
			jobj.get(0);
			alert(jobj[0]);

DOM对象转成jQuery对象

对于一个 DOM 对象, 只需要用 $() 把DOM 对象包装起来( jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象

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

选择器

基本选择器

基本选择权通过标签 id, class 和标签名来查找 DOM 标签

1）#id

2).class

3)element

4)selector1,selector2…复合选择器

5）* 通配选择器

			  //id选择器
			  var obj = $("#textid");
			  
			  //标签选择器
			  var objs = $("input");
			  
			  //类选择器
			  var objs = $(".incss");
			  
			  //选择器组合
			  var objs = $(".incss,input");
			  
			  //通配选择器
			  var objs = $("*");

表单选择器

:input

:text

:password

:radio

:button

:submit

:reset

:image

:checkbox

:file

:hidden

除了基本选择器和表单选择器，还有很多其他的选择器

			  //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']")

操作

操作html属性

val() 获得第一个匹配标签的当前值

val(val)设置所有匹配标签的值

attr(name)获得第一个匹配标签的属性值

attr(name,value)设置所有匹配的标签设置一个属性值

attr方法只能操作标签中已经定义的属性,不能操作动态添加的属性

removeAttr(name);删除所有匹配的标签中已经定义的属性

		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		  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");
		  }
		</script>

操作CSS属性

		<script type="text/javascript">
		  function test(){
		 
		    // 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");  //切换类   有 就删除  没有 就添加
		 }
		</script>

操作文本

		<script type="text/javascript">
		var  i = 0;
		  function test(){
			  i++;
		     // alert($("#div1").html()); 获得html内容(包含标签)
              //alert($("#div1").text()); 只能获得文本内容
			  
			 //$("#div2").html("<b>aaaa</b>"+i); //设置html内容  可以解析字符串中的标签
			 //$("#div2").text("<b>aaaa</b>"); 设置文本内容 不会解析字符串中的标签
	
			 //$("div").append("<b>aaaa</b>");//向标签的末尾追加html内容
			 
			 //$("#div1").before("<b>aaaa</b>"); 向标签之前追加 html内容
			 //$("#div1").after("<b>aaaa</b>"); 向标签之后追加 html内容
			 
			 // $("p").appendTo("#div1"); 将指定的标签 移动到指定的标签中
			 
			  // $("#div1").remove();   删除网页中的标签
			  
			  // $("#div1").empty(); 清空标签中的内容
            }
		</script>

筛选

筛选-祖先

			  //祖先(直接父级  父级的父级)
              //var objs = $("#div1").parent();//只获得直接上级标签
			  //var objs = $("#div1").parents();//获得所有的父级标签
			  //var objs = $("#div1").parents("html");//获得祖先中指定的父级标签

筛选-后代

				//后代（子级  孙子）
				//var objs = $("#d1").children();//获得所有儿子级别的标签
				//var objs = $("#d1").children("p");//获得儿子标签中指定得标签
				var objs = $("#d1").find("b");//返回被选标签的后代标签，(必须要在find里传入参数)

筛选-同胞

				//同胞
				//var objs = $("#d1").siblings();//返回被选标签的所有同胞标签
				//var objs = $("#d1").next();//返回被选标签的后一个相邻标签
				//var objs = $("#d1").nextAll();//返回被选标签的所有后面的同胞标签
				//var objs = $("#d1").prev();//返回被选标签的前一个相邻标签
				var objs = $("#d1").prevAll("p");//返回被选标签的所有前面的同胞标签

筛选-过滤

first()返回被选标签的首个标签

last()返回被选标签的最后一个标签

eq()返回被选标签中带有指定索引号的标签

filter()返回匹配的标签

not()返回不匹配标准的所有标签

筛选-判断

is() 根据选择器、标签或 jQuery 对象来检测匹配标签集合，如果这些标签中至少有一个标签匹配给定的参数，则返回 true

hasClass()检查当前的标签是否含有某个特定的类，如果有，则返回

true。

事件

ready事件

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

		//ready(fn)等同于onload事件 网页加载就绪后执行
			/* $(document).ready(function(){
				$("#btn").click(function(){
					alert("11111");
				})
			}) */
			//ready 的简写方式
			/* $(function(){
				
			}) */

绑定事件

		$(function(){
				$("input[type='button']").click(function(){
					//alert($(this).val());
					alert(this.value);
				})
			})

合成事件

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

		//hover(over,out) over是移入触发的函数，out是移出触发的函数
			$(function(){
				$("#d1").hover(
					function(){
						$(this).css("background-color","red");
					},
					function(){
						$(this).css("background-color","green");
					}
				);
			})

其他常用事件

			 $(function(){
			  //添加事件 
			  $("#btnid").bind("click",function(){
				  alert(this.value);
			  })
			  删除指定事件
			  $("#btnid").unbind("click"); */
			  //事件切换  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() );
			   });
             }