(JS-JQ)jQuery基本概念

jQuery,是一个JS框架，也可以说是一个JS库
在JS中讲述了DOM对象

这里引入
jQuery对象：指的是通过jQuery创建出来的，一些对象，可以通过查jQueryAPI文档

注意：DOM对象和jQuery对象是不能互相调用的

jquery的使用流程：
1.下载jquery的文件
2.在把对应的js文件放入web工程当中去
3.通过以下代码载入jquery

<!-- 该标签只负责载入jquery -->
	<script type="text/javascript" src="js/jquery-migrate-1.4.1.js">
	</script>

4.开始使用jquery

<!-- 该标签只负责载入jquery -->
	<script type="text/javascript" src="js/jquery.js">
	</script>
	
	<!-- 开始使用jquery -->
	<script type="text/javascript">
		$(
			function(){
				alert("我启动了jQuery");
			}		
		)
	</script>

5.当页面中所有的元素都加载完成后，才会执行jquery的代码

启动jquert代码格式

$(
	function(){
	}
)

dom对象转换为jquery对象

$(
			function(){
				var t_don = document.getElementById("mytext");
				var t_jquery = $(t_don); //将dom对象转换为了jquery对象
				alert(t_don.value);
				
				//如果直接用jquery对象去调value(dom对象的属性)，是不行的
				alert(t_jquery.value);
				//查看jqueryAPI调用他自己的方法
				alert(t_jquery.val());
			}		
		)

jquery对象转换为dom对象

	$(
			function(){
				//jquery对象绑定标签
				var $jquery = $("#newtext");
				//jquery对象都是数组，数组里面的每一个元素为一个DOM对象，数组的长度取决于获取到标签之后的个数gu
				var dom = $jquery[0];
				
				alert($jquery.val());
				alert("dom"+dom.value)
			}		
		)

<input type="text" id="newtext" value="lisi"/>

选择器

什么是选择器：选择器就是获取页面元素的一种语法(工具)，jquery提供丰富的元素选择器，可方便快捷的获取到页面中的元素，选中类似CSS获取样式的方法
1.id选择器
通过标签的id来获取元素
注意：id是不能重复的，id重复后，jquery中回只读第一次出现该ID的标签

<script type="text/javascript">
		$(
			function(){
				//通过标签id，绑定元素
				alert($("#mytext").val());
			}		
		)
		
		)
	</script>
	<input type="text"  id="mytext"  value="zhangsna"/>

2.元素选择器

<script type="text/javascript">
$(
	function(){
	//直接根据标签名获取元素
		alert($("p")[0].innerText);
	}		
)
<script>
<p>gogogo</p>

3.class选择器

<script type="text/javascript">
//class选择器，通过class的值获取，同时观察当jquery获得多个元素的处理方法
$(
	function(){
		//通过class名获取
		alert($(".classname").length);
				
		//当获取到不止一个元素时,.val()方法会输出数组里第一个DOM对象的value值
		$(".classname").val();
	}		
)
<script>
<input type="text"  class="classname"  value="wangwu"/>
<input type="text" 	 class="classname" value="zhaoliu"/>

4.parent-child层次选择器

<script type="text/javascript">
//parent-child层次选择器，通过父标签找到子标签
$(
	function(){
		alert($("div>.name").length); //找到div下所有的class名为name的子标签
		alert($("#di>.name").length); //找到id为di下所有的class名为name的子标签
	}		
)
<script>
<div id="di">
	<input type="text"  class="name"  value="wangwu"/>
	<input type="text" 	 class="name" value="zhaoliu"/>
</div>

5.prev+next

//prev+next，找到prev标签紧邻的元素
<script type="text/javascript">
$(
	function(){
		alert($("div+.name").length);//找到div标签紧邻的class名为name的元素，只会有一个，因为紧邻的只会有一个,本例中紧邻的为value值为"ww1"
			}		
)
<script>
<div id="di">
		<input type="text"  class="name"  value="wangwu"/>
		<input type="text" 	 class="name" value="zhaoliu"/>
	</div>
		<input type="text"  class="name"  value="ww1"/>
		<input type="text" 	 class="name" value="xx1"/>

6.prev+siblings

//prev~sibling,找到prev标签后所有的元素
$(
	function(){
		alert($("div ~ .name").length);//找到div标签后所有的class名字为name的元素
	}		
)

7.属性选择器
通过属性名来获取

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$(".classname[value]")选取所有class名为classname的带有value值的元素

jQuery简单过滤器

对照API文档来学习