jquery选择器练习_PHP中文网手记

摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jquery</title> <script type="text/javascript" src="jq
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jquery</title>
	<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
	<style type="text/css" media="screen">
		div {width: 100px;height: 100px;border:1px solid #ccc; margin: 10px;}
	</style>
</head>
<body>
	<script type="text/javascript">
 			//元素			动作
		//$(select).action()   选择器语法。  

		$(document).ready(function(){   //文档就绪函数，文档加载完成后才执行，防止文档没有加载完就可以执行，  类似于JS的window.onload事件。
			$str = "你好，我是李全权！";
			//alert($str);
			// $("div").hide()
			$("button").click(function() {
				$("div").show();
			})


			//顺序选择器
			//$('E:first') 匹配第一个
			//$('E:last')  匹配最后一个

			//比较选择器X重0开始
			//$('E:gt(x)')   //大于
			//$('E:lt(x)')	//小于
			//$('E:eq(x)')   //等于

			//

			// $('p:eq(2)').css(
			// 	'background','red'
			// );
								//even奇数选择器
								//odd双数选择器

			// $('p:even').css(
			// 	'background','red'
			// 	);
			// $('p:odd').css('background','blue') 

			// :not(selector)   not非意思
			//  :empty 选择元素内部没有包含元素内容的元素
			// $('div:not(:empty)').css('background','blue')   //去反。   不是空得元素 都选中
			// $('div:empty').css('background','red')   //选择元素没有包含元素或文本得元素。

			//:parent 匹配含有子元素或者文本的元素  与empty相反

			// $('div:parent').css('background','red')

			//:contains(text) 包含指定字符串的所有元素
			// :has(select)   选择包含特定元素的元素
			// $('div:has(p)').css('background','blue') //匹配div下面包含P元素的元素


			// $('div:contains(q)').css('background','blue') //匹配div下包含文本为q的元素


			//["type='text'"]  ^开头  $结尾 *包含 !取反
			// $("input[type=text]").css('background','blue')
			$("input[type!=text]").css('background','blue')


			//表单选择器

			// $(":checked") 所有被选中的 input 元素	$(":selected")所有被选取的 input 元素  $(":enabled")所有激活的 input 元素    $(":disabled")所有禁用的 input 元素

				//$(":checked").parent()   

		})
	</script>

	<div style="width: 100px;height:100px;background: pink;">
		你好！
	</div>
	<button>注册</button>

		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<div>
	<div>
		你好！
	</div></div>
		<div><p></p></div>
		<div></div>
		<div>lqq</div>



			
		<label>1</label><input type="text" name=""  disabled><br>
		<label>2</label><input type="password" name=""><br>
		<label>3</label><input type="" name=""><br>
		<label>4</label><input type="qq" name=""><br>
		<label>5</label><input type="" name=""><br>

		<select name="" multiple>
			<option value="	option">option</option>
			<option value="	option">option</option>
			<option value="	option">option</option>
		
		</select>
	
</body>
</html>
批改老师：灭绝师太批改时间：2019-03-25 09:21:20
老师总结：完成的很好!但是练习不能局限于老师的上课案例哦!
jquery选择器练习

热门词条
