DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery與JS的區別,以及jQuery的基礎語法
jQuery與JS的區別,以及jQuery的基礎語法
編輯:JQuery特效代碼     

*在使用jQuery時,要在頁面最上端加上

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

 

看一下js與jQuery的區別:

JS是這樣使用的:

<script type="text/javascript">

    
    根據ID取元素,取到的是具體的元素
    var a = document.getElementById("p1");

    根據CLASS取
    var a = document.getElementsByClassName("aa");

    根據標簽名取
    var a = document.getElementsByTagName("div");

    根據name取
    var a = document.getElementsByName("cc");    
    alert(a); 
    
    操作元素
    操作內容
        非表單元素
        a.innerText = "hello";
        a.innerHTML = "<span style='color:red'>world</span>";

        表單元素
        a.value = "hello";

    操作屬性
        a.setAttribute("bs","1");
        a.getAttribute("bs");
        a.removeAttribute("bs");

    操作樣式
        a.style.color = red;    //只能獲取內聯屬性

    
    三個DIV隱藏
    var a = document.getElementsByClassName("aa");
    
    for(var i=0;i<a.length;i++)
    {
        a[i].style.display = "none";
    }

<script>

這是jQuery的使用方法():

<script type="text/javascript">    
    根據ID找元素,取到的是JQUERY對象
    var b = $("#a1");
    
    根據CLASS取
    var b = $(".aa");
    
    根據標簽名取
    var b = $("div");
    
    根據屬性篩選
    var b = $("[name=aa]");
    
    操作元素
    操作內容
        非表單元素
        b.text();
        b.html();

賦值:<div id="a1">11</div>
    var b = $("#a1");
    b.text("aaa")
    //b.html("aaa")
取值:var b = $("#a1");
   alert(b.text());
   //alert(b.html());

表單元素 b.val();

賦值:
var b = $("#a1");
b.val("aaa")

取值:
var b = $("#a1");
b.val();


操作屬性 b.attr("bs","1"); 
     b.attr("bs");
     b.removeAttr("bs");


操作樣式 alert(b.css("color"));
     b.css("font-size","50px");      //可以獲取、設置任意樣式


alert(b[0]); 取jquery對象用eq()取元素本身用[]


隱藏三個元素 $(".aa").css("display","none");


</script>

 

jQuery事件:掛事件、移除事件

<style type="text/css">
#a1{color:red}
.aa{ width:100px; height:100px; background-color:#39F}
</style>
<div id="a1" style="width:100px; height:200px;">11</div>

<div class="aa" bs="1">aaaa</div>
<div class="aa" bs="2">bbbbb</div>
<div class="aa" bs="3">ccccc</div>
<input type="text" id="p1" />
<input type="button" id="b1" value="掛事件" />
<input type="button" id="b2" value="移除事件" />
    Jquery【加】事件
    頁面加載完成
    $(document).ready(function(e) {
        
        給a1加點擊
        $("#a1").click(function(){
                alert('aa');
            })
        給class為aa的所有元素加事件
        $(".aa").click(function(){
                alert($(this).attr("bs"));
                $(".aa").css("background-color","#39F");
                $(this).css("background-color","red");
            })



            
        第二種方式【掛】事件
        $("#b1").click(function(){
                
                $("#a1").bind("click",function(){
                    
                    alert("我是掛上的事件");
                    
                    });
            
            })
        $("#b2").click(function(){
            
                $("#a1").unbind("click");
            })
            
        
        
    });
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved