要使用jQuery要引用jQuery文件，在头标签中引用
|
1
|
<script src="jquery-1.11.2.min.js"></script> //引入jQuery文件 |
注意：页面同时引用多个js文件，jQuery一定是最前面
在jQuery中“$”符号是代表选择器
|
1
2
3
4
5
6
|
<script type="text/javascript"> //页面加载完成 $(document).ready(function(e) { //页面加载完成后执行 });</script> |
jQuery的几种操作（注意和js的区别）：
1.选取元素
|
1
2
3
4
5
6
7
8
9
10
11
|
//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选取元素：
|
1
|
<div id="aa">1111</div> |
（1）根据id找
|
1
2
|
//var a = $("#aa"); //根据ID找：#//alert(a); //1.找的是jQuery对象<br> alert(a[0]); //2.找的就是id的 |
|
1
2
|
<div class="bb"></div><span class="bb"></span> |
（2）根据class名找
|
1
2
|
var a = $(".bb"); //根据class名找：.//alert(a[0]); //找到的是dom对象<br>//alert(a[1]); |
找到的是Jquery对象
|
1
2
|
var a = $(".bb");alert(a.eq(0)); //1.找jQuery对象<br>alert(a.eq(0)[0]); //1.找到的就是相应的dom对象 |
（3）根据标签找
|
1
2
|
var a = $("div"); //根据标签名找alert(a[1]); |
|
1
2
3
4
|
<div id="aa">1111</div><div class="bb"></div><span class="bb"></span><input type="text" name="cc" /> |
（4）根据属性找
|
1
2
3
|
var a = $("[name='cc']"); //1.根据属性找var a = $("[id='aa']"); //2.根据属性找alert(a[0]); |
2.操作内容
|
1
2
3
4
5
|
//JS中的操作内容//a.innerHTML //操作元素里面的html代码//a.innerTEXT //操作元素里面的文本//a.value //操作表单元素的值 |
jQuery操作内容：
|
1
2
3
4
|
<div id="aa">1111</div><div class="bb"></div><span class="bb"></span><input type="text" name="cc" /> |
（1）非表单元素
|
1
2
|
//a.html(); //操作元素里面的HTML代码//a.text(); //操作元素里面的文本 |
（2）表单元素
|
1
2
|
var a = $("[name='cc']"); //根据属性找a.val("hello"); |
3.操作属性
|
1
2
3
4
|
//JS中的操作属性//a.setAttribute("",""); //设置//a.removeAttribute(""); //移除//a.getAttribute(""); //获取 |
jQuery操作属性：
|
1
2
3
4
5
6
|
//设置属性//a.attr("bs","test");//获取属性//alert(a.attr("aa"));//移除属性//a.removeAttr("aa"); |
复选框
|
1
|
<input type="checkbox" value="1" name="aa"/> |
|
1
2
|
var a = $("[name=aa]");a.prop("checked",true); //false是不选中，true是选中 |
4.操作样式
|
1
2
|
//JS中的操作样式：只能操作内联样式//a.style.backgroudColor = "red"; |
jQuery的操作样式：jQuery是可以操作内嵌样式
|
1
2
|
var a = $("#aa"); //根据id名找a.css("background-color","red"); //设置css样式 |