javaWeb基础04-JQuery

JQuery

jquery和html的整合

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

<script src="../js/jquery-1.11.0.min.js"></script>
<script  type="text/javascript">
		//3 页面加载成功
		$(function(){
			console.log("页面加载成功1");
		});
</script>

获取一个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):淡出

	<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
	<style type="text/css">
		div{
			border: 1px solid #000;
			width: 100px;
			height: 100px;
		}
	</style>
$("#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) <
内容过滤:
	:has("选择器"):包含指定选择器的元素
可见过滤:
	:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
	:visible 
属性过滤器:★
	[属性名]
	[属性名="值"]
表单过滤:
	:input  所有的表单子标签  input select textarea button
	//input

基本选择器

$("#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  只包含 input
size()等于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($("<a href='#'>").html("百度"));
$div2.text("<a href='#' value='淘宝'>");

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

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

文档处理

插入内部

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

<ul id="shandong">
	<li>济南</li>
	<li>青岛</li>
	<li>烟台</li>
</ul>

<ol id="zhejiang">
	<li>南京</li>
	<li>苏州</li>
	<li>无锡</li>
</ol>

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

插入外部

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

$("#shandong").before("<li>潍坊</li>");
$("#zhejiang").after("<li>常州</li>");

删除

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

$("#shandong").empty();
$("#zhejiang").remove();

<ul id="shandong" style="width: 100px;height: 100px;border: 1px solid red;">
	<li>济南</li>
	<li>青岛</li>
	<li>烟台</li>
</ul>
<ol id="zhejiang" style="width: 100px;height: 100px;border: 1px solid red;">
	<li>南京</li>
	<li>苏州</li>
	<li>无锡</li>
</ol>

工具

数组和对象的操作

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-弹出广告

<div style="display: none;" id="divAD">
		<img src="../img/ad_.jpg" style="width: 100%;" />
</div>
-----------------------------
<script src="../js/jquery-1.11.0.min.js"></script>
<script>
	$(function(){
		window.setTimeout(showAD,2000);
	})
	
	function showAD(){
		$("#divAD").fadeIn(2000);
		window.setTimeout(hideAD,1000);
	}
	
	function hideAD(){
		$("#divAD").fadeOut(2000);
	}
</script>

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对象})  

<table style="border: 1px solid red;width: 60%;height: 40%;" cellspacing="0" cellpadding="10px" border="1">
	<tr>
		<td><input type="checkbox" id="selectAll" onclick="selectAll(this)" >全选</input></td>
		<td>分类ID</td>
		<td>分类名称</td>
		<td>分类描述</td>
		<td>操作</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="itemClass" /></td>
		<td>1</td>
		<td>手机数码</td>
		<td>手机数码类商品</td>
		<td>修改|删除</td>
	</tr>
	<tr>
		<td><input type="checkbox" class="itemClass" /></td>
		<td>2</td>
		<td>电脑办公</td>
		<td>电脑办公类商品</td>
		<td>修改|删除</td>
	</tr>
</table>

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"));
}

<input type="checkbox"  onclick="selectAll2()" >全选</input>
function selectAll2(){
	console.log($(this).attr("checked"));//undefined
	console.log($(this).prop("checked"));//undefined
	console.log(this);
	//错误的
	$(".itemClass2").prop("checked",$(this).prop("checked"));
}

<input type="checkbox" id="selectAll3">全选</input>
$("#selectAll3").click(function(){
	console.log($(this).attr("checked"));//undefined
	console.log($(this).prop("checked"));
	$(".itemClass3").prop("checked",$(this).prop("checked"));
})

4 省市联动

籍贯：<select id="province"></select>
    <select id="city"></select>

<script>
	var arr=new Array();
	 arr[0]=new Array("广东省","江苏省","山东省");
	 arr[1]=new Array("广州","深证","珠海");
	 arr[2]=new Array("苏州","南京","常州");
	 arr[3]=new Array("济南","青岛","烟台");
	 
	 $(function(){
	 	var $prvince = $("#province");
	 	var $city = $("#city");
	 	
	 	//初始化
	 	$prvince.append("<option>请选择</option>");
	 	//$prvince.html("<option>请选择</option>");
	 	$(arr[0]).each(function(index,item){
	 		$prvince.append("<option value='"+(index+1)+"'>"+item+"</option>");
	 	});
	 	
	 	//jquery事件绑定入 click(function()) function()中是没有参数的。除非是each(function(index,item){})
	 	$city.html("<option>请选择</option>");
	 	$prvince.change(function(){
	 		console.log($(this).val());
	 		$city.empty();
	 		$(arr[$(this).val()]).each(function(index,item){
		 		$city.append("<option value='"+index+"'>"+item+"</option>");
		 	});
	 	});
	 })
	
</script>

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"))
});

<table>
	<tr>
		<td>
			<select id="left" multiple="true" style="width:100px" size="10">
				<option>環</option>
				<option>芈</option>
				<option>琅</option>
				<option>琊</option>
				<option>爨</option>
				<option>甄</option>
				<option>槑</option>
				<option>夔</option>
				<option>嬲</option>
				<option></option>
			</select>
		</td>
		<td>
			<input type="button" value=">" id="toRight1"><br>
			<input type="button" value=">>" id="toRight2"><br>
			<input type="button" value=">>>" id="toRight3"><br><br>
			<input type="button" value="<" id="toLeft1"><br>
			<input type="button" value="<<" id="toLeft2"><br>
			<input type="button" value="<<<" id="toLeft3">
		</td>
		<td>
			<select id="right" multiple="true" style="width:100px" size="10">
			</select>
		</td>
	</tr>
</table>

源码

源码