什么是jQuery?

最新推荐文章于 2022-04-17 15:47:32 发布

quge_name_harder

最新推荐文章于 2022-04-17 15:47:32 发布

阅读量425

点赞数

分类专栏： jQuery 文章标签： JQuery

本文链接：https://blog.csdn.net/quge_name_harder/article/details/82925436

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、什么是jQuery?

一款跨主流浏览器的JavaScript库，用于简化JavaScript对HTML操作

二、使用步骤

引入jQuery的包<script type="text/javascript" src="js/jquery-1.8.2.js"></script>，然后使用它的api

三、js对象和jQuery对象互转

1) js对象转成jQuery对象【重点】

语法：$(js对象)---->jQuery对象

2) jQuery对象转成js对象

语法1：jQuery对象[下标，从0开始]

语法2：jQuery对象.get(下标，从0开始)

四、js对象和jQuery对象的区别

（1）js对象的三种基本定位方式

（A）通过ID属性：document.getElementById()

（B）通过NAME属性：document.getElementsByName()

（C）通过标签名：document.getElementsByTagName()

（2）jQuery对象的三种基本定位方式

（A）通过ID属性：$("#id属性值")

（B）通过标签名：$("标签名")

（C）通过CLASS属性：$(".样式名")

（3）js对象出错的显示

没有合理的提示信息

例如：alert(document.getElementById("usernameIDD").value)

（4）jQuery对象出错的显示

有合理的提示信息，例如：undefined

例如：alert($("#usernameIDD").val())

五、九类选择器

1）基本选择器

   	//1)查找ID为"div1ID"的元素个数
   	    alert( $("#div1ID").size() );
   	    
  	//2)查找DIV元素的个数
  	    alert( $("div").size() );
  	    
  	//3)查找所有样式是"myClass"的元素的个数
  	    alert( $(".myClass").size() );
  	
  	//4)查找所有DIV,SPAN,P元素的个数
  	    alert( $("div,span,p").size() );
  	    
  	//5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
  	    alert( $('#div1ID,.myClass,p').size() );

2）层次选择器

       //1)找到表单form里所有的input元素的个数
		    alert( $("form input").size() );
		
       //2)找到表单form里所有的子级input元素个数
	  		alert( $("form > input").size() );
	  	
       //3)找到表单form同级第一个input元素的value属性值
	  	    alert( $("form + input").val() );
	  	
       //4)找到所有与表单form同级的input元素个数
	  		alert( $("form ~ input").size() );

3）增强基本选择器

        //1)查找UL中第一个元素的内容
			alert( $("ul li:first").text() );

	  	//2)查找UL中最后个元素的内容
			alert( $("ul li:last").text() );

	  	//4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
			alert( $("table tr:odd").size() );

	  	//5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
			alert( $("table tr:even").size() );

	  	//6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
	  	    alert( $("table tr td:eq(1)").text() );

	  	//7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大
			alert( $("table tr:gt(0)").size() );

	  	//8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
			alert( $("table tr:lt(2)").size() );

	  	//9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
			$(":header").css("background-color","red").css("color","blue");
			
	  	//3)查找所有未选中的input为checkbox的元素个数
			alert( $(":checkbox:NOT(:checked)").size() );

4）内容选择器

        //1)查找所有包含文本"John"的div元素的个数
		    alert( $("div:contains('John')").size() );
		    
	  	//2)查找所有p元素为空的元素个数
	  	    alert( $("p:empty").size() );
	  	
	  	//3)给所有包含p元素的div元素添加一个myClass样式
	  		$("div:has(p)").addClass("myClass");
	  	
	  	//4)查找所有含有子元素或者文本的p元素个数,即p为父元素
	  	    alert( $("p:parent").size() );

5）可见性选择器

        //1)查找隐藏的tr元素的个数
		//alert( $("table tr:hidden").size() );
		
  		//2)查找所有可见的tr元素的个数
		//alert( $("table tr:NOT(:hidden)").size() );
		alert( $("table tr:visible").size() );//提倡

6）属性选择器

        //1)查找所有含有id属性的div元素个数
		//alert( $('div[id]').size() );
			
	 	//2)查找所有name属性是newsletter的input元素，并将其选中
		//$("input[name='newsletter']").attr("checked","checked");
	 	
	  	//3)查找所有name属性不是newsletter的input元素，并将其选中
		//$("input[name!='newsletter']").attr("checked","true");

	  	//4)查找所有name属性以'news'开头的input元素，并将其选中
		//$("input[name^='news']").attr("checked","checked");
			  	
	  	//5)查找所有name属性以'letter'结尾的input元素，并将其选中
	  	//$("input[name$='letter']").attr("checked","checked");
	  	
	  	//6)查找所有name属性包含'news'的input元素，并将其选中
		//$("input[name*='news']").attr("checked","checked");
	  	
	  	//7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
	  	$("input[id][name$='letter']").attr("checked","true");

7）子元素选择器

        /*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
		$("ul li:first-child").each(function(){
			alert( $(this).text() );
		});
		*/
			
	 	/*2)迭代每个ul中最后1个li元素中的内容,索引从1开始
		$("ul li:last-child").each(function(){
			alert( $(this).text() );
		});
		*/
	 	
		/*4)迭代每个ul中第2个li元素中的内容,索引从1开始
		$("ul li:nth-child(2)").each(function(){
			alert( $(this).text() );
		});*/
	
	 	//3)在ul中查找是唯一子元素的li元素的内容
	 	$("ul li:only-child").each(function(){
	 		alert( $(this).text() );
	 	});

8）表单选择器


		//1)查找所有input元素的个数
		//alert( $("input").size() );//10，找input标签
		//alert( $(":input").size() );//13，找input标签和select/textarea/button
			
	  	//2)查找所有文本框的个数
	  	//alert( $(":text").size() );
	  	
	  	//3)查找所有密码框的个数
	  	//alert( $(":password").size() );
	  	
	  	//4)查找所有单选按钮的个数
	  	//alert( $(":radio").size() );
	  	
	  	//5)查找所有复选框的个数
	  	//alert( $(":checkbox").size() );
	  	
	  	//6)查找所有提交按钮的个数
	  	//alert( $(":submit").size() );
	  	
	  	//7)匹配所有图像域的个数
	  	//alert( $(":images").size() );
	  	
	  	//8)查找所有重置按钮的个数
	  	//alert( $(":reset").size() );
	  	
	  	//9)查找所有普通按钮的个数
	  	//alert( $(":button").size() );
	  	
	 	//10)查找所有文件域的个数
	 	//alert( $(":file").size() );
	 	
	 	//11)查找所有input元素为隐藏域的个数
	 	//alert( $(":input:hidden").size() );

9）表单对象属性选择器

        //1)查找所有可用的input元素的个数
		//alert( $("input:enabled").size() );
		
	 	//2)查找所有不可用的input元素的个数
		//alert( $("input:disabled").size() );
	 	
	 	//3)查找所有选中的复选框元素的个数
		//alert( $(":checkbox:checked").size() );
		 	
	 	//4)查找所有未选中的复选框元素的个数
		//alert( $(":checkbox:NOT(:checked)").size() );
	 	
	 	//5)查找所有选中的选项元素的个数
	 	//alert( $("select option:selected").size() );
	 	alert( $("#provinceID option:NOT(:selected)").size() );