jquery和Js的區別和基礎操作

jquery的語法和js的語法一樣，算是把js升級了一下，這兩種語法可以一起使用，只不過是用jqery更加方便

創新互聯主營鹽池網站建設的網絡公司,主營網站建設方案,成都app軟件開發公司,鹽池h5微信小程序搭建,鹽池網站營銷推廣歡迎鹽池等地區企業咨詢

一個頁面想要使用jquery的話，先要引入一下jquery包，jquery包從網上下一個就可以，一般用帶有min的，是壓縮版的，如果還要引用其他js文件的話，一定要jquery包在上面，其他的引用放在他下面

先來看看如果使用Jquery的話，怎么來引用Jquery包

jquery和Js的區別和基礎操作

這樣來引用，然后就可以用Jquery方法了

和js的語法一樣，都是寫在<script type = "text/javascript"></script>這里面的

在Jquery中，$ 代表選擇器

很多點擊事件，特效都是在頁面加載完成后再去執行

Jquery中在使用時，要在js代碼最外層加上這樣一句話 $(document).ready(function(e){}) 選中當前頁面有個ready事件，頁面加載完成事件，頁面加載完成后就進去走里面的事件，所以一般代碼都寫在花括號里面

來看一下用Jquery和Js輸出統一內容，運行的結果會怎么樣

jquery和Js的區別和基礎操作

  <!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>
</head>Jquery
    $代表選擇器
JS
     選取樣式
     操作內容
     操作屬性
     操作樣式<div id="aa">11</div>
<body>
<script type="text/javascript">//頁面加載完成$(document).ready(function(e){//頁面加載完成之后執行
    //JS
    //找元素
    var a = document.getElementById("aa");
    alert(a);    //Juery
    //找元素
    var b = $("#aa");
    alert(b);
    });</script>
</body>
</html>

jquery和Js的區別和基礎操作

運行后的結果

jquery和Js的區別和基礎操作

點擊確定

jquery和Js的區別和基礎操作

第一個彈出的是用Js寫的

第二個彈出的是用Jquery寫的

有的人就會問，為什么運行的結果會不一樣呢？

因為Js中找元素，找的是DOM對象

Jquery中找對象，找的是Jquery對象

Jquery是JS的升級版，所以功能比較強大，Jquery對象中也包括DOM對象

來看一下怎么用Jquery取到DOM對象

jquery和Js的區別和基礎操作

取b的索引0

看一下運行的結果

jquery和Js的區別和基礎操作

點擊確定

jquery和Js的區別和基礎操作

兩個是一樣的結果

所以在使用中要知道怎么把Jquery對象轉換成DOM對象

一般是不需要轉換的，特殊情況才需要轉

上面那種是根據div來找的，下面再來根據class來做

jquery和Js的區別和基礎操作

代碼截了關鍵的一部分

這里的a 包括div中的，還有span中的

看一下它運行的結果

jquery和Js的區別和基礎操作

collection一般是集合的意思，但是在js中沒有集合，它代表的是數組

如果要取它的第一項，可以找它的索引0

jquery和Js的區別和基礎操作

看一下運行的結果

jquery和Js的區別和基礎操作

找的是div

再把它改成索引1

jquery和Js的區別和基礎操作

看看運行的結果

jquery和Js的區別和基礎操作

索引1 找到的是span

所以如果想取到某一項時，可以使用索引來找到它

再來看一下Juery部分

jquery和Js的區別和基礎操作

看一下運行結果

jquery和Js的區別和基礎操作

輸出的還是Jquery對象

要想取到div和span,看看來怎么做

jquery和Js的區別和基礎操作

索引0，看取到的結果

jquery和Js的區別和基礎操作

是div的

再看索引1

jquery和Js的區別和基礎操作

看運行結果

jquery和Js的區別和基礎操作

取到的是span

還有一種方式

jquery和Js的區別和基礎操作

看看運行的結果

jquery和Js的區別和基礎操作

取到的是Jquery對象

再看用標簽名來找，先來看Juery中

jquery和Js的區別和基礎操作

取它的索引0，看看運行的結果

jquery和Js的區別和基礎操作

再看Js中，根據name找

jquery和Js的區別和基礎操作

先做個表單

然后取索引0，運行一下

jquery和Js的區別和基礎操作

取到的是input

Juery里面沒有根據name找的方式

但是有屬性的方式

根據屬性來找

jquery和Js的區別和基礎操作

看一下它運行的結果

jquery和Js的區別和基礎操作

找的了input

如果給他自定義一個屬性，aa="bb"

jquery和Js的區別和基礎操作

看運行的結果

也一樣找到了

還可以用id的屬性來找

jquery和Js的區別和基礎操作

找的的結果div

jquery和Js的區別和基礎操作

一般Juery常用的方式有這幾種

jquery和Js的區別和基礎操作

接下來來看一下js,Juery 在操作內容操作屬性和操作樣式的區別

jquery和Js的區別和基礎操作

Jquery
    $代表選擇器

JS
    選取元素
    操作內容
    操作屬性
    操作樣式    
<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">//頁面加載完成$(document).ready(function(e) {    
    //頁面加載完成之后執行
    
    //JS
        //找元素,DOM對象
        //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]);
        
        //操作內容
        //a.innerHTML //操作元素里面的html代碼
        //a.innerTEXT //操作元素里面的文本
        
        //a.value //操作表單元素的值
        
        //操作屬性
        //a.setAttribute("",""); //設置
        //a.removeAttribute(""); //移除
        //a.getAttribute(""); //獲取
        
        //操作樣式
        //a.style.backgroudColor = "red";
        
    
    //Jquery
        //找元素,Jquery對象
        //var b = $("#aa"); //根據ID找
        //alert(b[0]);
        
        //var b = $(".aa"); //根據class找
        //alert(b[1]); //找到的是DOM對象
        //alert(b.eq(1)); //找到的是Jquery對象
        
        //var b = $("div"); //根據標簽名找
        //alert(b[0]);
        
        //var b = $("[id='aa']"); //根據屬性找
        //alert(b[0]);
        
        //操作內容
            //非表單元素
            //b.html(); //操作元素里面的HTML代碼，可以往里面放標簽，設置樣式
            //b.text(); //操作元素里面的文本,可以往里面放參數
            
            //表單元素
            //b.val("hello");
            
        //操作屬性
            //設置屬性
            //b.attr("bs","test");
            //獲取屬性
            //alert(b.attr("aa"));
            //移除屬性
            //b.removeAttr("aa");
            
            //b.prop("checked",false);
            
        //操作樣式,可以獲取內嵌的樣式
        //b.css("background-color","red");
        //alert(b.css("width"));
        //alert(b.css("background-color"));        });</script>

jquery和Js的區別和基礎操作

操作的內容可以自己試驗一下

相比之下，Jquery方式更為簡便，同樣的結果，js需要代碼很長，Jquery需要的代碼很短

網站欄目：jquery和Js的區別和基礎操作
轉載源于：http://www.2m8n56k.cn/article22/pccijc.html

成都網站建設公司_創新互聯，為您提供面包屑導航、服務器托管、ChatGPT、App設計、網站排名、定制開發

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

jquery和Js的區別和基礎操作