jquery 基础

Posted 2020-09-18 起了个名字

要使用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样式