本文共 7656 字，大约阅读时间需要 25 分钟。

JQuery

jquery和html的整合

jquery是单独的js文件,通过script标签的src属性导入即可

获取一个jquery对象

$("选择器")  或者 jQuery("选择器")

var  $username = $("#username");

dom对象和jquery对象之间的转换

dom对象===>jquery对象			$(dom对象)	jquery对象===>dom对象		方式1:			jquery对象[index]		方式2:			jquery对象.get(index)

1 dom对象》jQuery对象var username = document.getElementById("username");$(username).val();2 jQuery对象》dom对象var  $username = $("#username");var u1=$username.get(0);var u2=$username[0];console.log(u1.value);console.log(u2.value);

页面加载:

js:	window.onload=function(){}//在一个页面中只能使用一次jquery 在一个页面中可以使用多次	方式1:		$(function(){...})	方式2:		$(document).ready(function(){});

派发事件:

原生js中: dom对象.onclick=function(){....}   jqeury: $("选择器").click(function(){...});	掌握事件:		focus		blur		submit		change		click

$("#btn1").click(function(){
   	alert($(this).val());});$("#div1").mouseup(function(){
   	alert($(this).width());});//如果blur()执行2次，就用下面的额方法，先解除绑定再绑定$("#username").unbind("blur").bind("blur",function(){
   	console.log($(this).val());});$("#username").focus(function(){
   	console.log($(this).val());});

jquery中效果:

隐藏或展示	show(毫秒数) hide(毫秒数)滑入或滑出	slideDown(毫秒数):向下滑入	slideUp(毫秒数):向上滑出淡入或淡出	fadeIn(int):淡入	fadeOut(int):淡出

	$("#btn1").click(function(){
   	//$("#div1").show();	//$("#div1").hide();	$("#div1").toggle(1000);});$("#btn2").click(function(){
   	//$("#div2").slideDown();	//$("#div2").slideUp();	$("#div2").slideToggle();});$("#btn3").click(function(){
   	//$("#div3").fadeIn();	//$("#div3").fadeOut();	$("#div3").fadeToggle();});

选择器

基本选择器★	$("#id值")  $(".class值")  $("标签名")  		 了解:$("*") 理解:获取多个选择器 用逗号隔开		$("#id值,.class值")层次选择器 ★	a b:a的所有b后代   【儿子+孙子】	a>b:a的所有b孩子   【儿子】	a+b:a的下一个兄弟(大弟弟) 【下一个平级标签】	a~b:a的所有弟弟      【后面的所有平级标签】基本过滤选择器:★	:frist 第一个	:last 最后一个	:odd  索引奇数	:even 索引偶数	:eq(index) 指定索引	:gt(index) >	:lt(index) 

基本选择器

$("#btn1").click(function(){
   	//id='one'	$("#one").css("background-color","yellow"); });  $("#btn2").click(function(){
    	// class='mini' 	$(".mini").css("background-color","yellow"); }); $("#btn3").click(function(){
    	//div元素 	$("div").css("background-color","yellow"); });  $("#btn4").click(function(){
    	//所有的元素 	$("*").css("background-color","yellow"); });   $("#btn5").click(function(){
     	//所有的span标签  和  id=''two'的标签 	$("span,#two").css("background-color","yellow"); });

层次选择器

//所有的子元素  子孙后代$("body div").css("background-color","yellow"); //> 儿子是div$("body>div").css("background-color","yellow"); //+ 下一个平级的 元素$("#one+div").css("background-color","yellow"); //~ 后面的所有的平级元素$("#two~div").css("background-color","yellow");

基本过滤选择器

//第一个div标签$("div:first").css("background-color","#f00");//最后一个div标签$("div:last").css("background-color","#f00");//索引是偶数的div标签$("div:even").css("background-color","#f00");//所以为奇数的div标签$("div:odd").css("background-color","red");//索引是3的div元素$("div:eq(3)").css("background-color","#f00");//索引>3的div标签$("div:gt(3)").css("background-color","#f00");

内容过滤选择器

//内部包含字标签(class='mini')  div标签$("div:has(.mini)").css("background-color","#0ff");

可见性过滤选择器

//所有可见的div$("div:visible").css("background-color","#f00");//展示 所有不可见的div$("div:hidden").css("background-color","#f00").show(1000);

属性选择器

//含有title的div$("div[title]").css("background-color","#f00");//title='test'的div$("div[title='test']").css("background-color","#f00");

表单选择器

#form1 :input 包含input  selection  textarea button#form1 input  只包含 inputsize()等于length

$("#form1 :input").size()$("#form1 :input").length$("#form1 input").size()

表单对象属性选择器

对表单内 可用input 赋值操作$("input:enabled").val("可用文本框--");对表单内 不可用input 赋值操作$("input:disabled").val("不可用文本框--");获取多选框选中的个数$("[name='newsletter']:checked").size()$("[name='newsletter']:checked").length获取下拉框选中的个数$("select>option:selected").size()

属性和css attr() css()

attr() css()

attr()操作的是标签的属性css()操作的标签的style的属性赋值： 	$input.attr("value","mike");	$input.css("width","10px");获取值： 也可以直接通过方法获取 如   width()	$input.attr("value");	$input.css("width");

$(document).ready(function(){
   	//1.1给username添加title属性	$("[name='username']").attr("title","姓名title");	//1.2获取username的title属性	console.log($("[name='username']").attr('title'));		//1.3给username添加value和class属性	var $username = $("[name='username']");	$username.attr({
   		"value":"mike",		"class":"textClass"	});		//1.4删除username的class属性	$username.removeAttr("class");		//2.1给username添加一个名为textClass的样式	$username.addClass("textClass");		//2.2删除username的名为textClass的样式	$username.removeClass("textClass");		//4.1 给div添加边框样式	var $div = $("div");	$div.css("border","1px solid red")		//4.2 获取div的表框样式	console.log($div.css("border"))		//4.3 给div添加多种样式	$div.css({
   		"width":"100px",		"height":"100px",		"background-color":"#f00"	});			//5 获取div的位置	var left = $div.offset().left;	console.log(left);		//6 获取div的高和宽	console.log($div.css("width"));	console.log($div.width());});

prop("","”) val("") 优先级高，如果 attr("","")放在了后面，会失效的

var $username = $("[name='username']");$username.prop("value","许三多");$username.val("许三多2");//prop val 优先级高，导致后面的attr()不起作用$username.attr("value","许三多3");

html() text() val()

$div.html() $div.text() 包含空格

赋值的不同点： html(x)可以解析 x； text(x)不可以解析x

$div.html($("").html("百度"));$div2.text("");

取值的不同点: html()获取的是源码； text()获取的是文本

console.log($div.html());console.log($div2.text());

文档处理

插入内部

append(x) 末尾	prepend(x) 开头

   
	
    
济南
	
    
青岛
	
    
烟台
   
   
	
    
南京
	
    
苏州
	
    
无锡
   

$(document).ready(function(){
   	$("#shandong").append("
潍坊
");	$("#zhejiang").prepend("
常州
");});

插入外部

before(x) 前面	after(x)  后面

$("#shandong").before("
潍坊
");$("#zhejiang").after("
常州
");

删除

empty()清空内部元素	remove()删除该元素

$("#shandong").empty();$("#zhejiang").remove();
   
	
    
济南
	
    
青岛
	
    
烟台
   
   
	
    
南京
	
    
苏州
	
    
无锡
   

工具

数组和对象的操作

each

$("input:hidden").each(function(index,dom){
   	console.log(index);	console.log(dom.value);	console.log($(this).val());	console.log(this.value);});$("input:hidden").each(function(){
   	console.log($(this).val());});

案例

1-弹出广告

   
		
    
   
-----------------------------

2 隔行换色

//索引>0后  后面的元素的索引再从0开始$("tr:gt(0):odd").addClass("yellowClass");$("tr:gt(0):even").addClass("redClass");

3 全选和全不选

全选和全不选： 获取当前的checked状态，给下面的checkbox赋值 javaScript的方法是：

this.checked; jquery的方法是：

$("#selectAll").attr(“checked”) js<=1.6时

$("#selectAll").prop(“checked”); js>1.6时

this在方法中表示[object Window]，在函数中表示当前对象。方法：通过方法名调用，在方法 function methodName(){this表示[object Window]}；函数：通过对象调用,表示当前dom对象， click(function(){ this表示当前dom对象})

   
	    
     
		      
全选
		      
分类ID
		      
分类名称
		      
分类描述
		      
操作
	     
	     
		      
		      
1
		      
手机数码
		      
手机数码类商品
		      
修改|删除
	     
	     
		      
		      
2
		      
电脑办公
		      
电脑办公类商品
		      
修改|删除
	     
    
   
function selectAll(obj){
   	//console.log(obj.checked);	//console.log($("#selectAll").attr("checked"));//undefined	//console.log($(this).prop("checked"));//undefined	//console.log($(obj).prop("checked"));	$(".itemClass").prop("checked",$(obj).prop("checked"));}

全选function selectAll2(){
   	console.log($(this).attr("checked"));//undefined	console.log($(this).prop("checked"));//undefined	console.log(this);	//错误的	$(".itemClass2").prop("checked",$(this).prop("checked"));}

全选$("#selectAll3").click(function(){
   	console.log($(this).attr("checked"));//undefined	console.log($(this).prop("checked"));	$(".itemClass3").prop("checked",$(this).prop("checked"));})

4 省市联动

籍贯：    

5 左右选中

//移动一个$("#toRight1").click(function(){
   		$("#left>option:selected:first").appendTo($("#right"));});//移动多个$("#toRight2").click(function(){
   	$("#left>option:selected").appendTo($("#right"));});//移动全部$("#toRight3").click(function(){
   	$("#right").append($("#left>option"))});

   
	    
     
		      
							環				芈				琅				琊				爨				甄				槑				夔				嬲									
		      
			
			
			
			
			
					
		      
								
	     
    
   

源码

转载地址：http://hcdvi.baihongyu.com/