首页 > 代码库 > jquery 基础

jquery 基础

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

1
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/"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样式

jquery 基础