您的位置：首页 > Web前端 > JQuery

jQuery基本选择器的使用

2016-07-17 10:47 621 查看

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>jQuery基本选择的器的使用</title>
	<script type="text/javascript" src="../jquery/jquery-2.2.3.js" ></script>
	</head>
	<body>
	<p id="my_p">这是一个id为my_p的p元素</p>
	<p>这仅仅是一个p元素</p>
	<p class="my_class">这是class为my_class的p元素</p>
	<span class="your_class" name="span_name">这是一个span元素</span>
	<input type="button" name="span_name" value="按钮" />
	<input type="button" />

	<script type="text/javascript">
	//jQuery是通过CSS选择器来查找和操作DOM元素

	$(function () {
	//1、ID选择器
	var $p1 = $("#my_p");
	//相当于JS中的
	var p1 = document.getElementById("my_p");

	//注意：jQuery对象一定要使用jQuery相关的属性和方法，不能直接去操作JS原生的属性和方法。
	// console.log($p1.innerHTML);
	//jQuery中的html() 方法相当于 JS原生的innerHTML
	console.log($p1.html());

	//打印出来是一个数组，也就是时候，通过构造函数创建获得jQuery对象都是一个数组。
	console.log($p1);

	//获得数组的第一个元素（就获得了DOM对象-JS原生对象）
	//jQuery对象转换成JS对象 var r_p1 = $("#p1").get(0);
	var dom_p = $p1.get(0);
	console.log(dom_p.innerHTML);

	//JSDOM对象转换成jQuery对象
	var $p2 = $(dom_p);
	console.log($p2.html());

	//获取一个不存在的元素, 不会像JS那样返回一个undefined。
	var $p3 = $("#my_p1");
	console.log($p3.length);


	//2、元素选择器
	var $p = $("p");
	//相当于JS中的
	var p = document.getElementsByTagName("p");

	//如果有很多的话，默认打印第一个。
	console.log($p.html());

	for (var i = 0; i < $p.length; i++) {
	//注意：这种操作又会转换成JS对象
	// console.log($p[i].html());
	console.log($p[i].innerHTML);
	}

	//3、类选择器
	var $p4 = $(".my_class");
	//相当于JS中的
	var p4 = document.getElementsByClassName("my_class");

	console.log($p4.html());


	//属性选择器
	var $p5 = $("[name = span_name]");
	console.log($p5.html());

	//4、属性过滤
	//获得属性前缀相关
	//获得class属性值得前缀为my_的所有元素
	var $p6 = $("[class ^= my_]");

	console.log($p6.html());

	//获得class属性值后缀为_class的所有元素
	var $p7 = $("[class $= _class]");

	console.log($p7.length);

	//5、组合选择器
	var $p8 = $("input[name = span_name]");
	console.log($p8.val()); //相当于JS的value属性
	console.log($p8.length);

	});


	</script>
	</body>
	</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航