jQuery认识(一)

一、 jquery入口函数与js原生代码的区别

1、原生js与jquery入口函数的加载模式不同
原生js会等到dom元素加载完毕,并且图片也加载完毕才会执行
jquery会等到dom元素加载完毕,但不会等图片加载完毕才执行
2、原生的js如果编写多个入口函数,后面的会覆盖前面的;
jquery编写多个入口函数,后面的不会覆盖前面的

二、jquery写法

1、

$(document).ready(function(){
});

2、

jQuery(document).ready(function(){
});

3、

$(function(){
});//推荐使用

4、jQuery(function(){
});C

三、jquery的冲突问题

对于别的框架也使用1的使用权:释放操作必须在编写其他的jquery之前编写,释放之后不能使用$。改为使用jquery。
2、自定义访问符号

var nj=jQuery.noConflict();
nj(function(){
alert("hello world");
});

jQuery的核心函数与工具方法

一、jquery核心函数

$();或者jQuery();就代表一个核心函数:
a、可以接受一个函数

  <script>
    $(function(){
    alert("hello world");
    });
   </script>

b、接受一个字符串
b.1 接受一个字符串选择器:返回一个jQuery对象,对象中保存了找到的DOM对象

<script>
var $box1=$(".box1");
var $box2=$("#box2");
console.log(.box1);
console.log(#box2);
</script>

b.2 接受一个代码片段;返回一个jQuery对象,对象中保存了创建的DOM对象

   <script>
   var  $p=$("<p>我是段落</p>");
   console.log($p);
   $box1.append($p);
    </script>

c、接受一个DOM元素:会被包装成一个jQuery对象返回发给我们

   <script>
var  span=document.getElementsByTagName(“span”)[0];
console.log(span);
var $span=$(span);
console.log($span);

    </script>

二、jQuery对象

1、定义:jQuery对象是一个伪数组(有0~length-1的属性,并且有length属性)
2、实例方法

<script type="text/javascript">
			//1、定义一个类
			function AClass(){
			//2、给这个类添加一个静态方法
			//直接添加给类的就是静态方法
			AClass.staticMethod=function(){
				alert("staticMethod");
			};
			//静态方法通过类名调用

			AClass.staticMethod();
			//给这个类添加一个实例方法
			AClass.prototype.instanceMethod=function(){
				alert("nstanceMethod");
			};
			//实例方法通过类的实例调用
			//创建一个实例(创建一个对象)
			var  a=new AClass();
			//通过实例调用实例方法
			a.instanceMethod();
			}
</script>

三、jquery的静态方法

1、each():对于each方法,js原生能够遍历数组,但是不能遍历伪数组

var arr=[1,3,5,7,9,11];
var obj={0:1,1:3,2:5,3:7,4:9,length:5};
$.each(arr,function(value,index){
console.log(index,value);
});

2、map():对于map方法,js原生能够遍历数组,但是不能遍历伪数组

var arr=[1,3,5,7,9,11];
var obj={0:1,1:3,2:5,3:7,4:9,length:5};
    $.map(arr,function(value,index){
    				console.log(index,value);
    			});

3、$.isWindow():
作用:判断传入的对象是否是window对象
返回值:true/false

4、$.isArray():
作用:判断传入的对象是否是真数组
返回值:true/false

**5、isFunction()**:
作用:判断传入的对象是否是是一个函数
返回值:true/false
注意点:jquery本质是一个函数

var res=$isFunction(jQueryr);
console.log(res);

**6、holdReady()**:
作用:暂停或者恢复ready的执行

$.holdReady(true);
$.holdReady(false);

jQuery属性和属性节点

一、属性定义:对象身上保存的变量

二、如何操作属性:

<script type="text/javascript">
		$(function(){
			function Person(){
		};
    		    var p=new Person();
    		    //第一种操作方式
    		    p.name="name";
    		    console.log(p.name);
    		   //第二种操作方式
    		   p["age"]="123";
    		   console.log(p["age"]);
			})
</script>

三、属性节点定义:

在编写HTML代码时,在HTML标签中添加的属性就是属性节点

<span name="j+q12"></span>

在浏览器中找到span这个DOM元素之后,展开之后的都是属性节点,在attributes属性中保存的所有内容都是属性节点.

四、如何操作属性节点

<script type="text/javascript">
	$(function(){
	var span=document.getElementsByTagName("span")[0];
	span.setAttribute("name","0000");
	console.log(span.getAttribute("name"))
	})
</script>

五、属性和属性节点的区别

任何对象都有属性,但是只有dom对象才有属性节点

六、jQuery属性操作方法

1、attr(name|pro|key,val|fn)、removeAttr(name)

 `attr(name|pro|key,val|fn)`
    $("span").attr("class");//当传递一个参数,表示获取属性节点的值
    $("span").attr("class","box");//传递两个参数,表示设置属性节点的值
    $("span").attr("abc","111");

作用:获取或者设置属性节点的值(注意点:如果是获取,无论找到多少个元素,只会返回第一个元素的指定的属性节点的值;如果是设置,找到多少个元素就设置多少个元素,如果设置的属性节点不存在,则系统会自己新增)

`removeAttr(name)`
$("span").removeAttr("class");
$("span").removeAttr("class name");//当想删除多个属性节点时,两个属性节点只有中间以空格隔开即可

作用:删除属性节点(注意点:会删除所有找到元素指定的属性节点)

2、prop(n|p|k,v|f)、removeProp(name)

prop(n|p|k,v|f)
$("span").eq(0).prop("demo","box1");
$("span").eq(1).prop("demo","box2");

特点:和attr方法一致

removeProp(name)
$("span").removeProp("demo");

特点:和removeAttr方法一致
注意点:Prop不仅能够操作属性,还能操作属性节点

$("span").prop("class","box");

官方推荐在操作属性节点时,具有true和false两个属性的属性节点时,如checked、selected或者disabled使用prop(),其他用attr()

console.log($("input").prop("checked"));//true|false
console.log($("input").attr("checked"));//checked|undefined

3、jQuery类操作相关方法
a、 addClass(class|fn)
作用:添加一个类(如果要添加多个,中间用空格隔开即可)
b、 removeClass(class|fn)
作用:删除一个类(如果要删除多个,中间用空格隔开即可)
c、 toggleClass(class|fn)
作用:切换一个类(有就删除,没有就添加)

 <script type="text/javascript">
		$(function(){
			var btns=document.getElementsByTagName("button");
			btns[0].onclick=function(){
				$("div").addClass("div1 div2");
			};
			btns[1].onclick=function(){
				$("div").removeClass("div1 div2");
			};
			btns[2].onclick=function(){
				$("div").toggleClass("div1 div2");
			};

		})
</script>

4、jQuery文本值操作相关方法

html([val|fn])//和原生js中innerHTML一模一样
text([val|fn])//和原生js中textHTML一模一样
val([val|fn|arr])//和原生js中value一模一样
<script type="text/javascript">
$(function(){
		var btns=document.getElementsByTagName("button");
		btns[0].onclick=function(){
			$("div").html("<p>我是一个段落<span>我是一个span</span></p>")
		};
		btns[1].onclick=function(){
			console.log($("div").html());
		};
		btns[2].onclick=function(){
			$("div").text("<p>我是一个段落<span>我是一个span</span></p>")
		};
		btns[3].onclick=function(){
			console.log($("div").text());
		};
		btns[4].onclick=function(){
			$("input").val("请输入内容")
		};
		btns[5].onclick=function(){
			console.log($("input").val());
		};
	})
</script>

5、jQuery操作样式相关方法
a、设置方式

 <script type="text/javascript">
    		$(function(){
    	//a.逐个设置
         	 $("div").css("width","100px");
        	 $("div").css("height","100px");
    	 	 $("div").css("background","red");
    	//b.链式设置(如果大于三步,建议分开)
    		$("div").css("width","100px").css("height","100px").css("background","yellow");
    	//c.批量设置
    		$("div").css({
    			width:"100px",
    			height:"100px",
    			background:"blue"
    		});
    	})
    </script>

b、获取css样式值

console.log($("div").css("width"));

6、jQuery尺寸和位置操作方法
a、尺寸
heigh([val|fn]);width([val|fn]);innerHeight();innerWidth();outerHeight([soptions]);outerWidth([options])

<script type="text/javascript">
		$(function(){
		 var btns=document.getElementsByTagName("button");
		 //监听获取
		 btns[0].onclick=function(){
		 	console.log($(".father").width());
		 };
		  //监听设置
		 btns[1].onclick=function(){
		 	$(".father").width("500px")
		 };
	})
</script>

b、位置

offset([coordinates])
//作用:获取或者获取元素距离窗口的位偏移
console.log($(".son").offset().left);
btns[2].onclick=function(){
    		 	$(".son").offset({
    		 		left:10
    		 	})
    		 };

 position()
 //作用:获取元素距离定位元素的位偏移
  console.log($(".son").position().left);
  //注意点:position只能获取不能设置
   btns[2].onclick=function(){
    		 	$(".son").position({
    		 		left:10
    		 	})
    		 };
  //获取网页滚动的偏移位(为了浏览器兼容,需要按照如下手法)
    console.log($("html").scrollTop()+$("body").scrollTop());

  //获取网页滚动的偏移位(为了浏览器兼容,需要按照如下手法)
	btns[1].onclick=function(){
	 	$("html,body").scrollTop(300);
	 }
10-03 13:39