jquery的概念和使用

1.1 jQuery的认识
jQuery是继prototype原型之后又一个优秀的JavaScript框架(jquery.js库)。
jQuery的核心特性可以总结为：
1）具有独特的链式语法 和短小清晰的多功能接口；
2）具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
3）拥有便捷的插件扩展机制和丰富的插件；
4）jQuery兼容各种主流浏览器，包括互联网IE6
2.1 jQuery的使用
先导入包
引入<script type="text/javascript" src="/js/jquery-1.11.2.js"></script>
2.2页面加载事件

<script type="text/javascript">
			// jQuery 写法在原始写法之前执行，这三种都是在页面加载会后才执行
			//原始写法，window.onload 页面加载完执行
			window.onload = function(){
				alert(111);
			}
			//jQuery 写法 默认页面加载完执行
			$(function(){
				alert(222);
			})
			//完整写法
			$(document).ready(function() {
				alert(333);
			})
			//jQuery 是等效于 $ 的，提供两种写法是为了兼容性，防止其他框架占用的情况
			$(function(){
				console.log($("#myDiv"));
				console.log(jQuery("#myDiv"))；
				console.log(window.$ === window.jQuery);
			});
		</script>

3.1 jQuery选择器

1.1 Id选择器 #

$("#myDiv")  

如果有多个id,只能操作第一个
如果要操作的控件在循环里面(id会重复出现)，就不能使用id选择器。

1.2 class 样式选择器 .

$(".div").html("xxx");

如果有多个对应的样式,都可以全部进行操作
1.3element 元素选择器

$("div").html("xxx");

$("input").val("所有的input");

如果有多个对应的控件,都可以全部进行操作
1.4 * 所有元素(控件)

console.debug($("*"));//获取所有的页面控件

1.5 selector1选择器

console.debug($("div,input"))；

1.6 多元素选择器

 $("tagName1,tagName2") 

1.7祖先后代选器

 $('tagName1 tagName2') 

1.8 父亲儿子

$("parent  >  child") 

1.9 匹配下面所有元素

$("tag1 ~ tag2 ") 

1.10 相邻选择器，匹配所有紧接在 prev 元素后的 next 元素

$("tag1 + tag2") 

1.11 属性选择器

$("input[name=hobbies]")

4.1注册事件

			//  js：注册事件
			 		onclick 
			  		元素.onclick
			  		元素.addEventListener
			  
			  //jquery注册事件
			  		//第一种
				 	$(“#id”).click(function(){
				 		alert(0)
				 		});
				 	//第二种	
					$(“#id”).on(“click”,function(){
						alert(0)
					});
					//取消
					$(“#id”).off(“click”);
					//第三种
					$(“#id”).bind(“click”,function(){
						alert(0)
					});
					//取消
					$(“#id”).unbind(“click”);

5.1常用方法

append appendTo prepend prependTo 追加

  val() 取值  val(values) 赋值

 prop(属性名,属性值)；给元素设属性值；

 hide()隐藏 show(); 显示

each(function(index,dom){}) 遍历一个jQuery对象，为每个匹配元素执行一个函数

empty()

clone() clone(true) 为true时 可以克隆事件

closest()

parent()

remove()移除

html()  等效innerHTML

css() 设置样式