jquery和Js的區(qū)別和基礎(chǔ)操作
jquery的語(yǔ)法和js的語(yǔ)法一樣，算是把js升級(jí)了一下，這兩種語(yǔ)法可以一起使用，只不過(guò)是用jqery更加方便
創(chuàng)新互聯(lián)主營(yíng)鹽池網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā)公司,鹽池h5微信小程序搭建,鹽池網(wǎng)站營(yíng)銷推廣歡迎鹽池等地區(qū)企業(yè)咨詢
一個(gè)頁(yè)面想要使用jquery的話，先要引入一下jquery包，jquery包從網(wǎng)上下一個(gè)就可以，一般用帶有min的，是壓縮版的，如果還要引用其他js文件的話，一定要jquery包在上面，其他的引用放在他下面
先來(lái)看看如果使用Jquery的話，怎么來(lái)引用Jquery包
這樣來(lái)引用，然后就可以用Jquery方法了
和js的語(yǔ)法一樣，都是寫在<script type = "text/javascript"></script>這里面的
在Jquery中，$ 代表選擇器
很多點(diǎn)擊事件，特效都是在頁(yè)面加載完成后再去執(zhí)行
Jquery中在使用時(shí)，要在js代碼最外層加上這樣一句話 $(document).ready(function(e){}) 選中當(dāng)前頁(yè)面有個(gè)ready事件，頁(yè)面加載完成事件，頁(yè)面加載完成后就進(jìn)去走里面的事件，所以一般代碼都寫在花括號(hào)里面
來(lái)看一下用Jquery和Js輸出統(tǒng)一內(nèi)容，運(yùn)行的結(jié)果會(huì)怎么樣
<!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>無(wú)標(biāo)題文檔</title>
<script src="../jquery-1.11.2.min.js"></script>
</head>Jquery
$代表選擇器
JS
選取樣式
操作內(nèi)容
操作屬性
操作樣式<div id="aa">11</div>
<body>
<script type="text/javascript">//頁(yè)面加載完成$(document).ready(function(e){//頁(yè)面加載完成之后執(zhí)行
//JS
//找元素
var a = document.getElementById("aa");
alert(a); //Juery
//找元素
var b = $("#aa");
alert(b);
});</script>
</body>
</html>
運(yùn)行后的結(jié)果
點(diǎn)擊確定
第一個(gè)彈出的是用Js寫的
第二個(gè)彈出的是用Jquery寫的
有的人就會(huì)問(wèn)，為什么運(yùn)行的結(jié)果會(huì)不一樣呢？
因?yàn)镴s中找元素，找的是DOM對(duì)象
Jquery中找對(duì)象，找的是Jquery對(duì)象
Jquery是JS的升級(jí)版，所以功能比較強(qiáng)大，Jquery對(duì)象中也包括DOM對(duì)象
來(lái)看一下怎么用Jquery取到DOM對(duì)象
取b的索引0
看一下運(yùn)行的結(jié)果
點(diǎn)擊確定
兩個(gè)是一樣的結(jié)果
所以在使用中要知道怎么把Jquery對(duì)象轉(zhuǎn)換成DOM對(duì)象
一般是不需要轉(zhuǎn)換的，特殊情況才需要轉(zhuǎn)
上面那種是根據(jù)div來(lái)找的，下面再來(lái)根據(jù)class來(lái)做
代碼截了關(guān)鍵的一部分
這里的a 包括div中的，還有span中的
看一下它運(yùn)行的結(jié)果
collection一般是集合的意思，但是在js中沒(méi)有集合，它代表的是數(shù)組
如果要取它的第一項(xiàng)，可以找它的索引0
看一下運(yùn)行的結(jié)果
找的是div
再把它改成索引1
看看運(yùn)行的結(jié)果
索引1 找到的是span
所以如果想取到某一項(xiàng)時(shí)，可以使用索引來(lái)找到它
再來(lái)看一下Juery部分
看一下運(yùn)行結(jié)果
輸出的還是Jquery對(duì)象
要想取到div和span,看看來(lái)怎么做
索引0，看取到的結(jié)果
是div的
再看索引1
看運(yùn)行結(jié)果
取到的是span
還有一種方式
看看運(yùn)行的結(jié)果
取到的是Jquery對(duì)象
再看用標(biāo)簽名來(lái)找，先來(lái)看Juery中
取它的索引0，看看運(yùn)行的結(jié)果
再看Js中，根據(jù)name找
先做個(gè)表單
然后取索引0，運(yùn)行一下
取到的是input
Juery里面沒(méi)有根據(jù)name找的方式
但是有屬性的方式
根據(jù)屬性來(lái)找
看一下它運(yùn)行的結(jié)果
找的了input
如果給他自定義一個(gè)屬性，aa="bb"
看運(yùn)行的結(jié)果
也一樣找到了
還可以用id的屬性來(lái)找
找的的結(jié)果div
一般Juery常用的方式有這幾種
接下來(lái)來(lái)看一下js,Juery 在操作內(nèi)容 操作屬性和操作樣式的區(qū)別
Jquery
$代表選擇器
JS
選取元素
操作內(nèi)容
操作屬性
操作樣式
<div id="aa" >11</div>
<div class="aa">22</div>
<span class="aa">33</span>
<input type="text" name="uid" aa="bb" id="cc" />
<input type="checkbox" value="1" id="dd" />
</body>
<script type="text/javascript">//頁(yè)面加載完成$(document).ready(function(e) {
//頁(yè)面加載完成之后執(zhí)行
//JS
//找元素,DOM對(duì)象
//var a = document.getElementById("aa");
//alert(a);
//var a = document.getElementsByClassName("aa");
//alert(a[1]);
//var a = document.getElementsByTagName("div");
//var a = document.getElementsByName("uid");
//alert(a[0]);
//操作內(nèi)容
//a.innerHTML //操作元素里面的html代碼
//a.innerTEXT //操作元素里面的文本
//a.value //操作表單元素的值
//操作屬性
//a.setAttribute("",""); //設(shè)置
//a.removeAttribute(""); //移除
//a.getAttribute(""); //獲取
//操作樣式
//a.style.backgroudColor = "red";
//Jquery
//找元素,Jquery對(duì)象
//var b = $("#aa"); //根據(jù)ID找
//alert(b[0]);
//var b = $(".aa"); //根據(jù)class找
//alert(b[1]); //找到的是DOM對(duì)象
//alert(b.eq(1)); //找到的是Jquery對(duì)象
//var b = $("div"); //根據(jù)標(biāo)簽名找
//alert(b[0]);
//var b = $("[id='aa']"); //根據(jù)屬性找
//alert(b[0]);
//操作內(nèi)容
//非表單元素
//b.html(); //操作元素里面的HTML代碼，可以往里面放標(biāo)簽，設(shè)置樣式
//b.text(); //操作元素里面的文本,可以往里面放參數(shù)
//表單元素
//b.val("hello");
//操作屬性
//設(shè)置屬性
//b.attr("bs","test");
//獲取屬性
//alert(b.attr("aa"));
//移除屬性
//b.removeAttr("aa");
//b.prop("checked",false);
//操作樣式,可以獲取內(nèi)嵌的樣式
//b.css("background-color","red");
//alert(b.css("width"));
//alert(b.css("background-color")); });</script>
操作的內(nèi)容可以自己試驗(yàn)一下
相比之下，Jquery方式更為簡(jiǎn)便，同樣的結(jié)果，js需要代碼很長(zhǎng)，Jquery需要的代碼很短
網(wǎng)站欄目：jquery和Js的區(qū)別和基礎(chǔ)操作
轉(zhuǎn)載源于：http://bm7419.com/article22/pccijc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、服務(wù)器托管、ChatGPT、App設(shè)計(jì)、網(wǎng)站排名、定制開(kāi)發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 有利于全網(wǎng)營(yíng)銷的網(wǎng)站建設(shè)及運(yùn)營(yíng)服務(wù)體系 2016-11-08
- 給你的產(chǎn)品做一個(gè)全網(wǎng)營(yíng)銷推廣方案 2022-05-26
- 企業(yè)全網(wǎng)營(yíng)銷型網(wǎng)站建設(shè)的重點(diǎn)有哪一些？ 2016-11-07
- 全網(wǎng)營(yíng)銷怎么做才有效果呢? 2014-07-08
- 全網(wǎng)營(yíng)銷推廣，讓成交變得簡(jiǎn)單 2016-11-08
- 有關(guān)索象全網(wǎng)營(yíng)銷推廣效果的猜想 2020-10-10
- 全網(wǎng)營(yíng)銷是什么，全網(wǎng)營(yíng)銷包含哪些營(yíng)銷渠道？ 2016-11-08
- 全網(wǎng)營(yíng)銷是什么?中小企業(yè)應(yīng)如何做好全網(wǎng)營(yíng)銷? 2016-11-09
- 全網(wǎng)營(yíng)銷占領(lǐng)百度制高點(diǎn) 2014-04-01
- 全網(wǎng)營(yíng)銷推廣方式 2014-07-08
- 網(wǎng)站想要實(shí)現(xiàn)全網(wǎng)營(yíng)銷需要做到哪些內(nèi)容？ 2015-12-21
- 全網(wǎng)營(yíng)銷型網(wǎng)站與傳統(tǒng)企業(yè)網(wǎng)站有何區(qū)別 2016-10-13