Jquery中的常用方法一（内附详细注释与源码实例）

Jquery中的常用方法

一.什么是Jquery？

jQuery是一个快速、简洁的JavaScript框架，jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

通俗的来讲JavaScript库，封装了一堆的js函数（JS库）

Jquery的优势:

1.完全不需要再去使用原生的DOM操作了
2.非常多的重用函数，简化JavaScript开发
3.兼容性问题 1.x.x 2.x.x 3.x.x 2和3的版本已经放弃老版本IE（IE9及以下）

使用：

cdn：https://www.bootcdn.cn/jquery/1.11.3/(网络资源)
jquery官网 ： https://jquery.com/
中文api官网 ： https://www.jquery123.com/
jquery.js（开发版本） 和 jquery.min.js（生产版本 压缩版）

二.Jquery常用的方法

1.css（）方法设置或返回被选元素的一个或多个样式属性。

      //第一种写法,只能写一个的样式
      $('.p1').css("color","red");

      //第二种写法 可以写多个样式
      $('.p1').css({color:"red",fontSize:"25px"});

      //第三种写法 
      $('.p1').css("color","red").css("fontSize","25px");

      //返回匹配元素的color值：
      console.log($('.p1').css("color"));

2. get（）方法取得其中一个匹配的元素。这能够让你选择一个实际的DOM 对象并且对他直接操作，而不是通过 jQuery 对象。$(this).get(0)与$(this)[0]等价。

        // get()方法    返回dom对象
		console.log( $(".demo").get() )   //传递null和undefined的时候，输出的是数组
		console.log( $(".demo").get(0) )  //通过get方法出来的是***dom对象****
        console.log( $(".demo").get(-2) )

3.eq（）方法获取第N个元素，元素的位置是从0算起

		// eq()方法    返回jquery对象
		console.log( $(".demo").eq(2) ) //这个元素的位置是从0算起。
		console.log( $(".demo:eq(1)") )
		console.log( $(".demo").eq(-1) ) //从集合中的最后一个元素开始倒数

4.find（）方法搜索所有与指定表达式匹配的元素。

		// 属性prevObject属性，表示上一个jquery对象
		console.log($(".wrapper"))
		console.log( $(".wrapper").find("ul") )
		console.log( $(".wrapper").find("ul").find("li") )
		console.log( $(".wrapper").find("li") )

5.filter（）方法返回符合一定条件的元素。该方法让您规定一个条件。不符合条件的元素将从选择中过滤掉，符合条件的元素将被返回。

		//选中.wrapper ul下面的li标签并且class名为.demo，过滤掉class名不为.demo的标签
		$(".wrapper ul li").filter('.demo').css({color:'red'})

6.has（）方法保留包含特定后代的元素，去掉那些不含有指定后代的元素。
提示：如需选取拥有多个元素在其内的元素，请使用逗号分隔。

	 	// has()方法是否包含
		  $('.wrapper').has('span').css({color:'red'});

7.is（）方法用于查看选择的元素是否匹配选择器。返回布尔值

		// is方法返回时一个boolean,后续没有办法进行链式调用
		var flag = $(".wrapper .demo").is("span");

7.add（）方法把元素添加到已存在的元素组合中

       $("h1").add("p").add("span").css("background-color","yellow");

8.end（）方法回退最近的一个"破坏性(删除)"操作之前，类似prevObject属性(上一级)

		// end()方法  回退的操作
		$(".wrapper").add("ul").end()    //prevObject属性(上一级)

9.attr（）方法获取匹配的元素中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性，能够自定义元素属性

		//获取class名为.demo元素,属性名为class和abc的属性值,能够获取自定义属性和默认属性
		console.log( $(".demo").attr("class") )
		console.log( $(".demo").attr("abc") )   
		//设置.class名为.demo元素，属性名为id,属性值为div1,能够设置自定义属性和默认属性
		$(".demo").attr('id','div1')

10.prop（）方法方法只能获取和设置特性属性(默认的属性：checked selected disabled), 不能设置自定义属性，自定义属性不能理解成特性。属性是包含特性的，特性关注的是状态

      	//prop()方法只能获取和设置特性属性(默认的属性：checked  selected  disabled),
	    //不能设置自定义属性，属性是包含特性的，特性关注的是状态
		 console.log( $(".demo2").prop("checked") )   //true
		 console.log( $(".demo2").prop("checked",true) )

11.html（）方法类似js中的innerHTML，设置或返回被选元素的内容（innerHTML）

        $("p").html("Hello <b>world!</b>")

12.text（）方法类似js中的innerText，text() 方法设置或返回被选元素的文本内容。

        $("p").text("Hello world!");

13.addClass（）方法向被选元素添加一个或多个类名，该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。

提示：如需添加多个类，请使用空格分隔类名。

		// addClass
		// 添加一个
		$(".demo").eq(0).addClass("active")
		// 添加多个
		$(".demo").eq(0).addClass("abc bcd efg")

		$(".demo").addClass("test01")

		$(".demo").addClass(function(index,ele){
			return "bailiban" + index
		})

14.removeClass（）方法从被选元素移除一个或多个类名（删除类名）。

注意：如果没有规定参数，则该方法将从被选元素中删除所有类

       $(".demo").removeClass("test01 active")   //传递参数就是参数指定的class
	   $(".demo").removeClass()    //不传递参数就是删除所有的class
	   $(".demo").removeClass(function(index,ele){
		 	if(index % 2 == 0){
		 		return "demo"
			}
		 	return undefined
		 })

15.text（）hasClass() 方法检查被选元素是否包含指定的类名称。如果被选元素包含指定的类，该方法返回 "true"。

	  // hasClass 返回一个boolean 有就返回true，没有就返回false
		console.log( $(".demo").hasClass("demo") )
		console.log( $(".demo").eq(0).hasClass("bailiban1") )

16.val() 方法返回或设置被选元素的 value 属性

		 console.log( $("input[type='checkbox']").val() )
		 console.log( $("option").val() )
		 $("option").val("hello")
		$("input[type=checkbox]").val(function(index,value){
			console.log(index,value)
			return value + index;
		})
		$("div").val("abcde")   //相对于其他元素是一个特性
		console.log($("div").val())
		$("input").eq(0).val("hello world")   //打开控制台，标签中显示的依然是旧值（完全不用管，忽略就行）
		console.log($("input").eq(0).val())  //

喜欢小编的可以关注点一点。

小编虽然不能陪你一生，但能让你的基础知识满满登登。