jquery的基礎語法、選取元素、操作元素、加事件、掛事件及移除事件

阿新 • • 發佈：2019-01-20

jquery基礎知識

1.jquery檔案的引入，所有的js程式碼要寫在下面那段程式碼下面。

<script src="../jquery-1.11.2.min.js"></script>
<!--引入的jquery一定是在最上面的，也要在其它引入的jquery檔案上面-->

2.寫jquery程式碼的位置

　　和js一樣，jquery程式碼也是寫在<script>開始和結束標籤之間。

<script type="text/javascript">


</script>

jquery選取元素

1.根據id找元素

先在<body>裡面寫一個<div>

<div id="a1"></div>

（1）用js找，取到的是具體的元素。

var a = document.getElementById("a1");
alert(a);

（2）用jquery找，取到的是jquery物件。

var b = $("#a1");//用jquery找元素的寫法,#也是代表根據id找。
alert(b);
alert(b[0]);//從物件裡面取元素

2.根據class找元素

先先在<body>裡面寫2個<div>

<div class="aa"></div>
<div class="aa"></div>

（1）用js找

var a = document.getElementsByClassName("aa");
alert(a);

（2）用jquery找

var b = $(".aa")
//alert(b);
//alert(b[0]);//取到第一個div
//alert(b[1]);//取到第二個div
alert(b.eq(0));//取jquery物件用eq()，取元素本身用[]。

3.根據標籤名取元素

（1）用js找

var a = document.getElementsByTagName("div");

（2）用jquery找

var b = $("div");
alert(b);

4.根據name取

先先在<body>裡面寫1個<div>

<div name="cc"></div>

（1）用js找

var a = document.getElementsByName("cc");

（2）用jquery找

var b = $("[name=cc]");//根據屬性篩選，只要是屬性的，都可以找到。
//alert(b);
alert(b[0]);

jquery操作元素

1.操作內容

（1）非表單元素

<div id="a1">11</div>

var a = document.getElementById("a1");
//a.innerText = "hello";
a.innerHTML = "<span style='color:red'>world</span>";

（2）表單元素

<input type="text" id="p1" />

var a = document.getElementById("p1");
a.value="hello";

2.操作元素

（1）非表單元素

　　賦值：

<div id="a1">11</div>

var b = $("#a1");
b.text("aaa")
//b.html("aaa")

　取值：

var b = $("#a1");
alert(b.text());
//alert(b.html());

（2）表單元素

　　賦值

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

　　取值

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

3.操作屬性

　　js操作屬性

a.setAttribute("","");
a.setAttribute("");
a.removeAttribute("");

　　jquery操作屬性

var b = $("#a1");

b.attr("bs","1");//新增
　b.attr("bs");//獲取bs屬性的值

　b.removeAttr("bs");//移除bs屬性

4.操作樣式

（1）js操作樣式

　　js不能獲取內嵌的屬性，只能獲取內聯的。

a.style.color = red;

（2）jquery操作樣式

　　jquery可以獲取、設定內嵌的、外部的、內聯的樣式。

alert(b.css("width"));//獲取樣式
b.css("font-size","50px");//設定樣式

　　隱藏3個div的做法

<style type="text/css">
.aa{ width:100px; height:100px; background-color:#0F0}<!--用內嵌的方式寫屬性-->
</style>
<div class="aa"></div>
<div class="aa"></div>
<div class="aa"></div>

　（1）js的寫法

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

　　（2）jquery的寫法

$(".aa").css("display","none");

jquery事件、掛事件、移除事件

<div id="a1">11</div>
<div class="aa" bs="1">aaa</div>
<div class="aa" bs="2">bbb</div>
<div class="aa" bs="3">ccc</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('bb');
            //alert($(this).text());//取文字值。this點選哪一個就選取哪一個
            //alert($(this).attr("bs"));//取屬性值
            
            $(".aa").css("background-color","#0F0");//先讓所有的顏色變為原來的顏色
            $(this).css("background-color","red");//點選哪一個背景顏色換成紅色
        })*/
        
        //第二種方式掛事件
        $("#b1").click(function(){//匿名函式
        
        $("#a1").bind("click",function(){//bind表示掛事件
        
            alert("我是掛上的事件");
        
            })
            
        $("#b2").click(function(){
            
            $("#a1").unbind("click");//unbind移除事件
        
            })
        
        
        })
        
    
});

jquery的基礎語法、選取元素、操作元素、加事件、掛事件及移除事件

jquery基礎知識 1.jquery檔案的引入，所有的js程式碼要寫在下面那段程式碼下面。 <script src="../jquery-1.11.2.min.js"></script> <!--引入的jquery一定是在最上面的，

jquery中有兩種繫結事件及移除事件

今天專案中需要用到這種方法所以記錄一下： /* 1、eventName $("button").click(function(){}) 部分事件不支援 2、on(ecentName,fn) $("button").on('click',function(){}) 所有事件

jquery iframe 子父頁面相互可以操作元素方式

子操作父頁面元素 $("父頁面的id或name", window.parent.document).attr("src","http://www.baidu.com"); 父操作子頁面元素 $(window.frames["父頁面iframeid或name"].document).f

JQuery繫結事件與移除事件、動畫

繫結事件：bind()、on()、live()、delegate()、keyup()；觸發事件：trigger(‘keyup’)、keyup()；解綁事件：unbind()、off()、die()、undelegate()；符合事件：hover()

JPA在進行update、modify和insert操作時不加事務，會報錯

javax.persistence.TransactionRequiredException: No EntityManager with actual transaction available for current

Appium1.6 定位iOS元素和操作元素

進行 appium exports .cn xpath 問題 ref 結果 -c 元素定位方式第一種：通過Appium1.6的Inspector來查看具體安裝方式前面的隨筆已經介紹了：http://www.cnblogs.com/meitian/p/7360017.h

js中常用的事件，onclick 單擊事件、onblur 失去焦點事件、onchange改變事件、onmouseover滑鼠進入事件、onmouseout滑鼠移除事件、onsubmit提交事件

onclick 單擊事件 onblur 失去焦點事件 onchange 當物件或選中區的內容改變時觸發。 onmouseover 當用戶將滑鼠指標移動到物件內時觸發。 onmouseout 當用戶將滑鼠指標移出物件邊界時觸發。 onsubmit 當表單將要被提交時觸發。

js新增事件、移除事件、阻止冒泡、阻止瀏覽器預設行為等寫法(相容IE/FF/CHROME)

js新增事件/移除事件/阻止冒泡/阻止瀏覽器預設行為寫法(相容IE/FF/CHROME)1.新增事件var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEven

javascript根據元素自定義屬性獲取元素，操作元素

function getElementByAttr(tag,attr,value) { var aElements=document.getElementsByTagName(tag); var aEle=[]; for(var

<jQuery> <方法> 十八. 移除事件, 觸發事件, 事件對象(阻止冒泡, 阻止跳轉)

value func bsp 方法 function 事件 opp put baidu <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

錯誤:“ResourceDictionary”根元素需要 x:Class 特性來支持 XAML 文件中的事件處理程序。請移除 MouseLeftButtonDown 事件的事件處理程序.

show prop oid seo forum spa soci main pac 原文:錯誤:“ResourceDictionary”根元素需要 x:Class 特性來支持 XAML 文件中的事件處理程序。請移除 MouseLeftButtonDown 事件的事件處理程序

jQuery鍵盤事件，繫結事件與移除事件，複合事件

鍵盤事件是指每次按下或者釋放鍵盤上得按鍵時所產生的事件，常用的鍵盤事件的方法： keydown() :按下鍵盤時觸發的事件方法； keyup() :釋放按鍵時觸發的事件方法； keypress() :產生可列印的字元時觸發的事件

jQuery on（繫結事件）前別忘了off（移除事件）

廢話不多說直接上程式碼，用到的自己執行看效果<!DOCTYPE html> <html> <head> <title></title> &l

HTML5新增及移除的元素

HTML經過10多年的發展，其元素經歷了廢棄與不斷重新定義的過程。為了更好的處理現在的網際網路應用，HTML5新增了圖形繪製、多媒體播放、頁面結構、應用程式儲存、網路工作等新元素。http://hovertree.com/menu/html5/ 圖形繪製新元素標籤描述 <

JQuery中的事件 (六.移除事件)

1.為同一個元素繫結多個事件 <script type="text/javascript"> $(function(){ $('#btn').bind("click", function(){ $('#test').append("<

一、實現一個特殊的棧，在實現棧的基本功能的基礎上，再實現返回棧中最小元素的操作

empty util run print pri ont com res 字符串請指教交流！ 1 package com.it.hxs.c01; 2 3 import java.util.Stack; 4 5 /* 6 實現一個特殊的棧，在實現棧的基本

Python練習之基礎語法、數據類型、字符編碼、文件操作（一）

AD 編碼基礎 orm 分享基本知識 mage fff pos 最近做了幾道練習題，用的都是一些python的基本知識，但每道題都有層次，需要紮實的基礎功底。第一道基礎需求：讓用戶輸入用戶名密碼認證成功後顯示歡迎信息輸錯三次後退出程序升級需求：可以支持多

【html、CSS、javascript-10】jquery-操作元素（屬性CSS和文檔處理）

dom javascrip fun 實用 code color () 進行 java 一、獲得內容-text、html、val() 三個簡單實用的用於 DOM 操作的 jQuery 方法： text() - 設置或返回所選元素的文本內容 html() - 設置或返回所選元

使用jquery操作元素的css樣式（獲取、修改等等）

//1、獲取和設定樣式 $("#tow").attr("class")獲取ID為tow的class屬性 $("#two").attr("class","divClass")設定Id為two的class屬性。 //2、追加樣式 $("#two").addClass(

Python基礎語法——迴圈、佔位符以及字串操作

一、迴圈昨天介簡單紹了for迴圈，今天看一下for迴圈和while迴圈的對比。 1.for迴圈用for in結構，index表示索引，range表示範圍。絕大部分情況下用for迴圈。for index in range(10) :

jquery的基礎語法、選取元素、操作元素、加事件、掛事件及移除事件

jquery選取元素

jquery操作元素

相關推薦