web前端-輕量級框架應用（jQuery基礎）

query的安裝和語法，jquery的多種選擇器，dom操作和jquery事件。

jQuery框架，簡介，優勢，安裝，語法，jQuery選擇器，id選擇器，類選擇器，標記選擇器，屬性選擇器，位置選擇器，后代選擇器，子代選擇器，選擇器對象，選擇器對象遍歷，頁面初始化，jQuery的dom操作，查找，刪除，創建，復制，插入，替換，jQuery事件，事件綁定，鼠標事件，鍵盤事件，表單事件，窗口事件，事件冒泡，事件解除。

jQuery是一個很好用的JavaScript函數庫，寫的少，做的多。

請問jQuery的好處在哪里？

它的好處在于它輕量級，什么是輕量級呢？就是說它非常請求，大小在30kb左右；具有強大的選擇器和dom操作的封裝，可靠的事件處理機制，有完善的ajax，jquery將所有的ajax操作封裝到函數$.ajax()中；具有豐富的插件，完善的文檔，開源的產品。

jquery安裝，從jquery下載jquery庫，二是從cdn中下載。

jquery官方網址http://jquery.com

首先進入download jquery下載頁面，下載最新的jquery庫文件，有兩個版本：生產版，Production version，用于實際網站，Development version開發版，用于測試和開發。

<head>
 <meta charset="UTF-8">
 <title>jquery</title>
 <script type="text/JavaScript" src="./js/jquery-xx.js">
 </script>
</head>


<script type="text/JavaScript">
 $(document).ready(function(){
 // 等待dom元素加載完畢
 alert("成功引入");
 });
</script>

cdn中配置Jquery，如果不下載jquery的話，可以用cdn引用的。

jquery語法：

jquery
$(selector).action()
$(this).hide()
$("p").hide()
$("p.test").hide()
$("#test").hide()

// 入口
$(document).ready(function(){
 // 執行代碼
});

$(function(){
 // 執行代碼
});

JavaScript的入口函數
// 入口函數如下
window.onload=function(){
 // 執行代碼
}

JavaScript的入口函數與jquery入口函數：

jquery的入口函數是在HTML所有標簽都加載后執行；JavaScript的window.onload事件是等所有內容（包括圖片文件等）加載完之后才執行。

jquery選擇器

document.getElementById();
document.getElementsByClassName()
document.getElementsByTagName()

選擇器$(" "),為一個函數，為工廠函數，$為函數名稱。

id選擇器

$("#id")

根據給定的id匹配一個元素

類選擇器

$(".class")

根據給定的類匹配元素

標記選擇器

$("element")

根據給定元素名匹配所有元素

屬性選擇器

$("element[attribute]")

匹配包含給定屬性的元素

$("div[title=test]")

位置選擇器

$(element:position)

匹配符合標簽中相應位置的元素

$("div:first")

匹配所有div中第一個div元素

后代選擇器

$("ancestor descendant")

匹配給定的祖先元素的所有后代元素

$("#ul li")匹配 id 為null的所有li元素

子代選擇器

$("parent>child")

匹配所有指定"parent"元素中指定"child"的直接子元素

$("#標簽id值")

// 原生
var div=document.getElementById('test');
div.style.border='3px solid blue';

// jquery
$("#test1").css("border", "3px solid red");

$(".class屬性值")
$(".cls1").css(...);

$("標記名稱");
// 找到所有P標簽
$("p")

屬性選擇器
$("[屬性名"])
匹配所有具有指定屬性的元素

$("[屬性名='值']")
匹配與值相等的元素

$("[屬性名!='值']")
匹配與值不相等的元素

$("[屬性名^='值']")
匹配以值開頭的元素

$("[屬性名$='值']")
匹配以值結尾的元素

$("[屬性名*='值']")
匹配包含值的元素

位置選擇器：

$("selector:first")

匹配第一個元素

$("selector:last")

匹配最后一個元素

$("selector:odd")

匹配索引值為奇數的元素，從0開始計數

$("selector:even")

匹配索引值為偶數的元素，從0開始計數

$("selector.eq(n)")

匹配集合中索引值為n的元素

$("selector.gt(n)")

匹配集合中索引值大于n的元素

$("selector:lt(n)")

$("選擇器1 選擇器2...")

$("#test li").css("border", "2px solid red");

$("選擇器1>選擇器2>...")

選擇器對象：

$("選擇器").each(function(index){this})

選擇器對象的遍歷

$("選擇器").find()

找前面選擇器匹配到的元素的子元素

$("選擇器").not()

在前面選擇器匹配到的元素中去除某個或者某幾個

$("選擇器").add()

在前面選擇器中再追加節點

選擇器對象遍歷

<body>
 <ul id="test">
 <li>d</li>
 <li>a</li>
 </ul>
</body>

<script type="text/JavaScript">
 $("#test li").each(function(index){
 this.title="我是第"+(index+1)+"個";
 });
</script>

頁面初始化

<script type="text/JavaScript">
 $(function(){
 //一定會在頁面加載完成后運行
 })
</script>

將jquery函數代碼放到這個函數就可以等到頁面加載結束再運行。

Jquery中的dom操作。

dom是document object model的縮寫。文檔對象模型。dom是一種與瀏覽器，平臺，語言無關的接口，jquery中的dom操作就是對HTML中的元素進行操作。

<script type="text/JavaScript">
 $(document).ready(function(){
 // 測試
 $("#btn1").click(function(){
 alert("文本內容："+$("#test0").text());
 });
 });
</script>

<p id="test0">da</p>
<button id="btn1">da</button>

attr()獲取它的各種屬性的值

$(document).ready(function(){
 $("button").click(function(){
 alert($("p").attr("title"));
 });
});

創建HTML元素：

$(document).ready(function(){
 var $li1=$("<li>d</li>");
 var $li2=$("<li>a</li>");
 $("button").click(function(){
 $("ul").append($li1);
 $("ul").append($li2);
 });
});

插入HTML元素

append()

向每個匹配的元素內部追加內容

appendTo()

將所有匹配的元素追加到另一個指定的元素集合中

注意：$(A).append(B)的操作，不是將B追加到A中，而是將A追加到B中

prepend()

向每個匹配的元素內部前置內容

prependTo()

將所有匹配的元素前置到另一個指定的元素集合中。

注意：$(A).prepend(B)的操作，不是將B前置到A中，而是將A前置到B中

after()

在每個匹配的元素之后插入內容

insertAfter()

將所有匹配的元素插入另一個指定的元素集合的后面

注意：$(A).after(B)的操作，不是將B插入到A后面，而是將A插入到B的后面

before()

在每個匹配的元素之前插入內容

insertBefore()

將所有匹配的元素插入另一個指定的元素集合的前面。

注意：$(A).before(B)的操作，不是將B插入A前面，而是將A插入B前面

刪除HTML元素

刪除HTML元素一般使用jquery中的remove()和empty()

remove()的作用就是從dom中刪除被選元素以及子元素，就是如果某個元素被刪除了，那么它的后代元素也都被刪除。

empty()的作用并不是刪除HTML元素，而是清空HTML元素，可以清空選中HTML元素中所有后代HTML元素。

復制HTML元素

clone()的作用是復制HTML元素。

$(document).ready(function() {
 $("button").click(function() {
 $("body").append($("p").clone());
 });
 });
});

替換HTML元素

有兩種方法：replaceWith()和replaceAll()兩個方法

repalceWith()

將所有匹配的元素替換成指定的HTML元素或dom元素

repalceAll(selector)

用匹配的元素替換所有selector匹配到的元素

replaceWith()和replaceAll()的作用是一樣的，只是用法不同。

A元素替換B元素：

replaceWith()的寫法

A.replaceWith("B")

B.replaceAll("A")

$(document).ready(function(){

 $("button").click(function(){
 $("ul li:eq(0)").replaceWith("<li>da</li>")
 });
 
});

事件

鼠標事件:

click，mouseover，hover

鍵盤事件：

keypress，keydown，keyup

表單事件：

submit，change，focus

窗口事件:

scroll，resize

事件綁定

事件綁定語法bind()方法：

bind(type,[data],fn)

click(),blur(),focus(),
mouseover(),mouseout(),
mousedown(),mouseup()
mouseenter(),mouseleave(),
resize(),scroll(),
keydown(),keyup(),keypress()

type參數是含有一個或多個事件類型的字符串，data參數是作為event.data屬性值傳遞給事件對象的額外數據對象，fn參數為綁定到每個匹配元素事件上面的處理函數。

$(document).ready(function(){
 $("input").bind("focus",function(){
 $("span").show();
 });
});

簡寫綁定事件

$(document).ready(function(){
 $("input").focus(function(){
 $("span").show();
 });
});

鼠標事件click(),dblclick()雙擊在短時間內發生兩次click就是依次雙擊事件。

mouseenter()當鼠標指針穿過元素時會發生mouseenter事件，mouseleave()當鼠標指針離開元素時會發生mouseleave事件。hover()用于模擬光標懸停事件。

$(document).ready(function(){
 $("#p1").hover{
 function(){
 $("#p1").css('background','green');
 },
 function(){
 $('#p1").css("background","pink");
 }
 }
});

keydown()鍵盤或按鈕被按下時，發生keydown事件，keyup當鍵盤被松開時發生keyup事件。keypress()當鍵盤或按鈕被按下時，發生keypress事件。

表單事件

當提交表單時，會發生submit事件。change()當元素的值發生改變時，會發生change事件，focus()當元素獲得焦點時，觸發focus事件。blur()當元素失去焦點時觸發。

窗口事件：

scroll()當用戶滾動指定的元素時，會觸發scroll事件。scroll事件適用于所有可滾動的元素和window對象。resize()當調整瀏覽器窗口的大小時，會觸發resize事件。

x=0;
$(document).ready(function(){

 $(window).resize(function(){
 $("span").text(x+=1);
 });
 
});

事件冒泡，事件會按照dom的層次結構像水泡一樣不斷向上直至頂端

停止冒泡和默認行為：

stopPrapagation()和preventDefault()

event.preventDefault();
// 阻止默認行為

event.stopPropagation();
// 停止事件冒泡

事件解除：

unbind(type, [data])

type為事件類型

data為將要解除的函數、

原文鏈接：https://mp.weixin.qq.com/s/GX7QiTZBLz7Kr64dtm8mbw
作者：達達前端小酒館

錄：

簡介
添加JQuery庫
語法
選擇器
事件

簡介

JQuery是一個JavaScript函數庫，是目前最流行的 JS 框架。

JQuery官方的主旨是：write less, do more（以更少的代碼，實現更多的功能）

添加JQuery庫

網絡添加

百度靜態公共庫：http://cdn.code.baidu.com/
新浪靜態公共庫：http://lib.sinaapp.com/
Bootstrap中文網開源項目免費CDN加速服務 http://www.bootcdn.cn/

本地

本地添加 JQuery

語法

基礎語法： $(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作

選擇器

（一）基本

#id：根據給定的ID匹配一個元素
element：根據給定的元素名匹配所有元素
.class：根據給定的類匹配元素
* ：匹配所有元素

注意：要引用JQuery-1.12.4.js文件才有效果

（二）層級

selector1,selector2,...,selectorN ：將每一個選擇器匹配到的元素合并后一起返回
ancestor descendant：在給定的元素下匹配所有的后代元素
parent >child：在給定的元素下匹配所有的子元素
prev + next：匹配所有緊接在 prev 元素后的 next 元素
prev ~ siblings ：匹配 prev元素之后的所有 siblings 元素

事件

（一），單擊事件

click() 方法是當按鈕點擊事件被觸發時會調用一個函數。

代碼

單擊按鈕效果圖

（二），雙擊事件

當雙擊鼠標右鍵時，會發生 dblclick() 事件。

以下事件方法參考“雙擊事件”，代碼格式可能一樣的。

下面與事件有關的方法

mouseenter()當鼠標指針穿過元素時，會發生 mouseenter() 事件。
mouseleave()當鼠標指針離開元素時，會發生 mouseleave() 事件
mousedown()當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown() 事件
mouseup()當在元素上松開鼠標按鈕時，會發生 mouseup 事件。
hover()方法用于模擬光標懸停事件。
focus()當元素獲得焦點時，發生 focus 事件。
blur()當元素失去焦點時，發生 blur 事件。

QueryEasyUI中的拖拽事件通過給它設置代理元素使其拖拽、可設置拖動元素相對于x.y軸拖動，可設置拖拽何時停止等效果

jQuery中的easyui是一個非常好用的插件，它雖然使用簡單方便，但是它的功能確十分強大，今天將向大家介紹如何使用easyui插件實現基本的拖動和放置，有一定的參考價值，希望對大家有所幫助。

【推薦課程：jQueryEasyUI教程】

Draggable(拖拽)

Draggable是easyui中用于實現拖拽功能的一個插件，通過它我們可以實現對控件的拖拽效果。

它具有以下屬性值：

屬性名含義proxy

指拖動時要使用的代理元素，設置為clone時，克隆元素將被用作代理；如果指定一個函數，它必須返回一個 jQuery 對象。revert是一個boolean值，設置為 true時表示拖動結束后元素將返回它的開始位置。（默認值為false）cursor 拖動時的 css 光標，默認值為move deltaX 指的是拖動的元素相對于當前光標的 X 軸的位置，默認值為null deltaY 指的是拖動的元素相對于當前光標的 Y 軸位置，默認值為null handle 指啟動可拖動元素的處理，默認值為null disabled是一個boolean值，如果設置為 true，則停止可拖動，默認值為false edge 指能夠在其中開始可拖動的拖動寬度，默認值為0 axis 指定義拖動元素可在其上移動的軸，可用的值是 'v' 或 'h'，當設為 null，將會沿著 'v' 和 'h' 的方向移動

案例分析：

通過三個div元素來啟用它們的拖動和放置

外部引用必須有的插件

HTML與CSS代碼

<style>

div{

width:100px;

height: 100px;

margin-bottom:5px;

text-align: center;

line-height: 100px;

}

#box1{background: pink;}

#box2{background: skyblue;}

#box3{background: yellow;}

</style>

</head>

<body>

效果圖：

設置box1元素為可拖動的

$('#box1').draggable();

效果圖：

對于box2通過給原來的元素的代理（proxy）創建一個clone值，讓其可以拖動

$('#box2').draggable({

proxy:'clone'

});

效果圖：

第三個box我們設置元素只能在v軸上拖動：

$("#box3").draggable({

axis: 'v'

})

效果圖：

總結：以上就是本篇文章的全部內容了，希望對大家學習有所幫助。

以上就是jQueryEasyUI中的拖拽事件如何使用的詳細內容，更多請關注其它相關文章！

更多技巧請《轉發 + 關注》哦！

在線咨詢

上一篇：干貨！這幾個素材網站-視頻制作者愛瘋了！
下一篇：electron 和 tauri 都不想用，那就自己

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端-輕量級框架應用（jQuery基礎）

簡介

添加JQuery庫

語法

選擇器

事件

您的項目需求