个人java学习路线-jQuery

介绍

jQuery： JavaScript Query 辅助JavaScript开发的js类库
因为是js类库，所以用前要引入jquery.js文件
了解一些关键的就好，其它看看就行，要用时看API帮助文档

初识

介绍

jQuery对象是dom对象的数组+jQuery提供的一系列功能函数
例如：$(function (){})可以代替window.οnlοad=function (){}

1.什么是dom对象？
   document.getElementById()
   document.getElementsByName()
   document.getElementsByTagName()
   document.createElement()
   类似这些方法创建的对象是Dom对象
   DOM对象alert出来：
      alert(document.getElementById(“btnId”))----->[object HTMLButtonElement]

2.什么是jQuery对象？
   通过jQuery提供的API创建的对象，是jQuery对象
   通过jQuery包装的Dom对象，也是jQuery对象
   通过jQuery提供的API查询到的对象，是jQuery对象
   jQuery对象alert出来的效果是：
      alert($(document.getElementById(“btnId”)))----->[object Object]

3 . jQuery对象不能使用DOM对象的属性和方法，反过来也一样

4 . Dom和jQuery对象的互转
   1>.dom对象转化成jQuery对象(*重点)
      先有DOM对象
      $(DOM对象)即可转换为jQuery对象（$(document.getElementById(“testDiv”))）

   2>.jQuery对象转换为dom对象
      先有jQuery对象
      jQuery对象[下标]取出相应的DOM对象($(document.getElementById(“testDiv”))[0]）

看看例子

<script type="text/javascript">
	window.onload=function (){
	var $btnObj=document.getElementById("btnId");
	//alert($btnObj);    	//dom对象 [object HTMLButtonElement]
	$btnObj.onclick=function (){
		alert("js的单机事件");
	}
</script>
<button id="btnId">SayHello</button>

下面代码都在<script type=“text/javascript”></script>中

$(function (){
var $btnObj=$("#btnId");
	$btnObj.click(function (){
		alert("jQuery的单击事件")
	})
	alert(document.getElementById("btnId"))//dom对象
	alert($(document.getElementById("btnId")))//jQuery对象
})

‘$’是什么

直接alert即可

$(function(){
	alert($);
});

网页会弹出
function( selector, context ) {
// The jQuery object is actually just the init constructor ‘enhanced’
return new jQuery.fn.init( selector, context, rootjQuery );
}
可见$是函数

核心函数

$(function (){//传入为函数$(function(){});
   alert("页面加载完成之后，自动调用");
    $(
       " <div>"+
       "     <span>div-span1</span>"+
       "     <span>div-span2</span>"+
       " </div>"
    ).appendTo("body");

    alert($("button").length)	//$("button").length---有几个button
});

传入参数为[函数]时：在文档加载完成后执行这个函数
ps: $(document).ready(function(){   //这个是$(function(){});的全写

传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
    会对我们创建这个html标签对象

传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
    $("#id属性值");  id选择器，根据id查询标签对象
    $("标签名");     标签名选择器，根据指定的标签名查询标签对象
    $(".class属性值");   类型选择器，可以根据class属性查询标签对象

传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回
    会把这个dom对象转换为jQuery对象	

选择器

基本选择器

$(function (){
	//1.选择 id 为 one 的元素
		$("#one")
	//2.选择 class 为 mini 的所有元素
		$(".mini")
	//3.选择 元素名是 div 的所有元素
		$("div")
	//4.选择所有的元素
		$("*")
	//5.选择所有的 span 元素和id为two的元素
		$("span,#two")
})

层次选择器

$(document).ready(function (){
	//1.选择 body 内的所有 div 元素
		$("body div")
	//2.在 body 内, 选择div子元素
		$("body > div")
	//3.选择 id 为 one 的下一个 div 元素
		$("#one + div")
	//4.选择 id 为 two 的元素后面的所有 div 兄弟元素
		$("#two~div")
});			
		

基本的过滤选择器

$(document).ready(function(){
	//1.选择第一个 div 元素
		$("div:first")
	//2.选择最后一个 div 元素
		$("div:last")
	//3.选择class不为 one 的所有 div 元素
		$("div:not(.one)")
	//4.选择索引值为偶数的 div 元素
		$("div:even")
	//5.选择索引值为奇数的 div 元素
		$("div:odd")
	//6.选择索引值为大于 3 的 div 元素
		$("div:gt(3)")
	//7.选择索引值为等于 3 的 div 元素
		$("div:eq(3)")
	//8.选择索引值为小于 3 的 div 元素
		$("div:lt(3)")
	//9.选择所有的标题元素
		$(":header")
	//10.选择当前正在执行动画的所有元素素
		$(":animated")
	//11.选择没有执行动画的最后一个div素
		$("div:not(:animated):last")
});

内容过滤选择器

:contains(text) //匹配包含给定文本的元素
:empty //匹配所有不包含子元素或者文本的空元素
:has(selector) //匹配含有选择器所匹配的元素的元素
:parent v //匹配所有含有子元素或者文本的元素

$(document).ready(function(){
	//1.选择 含有文本 'di' 的 div 元素
		$("div:contains('di')")
	//2.选择不包含子元素(或者文本元素) 的 div 空元素
		$("div:empty")
	//3.选择含有 class 为 mini 元素的 div 元素
		$("div:has(.mini)")
	//4.选择含有子元素(或者文本元素)的div元素
		$("div:parent")
});

属性过滤选择器

[attribute] //匹配包含给定属性的元素
[attribute=value] //匹配给定的属性是某个特定值的元素
[attribute!=value] //匹配所有不含有指定属性，或者属性不等于特定值的元素
[attribute^=value] //匹配给定的属性是以某些值开始的元素
[attribute$=value] //匹配给定的属性是以某些值结尾的元素
[attribute*=value] //匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN] //复合属性选择器，需要同时满足多个条件时使用

$(function() {
	//1.选取含有 属性title 的div元素
		$("div[title]")
	//2.选取 属性title值等于'test'的div元素
		$("div[title='test']")
	//3.选取 属性title值不等于'test'的div元素(*没有属性title的也将被选中)
		$("div[title!='test']")
	//4.选取 属性title值 以'te'开始 的div元素
		$("div[title^='te']")
	//5.选取 属性title值 以'est'结束 的div元素
		$("div[title$='est']")
	//6.选取 属性title值 含有'es'的div元素
		$("div[title*='es']")
	//7.首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素
		$("div[id][title*='es']")
	//8.选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素
		$("div[title][title!='test']")
});

表单对象属性过滤器

:input //匹配 所有的input,textarea，select，button元素
:text //匹配所有的文本框
:password //匹配所有的密码输入框
:radio //匹配所有的单选框
:checkbox //匹配所有的复选框
:submit //匹配所有的提交按钮
:image //匹配所有的img标签
:reset //匹配所有的重置按钮
:button //匹配所有的input type=button 按钮
:file //匹配所有的input type=file 文件上传
:hidden //匹配所有不可见元素display:none 或input type =hidden

表单对象的属性
:enabled //匹配所有可用元素
:disabled //匹配所有不可用元素
:checked //匹配所有选中的单选，复选，和下拉列表中选中的option标签对象
:selected //匹配所有选中的option

$(function(){
	//1.对表单内 可见input 赋值操作
	$("#btn1").click(function(){
		$(":text:enabled").val("New Value");
	});
	//2.对表单内 不可见input 赋值操作
	$("#btn2").click(function(){
		$(":text:disabled").val("New Value Too");
	});
	//3.获取多选框选中的个数  使用size()方法获取选取到的元素集合的元素个数
	$("#btn3").click(function(){
		alert($(":checkbox:checked").size())
	});
	//4.获取多选框，每个选中的value值
	$("#btn4").click(function(){
		var str = "";
		var eles = $(":checkbox:checked");
		console.log(eles);
		for(var i=0;i<eles.size();i++){
			str += "【"+$(eles[i]).val()+"】";
		}
		//jQuery的遍历方法
		/*eles.each(function (){
			alert(this.value)
		})*/
		alert(str)
	});
	//5.获取下拉框选中的内容  
	$("#btn5").click(function(){
		var str = "";
		//注意这个选择器的特殊，因为select里面的option是真正的被选择项，
		//所以 :selected 选择器和 select[name='test']选择器的关系是子父关系
		//必须按照基本选择器选择后代的方法选
		var els = $("select option:selected");
		console.log(els);
		for(var i=0;i<els.size();i++){
			str += "【"+$(els[i]).val()+"】";
		}
		alert(str)
	});
})

元素筛选方法

过滤
eq(index|-index) 		//	获取给定索引的元素
first() 				//获取第一个元素
last() 					//获取最后一个元素
hasClass(class) 		//
filter(expr|obj|ele|fn) //留下匹配的元素
 is(expr|obj|ele|fn)1.6* //判断是否匹配给定的选择器，只要有一个匹配就返回，true
 has(expr|ele) 			//返回包含有匹配选择器的元素的元素
 not(expr|ele|fn) 		//删除匹配选择器的元素
 slice(start,[end]) 		//

 查找
 children([expr]) 			//返回匹配给定选择器的子元素
 closest(expr,[con]|obj|ele)1.6*   //
 find(expr|obj|ele) 				//返回匹配给定选择器的后代元素
 next([expr]) 					//返回当前元素的下一个兄弟元素
 nextall([expr]) 				//返回当前元素后面所有的兄弟元素
 nextUntil([exp|ele][,fil])1.6* 	//返回当前元素到指定匹配的元素为止的后面元素
 parent([expr]) 					//返回父元素
 parents([expr]) 				//
 parentsUntil([exp|ele][,fil])1.6* //
 prev([expr]) 					//返回当前元素的上一个兄弟元素
 prevall([expr]) 				//返回当前元素前面所有的兄弟元素
 prevUntil([exp|ele][,fil])1.6* 	//返回当前元素到指定匹配的元素为止的前面元素
 siblings([expr]) 				//返回所有兄弟元素

 串联
 add(expr|ele|html|obj[,con]) 	//把add匹配的选择器的元素添加到当前jQuery对象中

$(document).ready(function(){
	//(1)eq()  选择索引值为等于 3 的 div 元素
		$("div").eq(3)
	//(2)first()选择第一个 div 元素
		$("div").first()
	//(3)last()选择最后一个 div 元素
		$("div").last()
	//(4)filter()在div中选择索引为偶数的
		$("div").filter(":even")
	//(5)is()判断#one是否为:empty或:parent
	//is用来检测jq对象是否符合指定的选择器
	$("#one").is(":empty")
	$("#one").is(":parent")
	//(6)has()选择div中包含.mini的
		//has(selector)  选择器字符串    是否包含selector
		$("div").has(".mini")
	//(7)not()选择div中class不为one的
		//not(selector)  选择不是selector的元素
		$("div").not(".one")
	//(8)children()在body中选择所有class为one的div子元素
		//children()  选出所有的子元素
		$("body").children("div.one")
	//(9)find()在body中选择所有class为mini的div元素
		//find()  选出所有的后代元素
		$("body").find("div.mini")
	//(10)next() #one的下一个div
		//next()  选择下一个兄弟元素
		$("#one").next("div")
	//(11)nextAll() #one后面所有的span元素
		//nextAll()   选出后面所有的元素
		$("#one").nextAll("span")
	//(12)nextUntil() #one和span之间的元素
		$("#one").nextUntil("span").css("background-color","#bfa")
	//(13)parent() .mini的父元素
		$(".mini").parent().
	//(14)prev() #two的上一个div
		$("#two").prev()
	//(15)prevAll() span前面所有的div
		$("span").prevAll("div")
	//(16)prevUntil() span向前直到#one的元素
		$("span").prevUntil("#one")
	//(17)siblings() #two的所有兄弟元素
		//siblings()    找到所有的兄弟元素，包括前面的和后面的
		$("#two").siblings()
	//(18)add()选择所有的 span 元素和id为two的元素
		$("span").add("#two")
				.add(".mini").add("#one")
});

DOM操作

DOM属性操作

HTML代码/文本/值
html([val|fn])    a.html()取出a的html值    a.html(val)  让a的html值变为val
text([val|fn]) 	  a.text()取出a的text值    a.text(val)  让a的文本值变为val
val([val|fn|arr]) a.val()  取出a的val值（input）   a.val(v)  设置a的value值为v 

 html()	可以设置和获取起始标签和结束标签中的内容	类似dom属性innerHTML
 text()	可以设置和获取起始标签和结束标签中的文本	类似dom属性innerText
 val()	可以设置和获取表单项的value属性值		类似dom属性value

属性
attr(name|pro|key,val|fn)  
 1、a.attr('name')取出a的name值   2、a.attr("name","username")把a的name值设置为username
 
removeAttr(name) 
a.removeAttr('class')    移除a的class属性


prop(name|pro|key,val|fn)1.6+ 
1、a.prop('id')  取出a的id值   2、a.prop('id',"bj")  设置a的id值为bj
removeProp(name)1.6+
a.removeProp('class') 移除a的class属性

$(function(){
	$(":radio").val(["radio2"]);		//radio选中radio2
	$(":checkbox").val(["checkbox1","checkbox3"]);	//checkbox选中checkbox1和checkbox3
	$("#multiple").val(["mul1","mul3"]);	//id为multiple的选中mul1和mul3
	$("#single").val(["sin3"])		//id为single的选中sin3
	$(":radio,:checkbox").val(["radio2","checkbox1","checkbox3"]);	//radio选中radio2yi以及checkbox选中checkbox1和checkbox3
})

DOM增删改

文档处理
内部插入	
appendTo(content) 	   a.appendTo(b);  把a加到b里面				  添加到最后面
prependTo(content)	   a.prependTo(b); 把a添加到b里面    			  添加到最前面

 appendTo()		a.appendTo(b)	把a插入到b子元素末尾，成为最后一个子元素
 prependTo()	a.prependTo(b）	把a插入到b所有子元素前面，成为第一个子元素

外部插入
insertAfter(content) 	a.insertAfter(b);  把a插入到b的后面
insertBefore(content) 	a.insertBefore(b); 把a插入到b的前面

 insertAfter()		a.insertAfter(b)	得到ba
 insertBefore()		a.insertBefore(b)	得到ab

替换
replaceWith(content|fn) a.replaceWith(b)  把a用b替换
replaceAll(selector) 	a.replaceAll(b)	  用a替换所有的b

 replaceWith()		a.replaceWith(b)	用b替换a
 replaceAll()		a.repalceAll(b)		用a替换掉所有的b

删除
empty() 				a.empty()   把a掏空，把a里面的所有元素都删除
remove([expr]) 			a.remove(b)  所有的a，是b的话就会删除	a.remove()删除a		

empty()				a.empty();	删除a标签里的内容
remove()			a.remove();	删除a标签

没例子了解了解就好

CSS样式操作

$(function(){
	var $divEle = $('div:first');
		//addClass() - 向被选元素添加一个或多个类（样式）
		$divEle.addClass('redDiv blueBorder')
		//removeClass() - 从被选元素删除一个或多个类 
		$divEle.removeClass('redDiv blueBorder')
		//toggleClass() - 对被选元素进行添加/删除类的切换操作 
		$divEle.toggleClass('blueBorder')
	
		//offset() - 返回第一个匹配元素相对于文档的位置。
		var pos=$divEle.offset();
		//console.log(pos)
		$divEle.offset({//设置位置
			top:100,
			left:50
		});
})

事件

文档加载

- jquery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行
- 原生js的页面加载完成之后，除了要等浏览器内核被解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成

- jQuery先执行，js在页面加载完成之后才执行

- 原生js的页面加载完成之后，只会执行最后一次的赋值函数
- jQuery的页面加载完成之后时全部把注册的function函数，依次顺序全部执行

window.onload=function (){
		alert("原生js页面加载完成之后--1")
	}
	window.onload=function (){
		alert("原生js页面加载完成之后--2")
	}
	window.onload=function (){
		alert("原生js页面加载完成之后--3")
	}

	$(function (){
		alert("jquery的页面加载完成之后--1")
	})
	$(function (){
		alert("jquery的页面加载完成之后--2")
	})
	$(function (){
		alert("jquery的页面加载完成之后--3")
	})

执行结果为：
jquery的页面加载完成之后–1
jquery的页面加载完成之后–2
jquery的页面加载完成之后–3
页面加载
原生js页面加载完成之后–3

事件绑定

click() 	 有参(function函数)绑定单机事件，无参触发单机事件
mouseover() 鼠标移入事件
mouseout()  鼠标移除事件
bind()		一次绑定多个事件
one()		同上，但是one一个事件只会响应一次
unbind()	解除绑定，可以解除多个
live()		也是绑定事件，可以绑定选择器匹配的所有元素事件，哪怕这个元素是后面动态创建出来的也有效

事件冒泡

事件冒泡：触发子事件的时候，同一个事件也被传递到父元素的事件里去响应
-在子元素事件函数体内，return false可以阻止事件的冒泡传递

$(function(){
	$("div").click(function (){
		alert("我是div")
	})
	$("span").click(function (){
		alert("我是span")
		return false;
	})
})
//<div><span></span></div>

动画

	基本
	show([speed,[easing],[fn]]) 
	hide([speed,[easing],[fn]]) 
	toggle([speed],[easing],[fn]) 
	滑动
	slideDown([spe],[eas],[fn]) 
	slideUp([speed,[easing],[fn]]) 
	slideToggle([speed],[easing],[fn]) 
	淡入淡出
	fadeIn([speed],[eas],[fn]) 
	fadeOut([speed],[eas],[fn]) 
	fadeTo([[spe],opa,[eas],[fn]]) 
	fadeToggle([speed,[eas],[fn]])

$(function(){
	//显示   show()
		$("#div1").show(1500,function (){
			alert("show动画完成");
		});
	//隐藏  hide()
		$("#div1").hide(1500);
	//切换   toggle()
		$("#div1").toggle(1500)
	//淡入   fadeIn()
		$("#div1").fadeIn(1500);
	//淡出  fadeOut()
		$("#div1").fadeOut(1500);
	//淡化到  fadeTo()
		$("#div1").fadeTo(1500,0.5,function (){
			alert("已经淡化到0.5")
		});
	//淡化切换  fadeToggle()
		$("#div1").fadeToggle(1000,function(){
			alert("fadeToggle完成")
		});
})