jQuery基础

要使用jQuery要引用jQuery文件，在头标签中引用

<script src="jquery-1.11.2.min.js"></script>   //引入jQuery文件

注意：页面同时引用多个js文件，jQuery一定是最前面

在jQuery中“$”符号是代表选择器

<script type="text/javascript">
	//页面加载完成
	$(document).ready(function(e) {
        　　//页面加载完成后执行
        });
</script>

jQuery的几种操作（注意和js的区别）：

1.选取元素

//JS中的找元素,DOM对象
//var a = document.getElementById("aa");  //根据id找
//alert(a);

//var a = document.getElementsByClassName("aa");  //根据class名找
//alert(a[1]);

//var a = document.getElementsByTagName("div");   //根据标签找

//var a = document.getElementsByName("uid");   //根据name找
//alert(a[0]);

　jQuery选取元素：

<div id="aa">1111</div>

（1）根据id找

　　//var a = $("#aa");   //根据ID找：#
　　//alert(a);    //1.找的是jQuery对象
　　alert(a[0]);    //2.找的就是id的 

    

<div class="bb"></div>
<span class="bb"></span>

（2）根据class名找

var a = $(".bb");  //根据class名找：.
//alert(a[0]); //找到的是dom对象
//alert(a[1]);

   

找到的是Jquery对象

var a = $(".bb");
alert(a.eq(0));  //1.找jQuery对象
alert(a.eq(0)[0]);  //1.找到的就是相应的dom对象

   

（3）根据标签找

var a = $("div");   //根据标签名找
alert(a[1]);  

<div id="aa">1111</div>
<div class="bb"></div>
<span class="bb"></span>
<input type="text" name="cc" />

（4）根据属性找

var a = $("[name='cc']");    //1.根据属性找
var a = $("[id='aa']");   //2.根据属性找
alert(a[0]);　

    

2.操作内容

//JS中的操作内容
//a.innerHTML //操作元素里面的html代码
//a.innerTEXT //操作元素里面的文本

//a.value //操作表单元素的值

　jQuery操作内容：　

<div id="aa">1111</div>
<div class="bb"></div>
<span class="bb"></span>
<input type="text" name="cc" />

（1）非表单元素

//a.html();     //操作元素里面的HTML代码
//a.text();     //操作元素里面的文本

（2）表单元素

var a = $("[name='cc']");    //根据属性找
a.val("hello");

3.操作属性

//JS中的操作属性
//a.setAttribute("","");   //设置
//a.removeAttribute("");   //移除
//a.getAttribute("");   //获取

　jQuery操作属性：　

//设置属性
//a.attr("bs","test");
//获取属性
//alert(a.attr("aa"));
//移除属性
//a.removeAttr("aa");

复选框

 <input type="checkbox" value="1" name="aa"/>

var a = $("[name=aa]");
a.prop("checked",true);  //false是不选中，true是选中

4.操作样式

//JS中的操作样式：只能操作内联样式
//a.style.backgroudColor = "red";

jQuery的操作样式：jQuery是可以操作内嵌样式

var a = $("#aa");   //根据id名找
a.css("background-color","red");  //设置css样式

var a = $("#aa"); 
alert(a.css("width"));  //输出css样式
//alert(a.css("background-color"));

5.jQuery事件

（1）添加事件

<input type="button" value="测试2"  id= "btn"/>

//单个加事件
$("#btn").click(function(){   //事件加在jQuery中，没有名字的方法是匿名函数
　　　　alert("11111");	
　　}); 

<input type="button" value="测试4"  class= "btn"/>
<input type="button" value="测试5"  class= "btn"/>
<input type="button" value="测试6"  class= "btn"/>

//多个元素加事件	
$(".btn").click(function(){
　　　　//alert("2222");	
　　　　alert($(this).val());  //谁触发的它，this就代表的谁
    });			

（2）挂事件（挂事件和移除事件动态的给测试事件加事件）

<input type="button" value="挂事件"  id= "gua"/>
<input type="button" value="测试事件"  id= "ceshi"/>
<input type="button" value="移除事件"  id= "yichu"/>

 

//挂事件
$("#gua").click(function(){
	$("#ceshi").bind("click",function(){    //bind（）绑定方法：事件名称，执行什么代码（匿名函数）
	　　alert("测试加上事件");
　　　　　　});				
　　});
			
//移除事件
$("#yichu").click(function(){
　　　　$("#ceshi").unbind("click");   //unbind（）方法：解绑的事件名称
　　});  

单击“挂事件”，再单击“测试事件”时会弹出“测试加上事件”，单击“移除事件”后，再单击“测试事件”，没有弹出任何东西，因为加在“测试事件”上的“挂事件”已经移除了