JQuery零碎知识点归纳

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

1、Js是Netscape公司开发的。

2、JQuery是对DOM的封装,它可以屏蔽不同浏览器之间的差别 。

3、JQuery与DOM对象的转化:

JQuery --> DOM
var objJQuery=$('cr'); //JQuery对象

var objDOM=objJQuery[0]; 或者 var objDOM=objJQuery.get(0) //DOM对象

DOM --> JQuery
var objDOM=document.getElementById('cr'); //DOM对象

var objJQuery = $(objDOM); //JQuery对象 

4、window.onload与$(document).ready()的区别

1) window.onload必须等待网页中所有的内容(包括图片、css、js等)加载完毕后才能执行。

$(document).ready()网页中所有DOM结构绘制完毕后执行,可能与DOM元素无关的东西并没有加载完

2) window.οnlοad=function(){alert("a");}; window.οnlοad=function(){alert("b");};结果只输出b,

而$(document).ready(function(){alert("a");});$(document).ready(function(){alert("b");});两者都输出

3) window.onload没有简写形式,$(document).ready(function(){})可以写成$(function(){}) 

5、$.map 与$.each

$.map 只处理数组,并且将处理后的结果以数组的形式返回

$.each 一般用来处理字典(也可以处理数组),它没有返回值 

$(function () {
	var arr = [2, 5, 6, 23, 6, -4, 25]; 
	arr = $.map(arr, function (item) {
		return item * 3; 
	});
	alert(arr);
	var dict = { "jaosn": 14, "tom": 23, "Fuck": "you" }; 
	$.each(dict, function (key, value) {
                alert(key+"==="+value);
        });
});

each在处理json的时候,key与value就是键值对的内容,但如果处理的是DOM对象数组,那么key存储的就是序号0,1,2...,而value是DOM对象。

如:$(value).val()这样写才能将每个对象的值取出来。 

$(':checkbox').click(function () { 
	$(':checkbox:checked').each(function (key, value) {
		alert(key+" "+$(value).val()); 
	});
});

6、用JQuery检查网页上是否有某个对象 

如何判断对象是否存在,jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象),调用text()、html()、click()之类方法的时候其实是

对数组中每个DOM对象迭代调用每个方法,因此即使通过id选择的元素不存在也不会报错,如果需要判断指定的id是否存在。

//通过判断$("#btn1")这个集合中对象的个数来判断是否有对象存在(可行)

if ($("#btn1").length <= 0) {

do something

}

//直接判断是否有DOM对象存在(可行)

if ($("#btn1")[0] <= 0) {

do something

}

//下面的写法是错误的,因为判断的直接是集合

if($("#btn1")) {

do something

} 

7、使用attr()方法读取或者设置元素的属性,对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

alert($("#btn1").attr("href")); //取值

$("#btn1").attr("href", "http://www.rupeng.com"); //赋值 

8、JQuery选择器

分为基本选择器、层次选择器、过滤选择器、属性过滤选择器、表单选择器、表单对象选择器等

基本选择器:id选择器、标签选择器、类选择器、复合选择器$('#r,.color,p')中间用逗号

层次选择器:$('obj1 obj2') 获取子级别的元素 $('obj1 > obj2') 获取子孙级别的元素

过滤选择器: :first :last :not() :even :odd :eq(index) :gt(index) :lt(index)

属性过滤选择器: $('div[id]')选取有id属性的<div>

$('div[title=test]')选取title属性为test的div

表单对象选择器: $('#form1:enabled')选取id为form1的表单内所有启用的元素

$('#form1:disabled')选取id为form1的表单内所有禁用的元素

$('select option:checked')选取所有选中的下拉元素 

9、样式的操作

获取样式 attr("class")

设置样式 attr("class","myclass") (设置之后,以前的样式就被覆盖掉了)

追加样式 addClass("myclass")(设置之后,不影响以前的样式)

移除样式 removeClass("myclass") (删除的样式在源代码中看不到,这不同于清空样式)

切换样式 toggleClass("myclass")(如果存在样式则去掉样式,如果没有样式则添加样式)

判断样式是否存在:hasClass("myclass") 

10、追加对象的方法:

1) $obj1.append($obj2) 或者 $obj2.appendTo($obj1) 给 $obj1追加子对象$obj2且加在最后

2) $obj1.prepend($obj2) 或者 $obj2.prependTo($obj1) 给 $obj1追加子对象$obj2且加在最前

3) $obj1.after($obj2) 在对象 $obj1后面追加同辈对象$obj2

4) $obj1.before($obj2) 在对象 $obj1前面追加同辈对象$obj2 

11、$obj.remove() 与$obj.empty()

$obj.remove()是删除对象$obj,remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点。

$obj.empty()是将节点清空,清除节点的innerHTML,节点还在 

12、关于e的事件总结

e.stopPropagation(),阻止事件冒泡,冒泡后面的代码还可以继续执行

e.preventDefault() ,阻止导向链接或者提交表单

e.pageX、e.pageY 相当于DOM中的 e.clientX、e.clientY

e.target 相当于DOM中的srcElemente.altKey、e.shiftKey、e.ctrlKey、e.keyCode

相当于DOM中的window.event.altKey、window.event.shiftKey、window.event.ctrlKey、window.event.keyCode