jquery

題目1: jQuery 中, $(document).ready()是什么意思?

$(document).ready()的作用是等Html文檔解析完成后執行JS的內容,以防止DOM元素沒加載完成就執行JS內容,這樣可能會出現找不到元素的情況。
等價于 $(hander)

題目2: $node.html()和$node.text()的區別?

$node.html() 的作用是返回的內容是元素內部的html的結構,包括標簽,文本內容
$node.text()的作用是返回元素內包含的文本內容,在多層次的時候會按照元素由淺到深的順序拼接其內容

題目3: $.extend 的作用和用法?

$.extend 的作用是用一個或多個其他對象來擴展一個對象,返回被擴展的對象。

參數:target,[object1],[objectN]Object,Object,ObjectV1.0

target:一個對象,如果附加的對象被傳遞給這個方法將那么它將接收新的屬性,如果它是唯一的參數將擴展jQuery的命名空間。
object1:待合并到第一個對象的對象。
objectN:待合并到第一個對象的對象。

例:

var obj1 = {a:1}
var obj2 = {a:2,b:2}
$.extend(obj1,obj2)   //obj{a:2,b:2}

題目4: jQuery 的鏈式調用是什么?

jQuery的鏈式調用是jquery可以支持連續調用方法。
其中的原理是:在調用方法后,return this 返回當前實例對象的this,這樣返回的又是對象,就又可以繼續調用方法了

題目5: jQuery 中 data 函數的作用

data([key],[value])
在元素上存放或讀取數據,返回jQuery對象。
當參數只有一個key的時候,為讀取該jQuery對象對應DOM中存儲的key對應的值,值得注意的是,如果瀏覽器支持HTML5,同樣可以讀取該DOM中使用 data-[key] = [value] 所存儲的值。
當參數為兩個時,為像該jQuery對象對應的DOM中存儲key-value鍵值對的數據。
如果jQuery集合指向多個元素,那將在所有元素上設置對應數據。 這個函數不用建立一個新的expando,就能在一個元素上存放任何格式的數據,而不僅僅是字符串。
例:

 HTML 代碼:
<div></div>
jQuery 代碼:
$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah設置為hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  // 設置為86
$("div").data("blah");  //  86
$("div").removeData("blah");  //移除blah
$("div").data("blah");  // undefined

描述:
在一個div上存取名/值對數據
HTML 代碼:
<div></div>
jQuery 代碼:
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;

描述:
在HTML5規范中div中讀取預存的data-[key]值
HTML 代碼:
<div data-test="this is test" ></div>
jQuery 代碼:
$("div").data("test"); //this is test!;

題目6:
寫出以下功能對應的 jQuery 方法:

給元素 $node 添加 class active,給元素 $node 刪除 class active

$node.addClass('active')
$node.removeClass('active')

展示元素$node, 隱藏元素$node

$node.show();
$node.hide();
$node.css('display','none');
$node.css('display','block')

獲取元素$node 的 屬性: id、src、title, 修改以上屬性

$node.attr('id','123');
$node.attr('src','http:.....');
$node.attr('title','123');

給$node 添加自定義屬性data-src

$('node').prop('data')

在$ct 內部最開頭添加元素$node

$ct.prepend();

在$ct 內部最末尾添加元素$node

$ct.append($node)

刪除$node

$node.remove()

把$ct里內容清空

$ct.empty()

在$ct 里設置 html <div class="btn"></div>

$ct.append( '<div class="btn"></div>')

獲取、設置$node 的寬度、高度(分別不包括內邊距、包括內邊距、包括邊框、包括外邊距)

$node.width(); // content
$node.height(); // content
$node.innerWidth(); // content+padding
$node.innerHeight(); // content+padding
$node.outWidth(); // content+padding+border
$node.outHeight(); // content+padding+border
$node.outWidth(true); // content+padding+border+margin
$node.outHeight(true); // content+padding+border+margin

獲取窗口滾動條垂直滾動距離

$node.scrollTop();

獲取$node 到根節點水平、垂直偏移距離

$node.offset();
$node.scrollLeft();

修改$node 的樣式,字體顏色設置紅色,字體大小設置14px

 $node.css({'color':'red', 'font-size','14px'})

遍歷節點,把每個節點里面的文本內容重復一遍

 $.each(function(index,value,arr){
            var str = $(this).text();
            console.log($(this).text(str+str))             })

從$ct 里查找 class 為 .item的子元素

 $ct.find('.item')

獲取$ct 里面的所有孩子

 $ct.children();

對于$node,向上找到 class 為'.ct'的父親,在從該父親找到'.panel'的孩子

 $node.parents('.ct').find('.panel')

獲取選擇元素的數量

 $node.length

獲取當前元素在兄弟中的排行

 $node.index();

題目7:
用jQuery實現以下操作當點擊$btn 時,讓 $btn 的背景色變為紅色再變為藍色

當窗口滾動時,獲取垂直滾動距離
當鼠標放置到$div 上,把$div 背景色改為紅色,移出鼠標背景色變為白色
當鼠標激活 input 輸入框時讓輸入框邊框變為藍色,當輸入框內容改變時把輸入框里的文字小寫變為大寫,當輸入框失去焦點時去掉邊框藍色,控制臺展示輸入框里的文字
當選擇 select 后,獲取用戶選擇的內容

預覽
題目8: 用 jQuery ajax 實現如下效果。`當點擊加載更多會加載數據展示到頁面效果預覽420

HTML

image.png

后臺

image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,501評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,673評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,610評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,939評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,668評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,004評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,001評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,173評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,705評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,426評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,656評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,139評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,833評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,247評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,580評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,371評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,621評論 2 380

推薦閱讀更多精彩內容