Jquery之選擇器與方法綜合練習

阿新 • • 發佈：2018-12-26

首先建立test.html檔案，內容如下：
這裡用的jquery版本是jquery-1.8.2.js,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.8.2.js"></script 
>
  </head>
  <body>
    <div>   <!-- multiple表示可以多選 -->
        <select style="width:60px" multiple size="10" id="leftID">
            <option>選項A</option>
            <option>選項B</option>
            <option>選項C</option>
            <option 
>選項D</option>
            <option>選項E</option>
            <option>選項F</option>
            <option>選項G</option>
            <option>選項H</option>
            <option>選項I</option>
            <option>選項J</option>
        </select 
>
    </div>
    <div style="position:absolute;left:100px;top:60px">
        <input type="button" value="批量右移" id="rightMoveID"/>
    </div>
    <div style="position:absolute;left:100px;top:90px">
        <input type="button" value="全部右移" id="rightMoveAllID"/>
    </div>
    <div style="position:absolute;left:220px;top:20px"> 
        <select multiple size="10" style="width:60px" id="rightID">
        </select>
    </div>
  </body>

  <script type="text/javascript">

        //雙擊右移
        //定位左邊的下拉框，同時新增雙擊事件
        $("#leftID").dblclick(function(){
            //獲取雙擊時選中的option標籤
            var $option = $("#leftID option:selected");
            //將選中的option標籤移動到右邊的下拉框中
            $("#rightID").append( $option );
        });

        //批量右移
        //定位批量右移按鈕，同時新增單擊事件
        $("#rightMoveID").click(function(){
            //獲取左邊下拉框中選中的option標籤
            var $option = $("#leftID option:selected");
            //將選中的option標籤移動到右邊的下拉框中
            $("#rightID").append( $option );
        });     

        //全部右移
        //定位全部右移按鈕，同時新增單擊事件
        $("#rightMoveAllID").click(function(){
            //獲取左邊下拉框中所有的option標籤
            var $option = $("#leftID option");
            //將選中的option標籤移動到右邊的下拉框中
            $("#rightID").append( $option );
        });

  </script>
</html>

Jquery之選擇器與方法綜合練習

首先建立test.html檔案，內容如下：這裡用的jquery版本是jquery-1.8.2.js, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

jQuery 之選擇器與事件型別（二）

hover() hover()方法用於模擬游標懸停事件.當滑鼠移動到元素上時，會觸發指定的第一個函式(mouseenter);當滑鼠移出這個元素時，會觸發指定的第二個函式(mouseleave)。例項 $("#p1").hover(function(){ alert("You entered p1!")

JQuery :eq() 選擇器與 eq()遍歷方法

child 索引遍歷應用 jquery code 連接 clas AR 一、：eq()選擇器語法： $( " :eq(index)" ) 在匹配的集合中選擇索引值為index的元素，index索引值從0算起。就是選的第 “index+1” 的元素。若要獲取變量，

jquery學習之選擇器與過濾器

基本選擇器普遍選擇器 * 所有的 id選擇器 #id 類選擇器 .class 標籤選擇器標籤名群組選擇器 #one,.two 取並集複合選擇器 div#one 取交集子代或後代選擇器

【jQuery】選擇器與一些常用方法應用詳解

一、常用選擇器 1、基本物件獲取 (“∗”)‘表示獲取所有對象(“∗”)‘表示獲取所有對象(“#element”) ’獲得想CSS中的ID號一樣 (“.abc”)‘所有使用.abc樣式的元素(“.abc”)‘所有使用.abc樣式的元素(“div”) ‘標籤

jquery之選擇器

html 都是 query ava 上下文對象操作 css 慕課元素選擇器全選：$("*"); 選擇類：$(".class"); 選擇id：$("#id"); 選擇元素：$("element"); 層級選擇器: 基本篩選選擇器：內容篩選選擇器：可見性篩選選擇

JQuery 之選擇器 & 過濾器獲取元素標籤物件

JQuery 幾種選擇器和過濾器獲取標籤物件和元素一、常用選擇器（一）★★基本選擇器 #ID 選擇器：通過id屬性值查詢標籤物件 .class 選擇器：通過class屬性值查詢標籤物件 element 選擇器

Jquery基本選擇器與層次選擇器

一、什麼是jquery選擇器？就是允許通過標籤名、屬性或內容對DOM元素進行快速、準確的選擇，而不必擔心瀏覽器的相容性，通過jQuery選擇器對頁面元素的景區呃呃呃定位，才能完成元素屬性和行為的處理

jquery過濾選擇器-----------（表單對象屬性過濾選擇器與表單選擇器）

images alt 分享 wid image logs jquery query 器） 1.表單對象屬性選擇器　　 2.程序 3.表單選擇器　　 jquery過濾選擇器-----------（表單對象屬性過濾選擇器與表單選擇器）

[jQuery學習系列一]1-選擇器與DOM對象

還需直接 itl java date js代碼循環 ava 也會前言: 好久沒有更新博客了, 最近想復習下之前學過的JS的相關內容, 也算是自己的一種總結. 知識長時間不用就會忘記, 多學多記多用!! 下面的程序都可以在下面的網站進行在線調試: http://ww

jQuery 選擇器與事件

允許失去焦點下一個 .class enter opener tag uil jquer jQuery 選擇器 jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。 jQuery 選擇器 jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作。

jQuery中選擇器之子元素篩選器

關於jQuery中選擇器之子元素篩選器相關用法，做以下程式碼驗證： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti

jQuery中選擇器綜合使用案例

以下為jQuery中選擇器綜合使用案例： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=u

css編輯與檢視之選擇器宣告

選擇器宣告集體宣告在HTML頁面中，有時如果存在多種型別的標籤同時具備相同的樣式宣告時，我們可以採用集體宣告。它們是同級關係。例如： <style> div,p{ colo

jQuery初識之選擇器、樣式操作和篩選器(模態框和選單示例)

一、jQuery 1、介紹 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。 jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的程式碼，做更多的事情。它封裝J

jquery中匿名函式、選擇器、方法呼叫、繫結事件

轉載地址： https://blog.csdn.net/ideality_hunter/article/details/77935656 http://www.cnblogs.com/si-shaohua/p/3760286.html https://www.cnblogs.com/de

Jquery常用選擇器和DOM操作方法的彙總

1、選擇器 id選擇器 $("#id") 元素選擇器 $("tagName") 類選擇器 $(".className") 屬性選擇器 $("[name]") $("[name=name]") 查詢所有的input標籤: $("input") 篩選/組合 $("userTables inp

jQuery選擇器與過濾器

一、選擇器：查詢節點,jQuery的選擇機制構建於Css的選擇器，它提供了快速查詢DOM文件中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式，另外，它還有一些自定義的選擇器。下面舉一些列子來說明選擇器：(筆者用css樣式幾乎給每一個選中的標籤加了了一個顏色框，有利

Jquery屬性選擇器（同時匹配多個條件,與或非)

<!DOCTYPE html> <html> <head> <title>Test multi selection</title> <script src="http://apps.bdimg.

JQuery 常見選擇器詳解練習1

1.常見基本選擇器程式碼 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl

Jquery之選擇器與方法綜合練習

相關推薦