day05.jQuery

Posted on: 2016年8月14日 2016年8月14日
Categories: JS+JQuery

总体知识梳理:

2.概述:

代码:

<!DOCTYPE html>

<html>

<head>

<!–导入js库–>

</head>

<body>

//jQuery是关键字

//固定格式:jQuery(“选择器“)–jQuery对象

//jQuery–简写$

/*var val = jQuery(“#ids”).val();*/

var val2 = $(“#ids”).val();

alert(val2);

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

<!–导入js库–>

</head>

<body>

//DOM对象和jQuery对象的转换

//dom转换为jQuery—-$(dom对象)

var domDiv = document.getElementById(“ids”);

//alert($(domDiv).val());

//jQuery对象转换为dom对象

var jDiv = $(“#ids”);

/*var dodiv = jDiv[0];*/

var dodiv = jDiv.get(0);

alert(dodiv.value);

</script>

</body>

</html>

3.页面加载

代码:

<!DOCTYPE html>

<html>

<head>

//js加载 :js的页面加载方法只能写一个,多写只执行最后一个

window.onload= function (){

alert(“js1”);

}

window.onload= function(){

alert(“js2”);

}

//jQuery加载: jQuery页面加载方法可加载多个

//jQuery加载优先级比js高,所以先加载jQuery然后才加载js

//加载结果:jQuery1–>jQuery2–>js2

$(function(){

alert(“jQuery1”);

})

$(function(){

alert(“jQuery2”);

})

</script>

</head>

<body>

</body>

</html>

4.基本选择器

代码:

<!DOCTYPE html>

<html>

<head>

<!–导入js库–>

<!–导入css文件–>

</head>

<body>

<h3>基本选择器.</h3>

<!– 测试的元素 –>

id为one,class为one的div

<div class=“mini”>class为mini</div>

</div>

id为two,class为one,title为test的div.

<div class=“mini” title=“other”>class为mini,title为other</div>

<div class=“mini” title=“test”>class为mini,title为test</div>

</div>

<div class=“mini”>class为mini</div>

</div>

<div class=“mini”>class为mini</div>

<div class=“mini” title=“tesst”>class为mini,title为tesst</div>

</div>

<div style=“display:none;” class=“none”>style的display为“none”的div</div>

<div class=“hide”>class为“hide”的div</div>

<div>

包含input的type为“hidden”的div<input type=“hidden” size=“8” />

</div>

<span>

span标签

</span>

<button onclick=“fn1()“>选择id为one的元素</button>

<button onclick=“fn2()“>选择class为mini的元素</button>

<button onclick=“fn3()“>选择元素名为div的元素</button>

<button onclick=“fn4()“>选择所有的元素</button>

<button onclick=“fn5()“>选择元素名为span和id为two的元素</button>

//选择id为one的元素

function fn1(){

$(“#one”).css(“background”,“aqua”);

}

//选择class为mini的元素

function fn2(){

$(“.mini”).css(“background”,“aqua”);

}

//选择元素名为div的元素

function fn3(){

$(“div”).css(“background”,“aqua”);

}

//选择所有的元素

function fn4(){

$(“*”).css(“background”,“aqua”);

}

//选择元素名为span和id为two的元素

function fn5(){

$(“span,#two”).css(“background”,“aqua”);

}

</script>

</body>

</html>

5.层级选择器

代码:

<!DOCTYPE html>

<html>

<head>

<title>层次选择器</title>

</head>

<body>

<h3>层次选择器.</h3>

<!– 测试的元素 –>

id为one,class为one的div

<div class=“mini”>class为mini</div>

</div>

id为two,class为one,title为test的div.

<div class=“mini” title=“other”>class为mini,title为other</div>

<div class=“mini” title=“test”>class为mini,title为test</div>

</div>

<div class=“mini”>class为mini</div>

</div>

<div class=“mini”>class为mini</div>

<div class=“mini” title=“tesst”>class为mini,title为tesst</div>

</div>

<div style=“display:none;” class=“none”>style的display为“none”的div</div>

<div class=“hide”>class为“hide”的div</div>

<div>

包含input的type为“hidden”的div<input type=“hidden” size=“8” />

</div>

<button onclick=“fn1()“>选择body内所有的div元素</button>

<button onclick=“fn2()“>选择body的子元素div</button>

<button onclick=“fn3()“>选择id为one的下一个（兄弟）div元素</button>

<button onclick=“fn4()“>选择id为two的元素后面的所有div元素</button>

//选择body内所有的div元素

function fn1() {

$(“body div”).css(“background”,“aqua”);

}

//选择body的子元素div

function fn2() {

$(“body>div”).css(“background”,“aqua”);

}

//选择id为one的下一个div元素

function fn3() {

$(“#one+div”).css(“background”,“aqua”);

}

//选择id为two的元素后面的所有div元素

function fn4() {

$(“#two~div”).css(“background”,“aqua”);

}

</script>

</body>

</html>

6.过滤选择器

局部代码:

基本过滤选择器:

//选择第一个div元素

function fun1() {

$(“div:first”).css(“background”,“#8A2BE2”);

}

//选择最后一个div

function fun2() {

$(“div:last”).css(“background”,“#8A2BE2”);

}

//选择class不为one的元素的所有div元素$(“dom:not(.one)”)

function fun3() {

$(“div:not(.one)”).css(“background”,“#8A2BE2”);

}

//”选择索引值为偶数
的div元素. even:偶数 odd：奇数“

function fun4() {

$(“div:even”).css(“background”,“#8A2BE2”);

}

//选择索引值奇数元素

function fun5() {

$(“div:odd”).css(“background”,“#8A2BE2”);

}

//选择索引值等于3的div元素.”

function fun6() {

$(“div:eq(3)”).css(“background”,“#8A2BE2”);

}

//选择索引值大于3的div元素.

function fun7() {

$(“div:gt(3)”).css(“background”,“#8A2BE2”);

}

//选择索引值小于3的div元素.

function fun8() {

$(“div:lt(3)”).css(“background”,“#8A2BE2”);

}

//选择标题元素

function fun9() {

$(“:header”).css(“background”,“#8A2BE2”);

}

//匹配动画

function fun10() {

$(“:animated”).css(“background”,“#8A2BE2”);

}

</script>

内容过滤选择器:

//选择含有文本“di”的div元素 $(“tagName:contains(‘di’)”)

function fn1(){

$(“div:contains(‘di’)”).css(“background”,“#8A2BE2”);

}

//空div元素 $(“tagName:empty”)

function fn2(){

$(“div:empty”).css(“background”,“#8A2BE2”);

}

//选择包含class为mini元素的div元素$(“tagName:has(.mini)”)

function fn3(){

$(“div:has(.mini)”).css(“background”,“#8A2BE2”);

}

//不为空的div元素$(“tagName:parent”)

function fn4(){

$(“div:parent”).css(“background”,“#8A2BE2”);

}

</script>

可见性过滤选择器:

//选择所有的可见的div元素,设置样式

function fn1(){

$(“div:visible”).css(“background”,“aliceblue”);

}

//2.选中不可见的div元素用show();

function fn2(){

$(“div:hiden”).show(2000).css(“background”,“aliceblue”);

}

</script>

属性过滤选择器:

//选取含有属性title的div元素.$(“tagName[title]”);

function fn1(){

$(“div[title]”).css(“background”,“antiquewhite”);

}

//选取属性title值等于test的div元素。$(“tagName[title=’test’]”)。

function fn2(){

$(“div[title=test]”).css(“background”,“antiquewhite”);

}

//选取属性title值不等于test的div元素!=

function fn3(){

$(“div[title!=test]”).css(“background”,“antiquewhite”);

}

//选取属性title值以te开始的div元素^=

function fn4(){

$(“div[title^=te]”).css(“background”,“antiquewhite”);

}

//选取属性title值以est结束的div元素$=

function fn5(){

$(“div[title$=est]”).css(“background”,“antiquewhite”);

}

//选取属性title值包含es的div元素 *=

function fn6(){

$(“div[title*=es]”).css(“background”,“antiquewhite”);

}

//组合属性选择器，首先选取有属性id的div元素，然后在选择属性中title值
含有es的元素$(“tagName[id][title*=’es’]”)。

function fn7(){

$(“div[id][title*=es]”).css(“background”,“antiquewhite”);

}

</script>

子元素过滤选择器:

//选取class为one的div下的第2个元素div.one :nth-child(2);

function fn1(){

$(“div.one :nth-child(2)”).css(“background”,“chartreuse”);

}

//选取class为one的div下的第1个元素

function fn2(){

$(“div.one :first-child”).css(“background”,“chartreuse”);

}

//选取class为one的div下的最后一个元素

function fn3(){

$(“div.one :last-child”).css(“background”,“chartreuse”);

}

//选取class为one的div仅有的一个元素

function fn4(){

$(“div.one :only-child”).css(“background”,“chartreuse”);

//注意:每个one后有空格,若没有空格显示错误
原因可能是后边的是子类元素要加空格

}

</script>

表单过滤选择器:

<!DOCTYPE html>

<html>

<head>

$(function(){

// 对text框和password框，添加失去焦点事件

/*$(“input”).blur(

function(){

alert(“sss”);

}

)*/

$(“:text”).blur(

function(){

alert(“用户名框失去焦点“);

})

$(“:password”).blur(

function(){

alert(“密码框失去焦点“);

})

});

</script>

</head>

<body>

用户名 <input type=“text” name=“username” /><br/>

密码 <input type=“password” name=“password” /><br/>

</form>

</body>

</html>

表单对象属性:

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
	<title>表单对象属性过滤选择器</title>
	<!– 引入jQuery –>
	<script src=”../js/jquery-1.8.3.js” type=”text/javascript”></script>
	<link rel=”stylesheet” type=”text/css” href=”./css/style.css” />

	</head>
	<body>
	可用元素：<input name=”add” value=”可用文本框”/> <br/>
	不可用元素：<input name=”email” disabled=”disabled” value=”不可用文本框”/><br/>

	<button id=”btn1″ onclick=”fn1()”>获得可用属性的标签</button>
	<button id=”btn2″ onclick=”fn2()”> 获得不可用属性标签</button>
	<script>
	//获得可用的input标签(dom:enabled)
	function fn1(){

	$(“input:enabled”).css(“background”,”red”);
	}
	//获得不可用的input标签
	function fn2(){

	$(“input:disabled”).css(“background”,”red”);
	}
	</script>
	</body>
	</html>

	<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
	<html xmlns=”http://www.w3.org/1999/xhtml”>
	<head>
	<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

	<!– 引入jQuery –>
	<script src=”../js/jquery-1.8.3.js” type=”text/javascript”></script>
	<link rel=”stylesheet” type=”text/css” href=”./css/style.css” />

	<script type=”text/javascript”>
	$(function(){
	//获取多选框选中的个数
	$(“#btn1”).click(function(){

	var len = $(“input[name=’newsletter’]:checked”).length;
	alert(len)

	});
	//获取下拉框选中的内容
	$(“#btn2”).click(function(){
	//lenth:长度 size() 长度。

	/*var len1 = $(“:selected”).size();
	alert(len1);*/
	//jQUery自己的循环 each循环

	/*
	each循环：对数组对象进行循环，
	每一个对象循环到的时候都会调用一次function方法。
	* */

	/*$(“:selected”).each(function(){

	//this 代表循环到的当前对象但是他是一个dom对象
	alert( $(this).val());
	})
	*/

	$(“:selected”).each(function(n,obj){
	// n:相当于循环次数 ,从0开始
	//obj:相当于this 当前对象 dom对象 $(obj)
	alert(n);
	alert($(obj).val());

	})

	});
	})
	</script>

	</head>
	<body>
	<button id=”btn1″>获取多选框选中的个数.</button>
	<button id=”btn2″>获取下拉框选中的内容.</button>

	<br /><br />
	多选框：<br/>
	<input type=”checkbox” name=”newsletter” checked=”checked” value=”test1″ />test1
	<input type=”checkbox” name=”newsletter” value=”test2″ />test2
	<input type=”checkbox” name=”newsletter” value=”test3″ />test3
	<input type=”checkbox” name=”newsletter” checked=”checked” value=”test4″ />test4
	<input type=”checkbox” name=”newsletter” value=”test5″ />test5
	<div id=”checkboxDivId”></div>

	<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
	下拉列表：<br/>
	<select name=”test” multiple=”multiple” style=”height:100px”>
	<option>浙江</option>
	<option selected=”selected”>湖南</option>
	<option>北京</option>
	<option selected=”selected”>天津</option>
	<option>广州</option>
	<option>湖北</option>
	</select>
	</body>
	</html>

7.效果:

代码:

<!DOCTYPE html>

<html>

<head>

<!–导入js库–>

</head>

<body>

</body>

function fun1(){

//获得jQuery对象

$(“#ids”).show(3000);//显示,参数毫秒

}

function fun2(){

$(“#ids”).hide(3000);//隐藏

}

function fun3(){

$(“#ids”).toggle(2000);//切换

}

function fun4(){

$(“#ids”).fadeTo(2000,0.25);

}

</script>

</html>

8.操作:

代码:

<!DOCTYPE html>

<html>

<head>

<style>

.textClass{

background-color: blueviolet;

}

</style>

$(function (){

//1.属性操作

//我们给富贵(name=”username”)的input标签添加一个title属性,属性值为富贵

//attr():给标签添加属性

$(“#username”).attr(“title”,“富贵“);

//removeAttr():移除属性

$(“#uname”).removeAttr(“disabled”);

//2.样式操作

//点击按钮的时候(先给绑定事件),对(name=”uname”)的input标签进行样式操作

$(“#buttonTd”).click(function(){

/*//移除属性

$(“#uname”).removeClass(“textClass”);

//添加属性

$(“#uname”).addClass(“textClass”);*/

//切换属性

$(“#uname”).toggleClass(“textClass”);

})

//文本操作:

//html(); 向开始标签和结束标签中间插入内容

$(“div”).html(“<a href=”>最近好吗?</a>”);

var val= $(“div”).html();

alert(val);//打印结果为:<a href=”>最近好吗?</a>

//text(): 类似于html但其操作的内容是文本

var val1 = $(“div”).text();

alert(val1);//打印结果为:最近好吗?

$(“div”).text(“<a href=”>你是谁?</a>”);

var val1 = $(“div”).text();

alert(val1);//打印结果为:<a href=”>你是谁?</a>

})

</script>

</head>

<body>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

</form>

</div>

</body>

</html>

wenzhongxiang

295

wenzhongxiang

发表评论 取消回复

发表评论取消回复