知友高人求你幫個(gè)忙，我想學(xué)jquery買(mǎi)哪本書(shū)比較好呀？最好經(jīng)典深?yuàn)W一點(diǎn)的，適合開(kāi)發(fā)大型項(xiàng)目的，謝謝回答

鋒利的Jquery，中國(guó)程序員寫(xiě)的，比較合適國(guó)內(nèi)人看。開(kāi)發(fā)大型項(xiàng)目都是小項(xiàng)目堆積起來(lái)的，建議LZ先從基礎(chǔ)看起。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的佳木斯網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

等成長(zhǎng)了再看類(lèi)似于jQuery權(quán)威實(shí)戰(zhàn)這些。

jQuery實(shí)現(xiàn)模糊查詢(xún)的方法分析

本文實(shí)例講述了jQuery實(shí)現(xiàn)模糊查詢(xún)的方法。分享給大家供大家參考，具體如下：

需求：list列表內(nèi)容很多，用戶(hù)需要找出列表內(nèi)容中的某些條目，只有當(dāng)與用戶(hù)輸入值匹配的條目才顯示出來(lái)。（后臺(tái)無(wú)分頁(yè)，直接異步接口返回?cái)?shù)據(jù)添加形成的內(nèi)容列表）

雖然可以通過(guò)傳參再調(diào)用查詢(xún)出來(lái)，但這里主要記錄的是前端處理進(jìn)行模糊查詢(xún)而無(wú)需再次調(diào)用接口的實(shí)現(xiàn)方法。

html部分：

div

class="search-form"

input

type="text"

placeholder="請(qǐng)輸入關(guān)鍵詞"

span

class="icon-clear"/span

/div

div

class="content"

div

class="title

row

no-gutter"

div

class="col-20"列表一/div

div

class="col-20"列表二/div

div

class="col-20"列表三/div

div

class="col-20"列表四/div

div

class="col-20"列表五/div

/div

div

class="list-content"

ul

li

div

class="code"00001/div

div

class="name"內(nèi)容1/div

div內(nèi)容2/div

div內(nèi)容3/div

div內(nèi)容4/div

/li

li……/li

/ul

/div

/div

js部分：

queryList:

function(){

$(".search-input").on("input

propertychange",

function()

{

var

queryStr

=

$.trim($(".search-input").val());

if(queryStr

===

''){

$(".list-content

li").show();

}else{

//

以下是匹配某些列的內(nèi)容，如果是匹配全部列的話(huà)就把find()和.parent()去掉即可

$(".list-content

li").hide().find(".code,

.name").filter(":contains('"+queryStr+"')").parent("li").show();

//$(".list-content").refresh();

//重新刷新列表把隱藏的dom結(jié)構(gòu)去掉。

}

});

}

分析：以上即實(shí)現(xiàn)了前端js的模糊查詢(xún)功能啦，哈哈。代碼中監(jiān)聽(tīng)事件中多加了input，據(jù)說(shuō)是為兼容iOS的，具體沒(méi)測(cè)試，有哪位大神測(cè)試了可以告知一聲哈，謝謝了。

還有個(gè)問(wèn)題就是，以上實(shí)現(xiàn)方法，當(dāng)列表內(nèi)容多大幾千條數(shù)目或者更多時(shí)，表單輸入時(shí)會(huì)出現(xiàn)卡頓的情況，因?yàn)橐ㄟ^(guò)js操作大量的DOM結(jié)構(gòu)啊（隱藏或顯示），PC上或許情況還沒(méi)有那么嚴(yán)重，在手機(jī)上測(cè)試時(shí)那真的是“怎一個(gè)卡字了得”，如果哪位大神有更好的法子，還望加以完善！

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:jQuery實(shí)現(xiàn)select模糊查詢(xún)（反射機(jī)制）jQuery基于xml格式數(shù)據(jù)實(shí)現(xiàn)模糊查詢(xún)及分頁(yè)功能的方法jQuery實(shí)現(xiàn)id模糊查詢(xún)的小例子jQuery簡(jiǎn)單實(shí)現(xiàn)的HTML頁(yè)面文本框模糊匹配查詢(xún)功能完整示例jquery

zTree異步加載、模糊搜索簡(jiǎn)單實(shí)例分享jquery

ztree實(shí)現(xiàn)模糊搜索功能jquery

easyui

combobox模糊過(guò)濾(示例代碼)jQuery實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)下拉列表查詢(xún)框JQuery+Ajax實(shí)現(xiàn)數(shù)據(jù)查詢(xún)、排序和分頁(yè)功能jquery處理頁(yè)面彈出層查詢(xún)數(shù)據(jù)等待操作實(shí)例

JQuery快速學(xué)習(xí)的經(jīng)典網(wǎng)站

帕蘭印象

絕對(duì)可以找到你想要的

我學(xué)jquery都是看API 看網(wǎng)上一些demo的 很快啊 后面自己寫(xiě)的時(shí)候不懂就看API 寫(xiě)法就按網(wǎng)上例子 很輕松啊

求推薦經(jīng)典的Jquery教程！！

你好，我建議你去慕課網(wǎng)看看吧， 這是一個(gè)垂直的互聯(lián)網(wǎng)IT技能免費(fèi)學(xué)習(xí)網(wǎng)站 ，這個(gè)網(wǎng)站里面有經(jīng)典的Jquery教程，教程都是采取動(dòng)畫(huà)形式，課程內(nèi)容學(xué)習(xí)生動(dòng)有趣。

jQuery層次選擇器用法示例

本文實(shí)例講述了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"

/

title2-5/title

!--

引入jQuery

--

script

src="js/jquery-1.10.1.min.js"

type="text/javascript"/script

script

src="js/assist.js"

type="text/javascript"/script

link

rel="stylesheet"

type="text/css"

href="css/style.css"

/

script

type="text/javascript"

$(document).ready(function(){

//選擇

body內(nèi)的所有div元素.

$('#btn1').click(function(){

$('body

div').css("background","#bbffaa");

})

//在body內(nèi)的選擇

元素名是div

的子元素.

$('#btn2').click(function(){

$('body

div').css("background","#bbffaa");

})

//選擇

所有class為one

的下一個(gè)div元素.

$('#btn3').click(function(){

$('.one

+

div').css("background","#bbffaa");

})

//選擇

id為two的元素后面的所有div兄弟元素.

$('#btn4').click(function(){

$('#two

~

div').css("background","#bbffaa");

})

});

/script

/head

body

h3層次選擇器./h3

button

id="reset"手動(dòng)重置頁(yè)面元素/button

input

type="checkbox"

id="isreset"

checked="checked"/

label

for="isreset"點(diǎn)擊下列按鈕時(shí)先自動(dòng)重置頁(yè)面/label

br

/

br

/

input

type="button"

value="選擇

body內(nèi)的所有div元素."

id="btn1"/

input

type="button"

value="在body內(nèi),選擇子元素是div的。"

id="btn2"/

input

type="button"

value="選擇

所有class為one

的下一個(gè)div元素."

id="btn3"/

input

type="button"

value="選擇

id為two的元素后面的所有div兄弟元素."

id="btn4"/

br

/

br

/

!--

測(cè)試的元素

--

div

class="one"

id="one"

id為one,class為one的div

div

class="mini"class為mini/div

/div

div

class="one"

id="two"

title="test"

id為two,class為one,title為test的div.

div

class="mini"

title="other"class為mini,title為other/div

div

class="mini"

title="test"class為mini,title為test/div

/div

div

class="one"

div

class="mini"class為mini/div

div

class="mini"class為mini/div

div

class="mini"class為mini/div

div

class="mini"/div

/div

div

class="one"

div

class="mini"class為mini/div

div

class="mini"class為mini/div

div

class="mini"class為mini/div

div

class="mini"

title="tesst"class為mini,title為tesst/div

/div

div

style="display:none;"

class="none"style的display為"none"的div/div

div

class="hide"class為"hide"的div/div

div

包含input的type為"hidden"的div

input

type="hidden"

size="8"/

/div

span

id="mover"正在執(zhí)行動(dòng)畫(huà)的span元素./span

/body

/html

效果圖：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jquery選擇器用法總結(jié)》、《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery頁(yè)面元素操作技巧匯總》、《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》及《jQuery常見(jiàn)經(jīng)典特效匯總》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。