jquery基礎事件，包括綁定事件、簡寫事件、復合事件；
創(chuàng)新互聯(lián)公司是一家專業(yè)提供汝南企業(yè)網(wǎng)站建設,專注與成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設、H5建站、小程序制作等業(yè)務。10年已為汝南眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡公司優(yōu)惠進行中。
一．綁定事件
jQuery 通過.bind()方法來為元素綁定這些事件。
形式：
bind(type, [data], fn)
參數(shù)：
type 表示一個或多個類型的事件名字符串；
[data]是可選的，作為 event.data 屬性值傳遞一個額外的數(shù)據(jù)，這個數(shù)據(jù)是一個字符串、一個數(shù)字、一個數(shù)組或一個對象；
fn 表示綁定到指定元素的處理函數(shù)。
二、簡寫事件
為了使開發(fā)者更加方便的綁定事件，jQuery 封裝了常用的事件以便節(jié)約更多的代碼。 稱之為簡寫事件。簡寫事件，綁定方法如下圖，
三、復合事件
jQuery 提供了許多最常用的事件效果， 組合一些功能實現(xiàn)了一些復合事件， 比如切換功?能、智能加載等。
擴展資料
1、綁定事件fn函數(shù)
1)使用點擊事件
$('input').bind('click', function () {//點擊按鈕后執(zhí)行匿名函數(shù)
alert('點擊！');
});
2)普通處理函數(shù)
$('input').bind('click', fn); //執(zhí)行普通函數(shù)式無須圓括號
function fn() {
alert('點擊！');
}
2、簡寫事件函數(shù)
1）.mouseover()和.mouseout()表示鼠標移入和移出的時候觸發(fā)。而.mouseenter()和.mouseleave()表示鼠標穿過和穿出的時候觸發(fā)。
2）.keydown()、.keyup()返回的是鍵碼，而.keypress()返回的是字符編碼。
3）.focus()和.blur()分別表示光標激活和丟失，事件觸發(fā)時機是當前元素。而.focusin()和.focusout()也表示光標激活和丟失，但事件觸發(fā)時機可以是子元素。
3、復合事件示例，背景移入移出切換效果
$('div').hover(function () {
$(this).css('background', 'black');? ? ?//mouseenter 效果
}, function () {
$(this).css('background', 'red');? ? ? //mouseleave 效果，可省略
});
參考資料
jQuery官方網(wǎng)站-事件
不建議如此，jquery是基于JavaScript封裝而成的框架，目的是讓開發(fā)者更簡便地使用JavaScript，因此我們在使用各種JavaScript框架的時候，建議要有JavaScript的基礎為佳，如此我們才能更快地掌握jquery和靈活的使用它。
JavaScript是現(xiàn)實中房子的地基，學習須得掌握基礎，才能基于基礎更快的掌握更深的知識。
如果滿意，還望采納，謝謝！
本文實例講述了JQuery中基礎過濾選擇器用法。分享給大家供大家參考。具體如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
title基礎過濾選擇器/title
style
type="text/css"
#main{
width:600px;
border:1px
solid
green;
margin:auto;
padding:10px;
}
#tbl{
border-collapse:collapse;
border-top:1px
solid
red;
border-left:1px
solid
red;
margin:auto;
}
#tbl
td{
width:60px;
height:60px;
border-collapse:collapse;
border-bottom:1px
solid
red;
border-right:1px
solid
red;
}
/style
script
src="jquery-1.6.2.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function
()
{
//=============舉例1========================
//:first
說明:
匹配找到的第一個元素
//....1修改第一個單元格的背景色
//var
$tds
=
$("#tbl
td:first");
//$tds.css("backgroundColor",
"blue");
//....2修改第一行的背景色
//var
$trs
=
$("#tbl
tr:first");
//$trs.css("backgroundColor",
"blue");
//=============舉例2========================
//:last
說明:
匹配找到的最后一個元素.與
:first
相對應.
//...1修改隨后一個單元格的背景色
//var
$tds
=
$("#tbl
td:last");
//$tds.css("backgroundColor",
"blue");
//=============舉例3========================
//:not(selector)
去除所有與給定選擇器匹配的元素.有點類似于”非”
//...1把所有class不為tdClass的列的文本進行修改
//var
$tds
=
$("#tbl
td:not(.tdClass)");
//$tds.text("Not
tdClass");
//=============舉例4========================
//:even
說明:
匹配所有索引值為偶數(shù)的元素，從
開始計數(shù).js的數(shù)組都是從0開始計數(shù)的.
//例如要選擇table中的行,因為是從0開始計數(shù),所以table中的第一個tr就為偶數(shù)0.
//...1把索引值為偶數(shù)的行變成黃色
//var
$trs
=
$("#tbl
tr:even");
//$trs.css("backgroundColor",
"yellow");
//=============舉例5========================
//:
odd
說明:
匹配所有索引值為奇數(shù)的元素,和:even對應,從
開始計數(shù).
//var
$trs
=
$("#tbl
tr:odd");
//$trs.css("backgroundColor",
"yellow");
//=============舉例6========================
//:eq(index)
說明:
匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號里面的是索引值,不是元素排列數(shù).
//...1設置第二個單元格的背景色
//var
$tds
=
$("#tbl
td:eq(1)");
//$tds.css("backgroundColor",
"gray");
//=============舉例6========================
//:gt(index)
說明:
匹配所有大于給定索引值的元素.
//...1把下標索引大于1的所有單元格背景色設置為灰色
//var
$tds
=
$("#tbl
td:gt(1)");
//$tds.css("backgroundColor",
"gray");
//=============舉例7========================
//:lt(index)
說明:
匹配所有小于給定索引值的元素.
//...1把下標索引小于3的所有單元格背景色設置為灰色
var
$tds
=
$("#tbl
td:lt(3)");
$tds.css("backgroundColor",
"gray");
//=============舉例8========================
//:header(固定寫法)
說明:
匹配如
h1,
h2,
h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.
//...1把所有的h標簽背景色進行修改
var
$hs
=
$(":header");
$hs.css("backgroundColor",
"gold");
//=============舉例8========================
//slice
獲取下標范圍內(nèi)元素
var
$trs
=
$("#tbl
tr").slice(1,
3);
$trs.css("backgroundColor",
"gold");
});
/script
/head
body
div
id="main"
h1我是h1/h1
h2我是h2/h2
h3我是h3/h3
table
id="tbl"
tr
td1/tdtd1/tdtd1/td
/tr
tr
td
class="tdClass"2/tdtd2/tdtd2/td
/tr
tr
td3/tdtd3/tdtd3/td
/tr
tr
td4/tdtd4/tdtd
class="tdClass"4/td
/tr
tr
td5/tdtd5/tdtd5/td
/tr
tr
td6/tdtd6/tdtd
class="tdClass"6/td
/tr
/table
/div
/body
/html
希望本文所述對大家的jQuery程序設計有所幫助。
jQuery對象是通過jQuery包裝DOM對象后產(chǎn)生的對象
注意：jQuery對象只能使用jQuery里的方法，DOM對象只能使用DOM對象的方法
基本選擇器
層級選擇器：
基本篩選器：
屬性選擇器：
表單篩選器：
篩選器方法：
jQuery的一些方法：
注意：對于標簽上有的能夠看到的屬性和自定義屬性用attr()方法
對于返回布爾值比如checkbox，radion，option這三個標簽是否被選中，用prop方法
事件綁定方式：
注意：DOM定義的事件可以用 .on()方法來綁定事件，但是jQuery定義的事件就不可以
常用事件有：
移除事件：把on改成off，就是移除 .on()綁定的事件
阻止后續(xù)事件執(zhí)行：事件函數(shù)中添加 return false; (常用于阻止表單提交等）或者e.preventDefault()
阻止事件冒泡：添加e.stopPropagation()
利用父標簽去捕獲子標簽的事件
推薦閱讀：
前端開發(fā)框架之jQuery 和 Vue 的選擇
前端開發(fā)之15個jQuery小技巧分享
前端開發(fā)之JQuery入門基礎操作
前端開發(fā)框架jQuery的優(yōu)勢與基礎知識分享
用處：jquery是基于javascript類庫的框架， 它里面提供了許多javascript類庫，和一些css樣式表的封裝， 使用起來比較方便， 簡化了用戶與瀏覽器的交互， 提高了系統(tǒng)的性能和開發(fā)效率。
jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優(yōu)化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
擴展資料：
語言特點
1、快速獲取文檔元素
jQuery的選擇機制構建于Css的選擇器，它提供了快速查詢DOM文檔中元素的能力，而且大大強化了JavaScript中獲取頁面元素的方式。
2、提供漂亮的頁面動態(tài)效果
jQuery中內(nèi)置了一系列的動畫效果，可以開發(fā)出非常漂亮的網(wǎng)頁，許多網(wǎng)站都使用jQuery的內(nèi)置的效果，比如淡入淡出、元素移除等動態(tài)特效。
3、創(chuàng)建AJAX無刷新網(wǎng)頁
AJAX是異步的JavaScript和ML的簡稱，可以開發(fā)出非常靈敏無刷新的網(wǎng)頁，特別是開發(fā)服務器端網(wǎng)頁時，比如PHP網(wǎng)站，需要往返地與服務器通信，如果不使用AJAX，每次數(shù)據(jù)更新不得不重新刷新網(wǎng)頁，而使用AJAX特效后，可以對頁面進行局部刷新，提供動態(tài)的效果。
參考資料來源：百度百科--jQuery
重慶分公司
重慶分公司
