Jquery基本用法

时间:2023-06-05 19:16:20

今天下午讲了Jquery的基本用法;在用Jquery方法时,首先要引用Jquery文件:

<script src="jquery-1.11.2.min.js"></script>;

引用文件的语句一定要放在最前面,即使写了新的js方法和引用的js文件,也要把Jquery文件的引用语句放在最前面。下面就说一下Jquery和js的区别:

1.找元素(两种方法一一对应):

js方法:

var  a  = document.getElementById("id名");

var  a  = document.getElementsByClassName("class名");

document.getElementsByTagName("标签名");

var  a  = document.getElementsByName("name名");

Jquery方法:

var a = $("#id名");

var a = $(".class名");

var a = $("标签名");

var a = $("[属性名=属性值]");

最后一个方法非常方便,很实用,我们可以看到Jquery方法的代码量少了很多,也很方便。

2.操作内容:

js方法:

(1).非表单元素:

alert(a.innerText); 获取文本

alert(a.innerHTML);HTML代码

(2).表单元素:

alert(a.value);

a.value="hello";

Jquery方法:

(1).非表单元素:

alert(a.text());

a.text("bbbbb");

alert(a.html());

(2).表单元素:

a.val("hello");

3.操作属性:

js方法:

a.setAttribute("属性名","属性值");   添加属性

a.removeAttribute("属性名");        删除属性

alert(a.getAttribute("属性名"));     获取属性

Jquery方法:

a.attr("属性名","属性值");             添加属性

a.removeAttr("属性名");              删除属性

alert(a.attr("属性名"));                获取属性

或者别的方法:

a.prop("属性名","属性值");            添加属性

a.removeProp("属性名");             删除属性

alert(a.prop("属性名"));               获取属性

a.prop("checked",true);

alert(a.prop("checked"));            选择点击事件

4.操作样式:

js方法:

a.style.样式名="样式格式";

alert(a.style.样式名);

Jquery方法:

a.css("样式名","样式格式");

alert(a.css("样式名"));

5.统一操作样式:

js方法:

var d = document.getElementsByClassName("a1");
for(var i=0;i<d.length;i++)
{
d[i].style.fontSize = "30px";
}

Jquery方法:

$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);

这里就可以看出Jquery方法的简便;

下面让我们做一个测试看一下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
.aa{ width:200px; height:200px; float:left; background-color:green; margin:2px;}
</style>
</head> <body> <div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div> </body> <script type="text/javascript"> $(".aa").click(function(){
$(".aa").css("background-color","green");
$(this).css("background-color","red");
}) </script> </html>

测试内容:建立多个div,在点击时,被点击的div变色,如果点击另一个,原本变色的变成原色,效果如下:

Jquery基本用法

点击一个后会变成的样子:

Jquery基本用法

再点击一个变成的样子:

Jquery基本用法

也是说只有被点击的div会变色!!!