jQuery标签选择器

 

 

 

 

 

//alert("Hello jquery");
	
	//选择器
	//id选择器
	$("#bt1").click(
			function()
			{
				alert("点击了按钮 文字=");
			}
	
	);
	//标签选择器
	//属性过滤器
	$("input[type=button]").click(
			
		function()
		{
			alert("通过标签选择器，选中了老付");
		}
	);
	
	//类选择器
	$(".cl").click(
			
		function()
		{
			alert("老付是个王八蛋！！！");
		}
	);
	
	//使用DOM方式获取元素
	var bt_3 = document.getElementById("bt3");
	var $jbt_3 = $(bt_3);
	$jbt_3.click(
			
		function()
		{
			alert("从DOM对象转为jQuery！！！");
		}
	);

　　对象转换

//从jQuery对象转到DOM对象
	var $jbt_1 = $("#bt1");
	alert("集合长度="+$jbt_1.length);
	var bt_1 = $jbt_1[0];
	alert("DOM按钮的内容="+bt_1.value);
	
	var $jbt_4 =$("button");
	var bt_4 =$jbt_4[0];
	alert("DOM按钮的内容==="+bt_4.firstChild.nodeValue);
	
	
	$jbt_4.click(
			
		function()
		{
			alert("button的文本="+$(this).text());
		}
	);
}
)

　　

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript">
//调用jQuery
//相当于window.load()  当窗口加载完毕之后触发
$(function(){
	
	//alert("Hello jquery");
	
	//选择器
	//id选择器
	$("#bt1").click(
			function()
			{
				alert("点击了按钮 文字=");
			}
	
	);
	//标签选择器
	//属性过滤器
	$("input[type=button]").click(
			
		function()
		{
			alert("通过标签选择器，选中了老付");
		}
	);
	
	//类选择器
	$(".cl").click(
			
		function()
		{
			alert("老付是个王八蛋！！！");
		}
	);
	
	//使用DOM方式获取元素
	var bt_3 = document.getElementById("bt3");
	var $jbt_3 = $(bt_3);
	$jbt_3.click(
			
		function()
		{
			alert("从DOM对象转为jQuery！！！");
		}
	);
	
	//从jQuery对象转到DOM对象
	var $jbt_1 = $("#bt1");
	alert("集合长度="+$jbt_1.length);
	var bt_1 = $jbt_1[0];
	alert("DOM按钮的内容="+bt_1.value);
	
	var $jbt_4 =$("button");
	var bt_4 =$jbt_4[0];
	alert("DOM按钮的内容==="+bt_4.firstChild.nodeValue);
	
	
	$jbt_4.click(
			
		function()
		{
			alert("button的文本="+$(this).text());
		}
	);
}
)

</script>

</head>
<body>
测试jQuery
<br>
<input id="bt1" type="button" value="按钮1"><br>
<input class="cl" id="bt2" type="button" value="按钮2"><br><br>
<input class="cl" type="text">
<br>

<input id="bt3" value="按钮3" type="button">


<br>
<button id ="bt4">按钮4</button>
<br>
<button id ="bt5">按钮5</button>
</body>
</html>

　　

posted @ 2016-11-23 19:01  琢磨先生  阅读(420)  评论(0)    收藏  举报
AmazingCounters.com