1.js的入口函數和jquery入口函數的區別?
JS入口函數:window.onload=function(){ } JQuery入口函數: $(document).ready(function(){ })
JS的window.onload事件必須要等到所有內容,以及外部圖片之類的文件加載完之后,才會去執行。
JQuery入口函數是在所有標簽加載完之后,就會去執行。
接着,通過JS的一個覆蓋問題引出對JQuery入口函數實現的解釋。
JS的入口函數window.onload函數有一個覆蓋的問題,當文檔中出現2個window.onload函數的時候,后者會覆蓋前者,導致功能實現不了。但是JQuery卻沒有這樣的問題,重要是因為JQuery入口函數只是對封裝好了的方法的一個調用,只不過傳的參數不同而已。
最后,說說JQuery入口函數($(document).ready();)的實現方式。
2.jquery的值的操作哪個方法?
值操作是對DOM屬性value進行讀取和設置操作。 比如html()、 text()、 val().
格式:
$(selector).html()
這個方法不接受任何元素
作用:在一個HTML文檔中, 可以使用.html()方法來獲取任意一個元素的內容。 如果選擇器匹配多個元素, 那么只有第一個匹配元素的HTML內容會被獲取。
1.2 html() 設置值
格式:
$(selector).html(htmlString);
返回值:jQuery
作用: 用來設置每個匹配元素的一個HTML字符串
htmlString 類型:string
3.jquery和js對象如何轉化?
兩種轉換方式將一個jQuery對象轉換成js對象:[index]和.get(index);
(1)jQuery對象是一個數據對象,可以通過[index]的方法,來得到相應的js對象。
如:var $v =$("#v") ; //jQuery對象
var v=$v[0]; //js對象
alert(v.checked) //檢測這個checkbox是否被選中
(2)jQuery本身提供,通過.get(index)方法,得到相應的js對象
如:var $v=$("#v"); //jQuery對象
var v=$v.get(0); //js對象
alert(v.checked) //檢測這個checkbox是否被選中
js對象轉成jQuery對象:
對於已經是一個js對象,只需要用$()把DOM對象包裝起來,就可以獲得一個jQuery對象了。$(js對象)
如:var v=document.getElementById("v"); //js對象
var $v=$(v); //jQuery對象
轉換后,就可以任意使用jQuery的方法了。
4.闡述一下js和jquery的關系?
1.jQuery是一個 js框架,封裝了js的屬性和方法。讓用戶使用起來更加便利,並且增強了 js的功能.
2.使用原生 js是要處理很多兼容性的問題(注冊事件等),由jQuery封裝了底層,就不用處理兼容性問題。
3.原生的js的dom和事件綁定和Ajax等操作非常麻煩,jQuery封裝以后操作非常方便。
5.jquery的html屬相操作是哪個方法?你認為是js中哪個方法封裝來的?
jQuery的屬性操作, 是對html文檔中的屬性進行讀取、設置和移除操作。比如,attr()、 removeAttr()。
1. attr()
attr()可以設置屬性值或者返回被選元素的屬性值
1.1 使用attr()獲取值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>attr()獲取值</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script> 8 9 $(function () { 10 var cla = $("div").attr("class"); 11 console.log(cla); 12 var id = $("div").attr("id"); 13 console.log(id); 14 }) 15 16 </script> 17 </head> 18 <body> 19 <div class="divClass" id="divId"></div> 20 </body> 21 </html>
結果為:
1.2 使用attr()設置值
1.2.1 使用attr()設置一個值
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>attr() Demo</title> <script type="text/javascript" src="jquery.js"></script> <script> $(function () { $("div").attr("class", "box"); }) </script> </head> <body> <div></div> <div></div> </body> </html>
結果顯示為:
1.2.2 使用attr()設置多個值
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>attr() Demo</title> <script type="text/javascript" src="jquery.js"></script> <script> $(function () { $("div").attr({ "class": "divClass", "id": "divId" }); }) </script> </head> <body> <div></div> </body> </html>
設置效果為:
2. removeAttr()
移除屬性
2.1 刪除單個屬性
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>removeAttr() Demo</title> <script type="text/javascript" src="jquery.js"></script> <script> $(function () { $("div").removeAttr("class"); $("div").removeAttr("id"); }) </script> </head> <body> <div class="divClass" id="divId"></div> </body> </html>
設置效果為:
2.2 removeAttr()設置多個屬性值
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>removeAttr() Demo</title> 6 <script type="text/javascript" src="jquery.js"></script> 7 <script> 8 $(function () { 9 $("div").removeAttr("class id"); 10 }) 11 </script> 12 </head> 13 <body> 14 <div class="divClass" id="divId"></div> 15 </body> 16 </html>
js的setAttribute()方法封裝來的
6.列舉jquery的文檔操作的方法?以及他們的意思?
jQuery的文檔操作方法
7.對一個元素顯示隱藏分別使用類控制(addClass和removeClass)和文檔操作(append())來實現,並描述一下他們的區別?
使用jquery控制div的顯示與隱藏,一句話就能搞定,例如:
1.$("#id").show()表示為display:block,
$("#id").hide()表示為display:none;
2.$("#id").toggle()切換元素的可見狀態。如果元素是可見的,切換為隱藏的;如果元素是隱藏的,則切換為可見的。
3.$("#id").css('display','none');//隱藏
$("#id").css('display','block');//顯示
或者
$("#id")[0].style.display='none';
display=none 控制對象的隱藏
display=block控制對象的顯示
4.$("#id").css('visibility','hidden');//元素隱藏
$("#id").css('visibility','visible');//元素顯示
CSS visibility 屬性規定元素是否可見。
visible 元素可見。
hidden 元素不可見。
collapse 在表格元素中使用時,此值可刪除一行或一列,但它不影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上,會呈現為 "hidden"。
inherit 從父元素繼承 visibility 屬性的值。
注意:
display:none和visible:hidden都能把網頁上某個元素隱藏起來,在視覺效果上沒有區別,但是在一些DOM操作中兩者有區別:
display:none ---不為被隱藏的對象保留其物理空間,即該對象在頁面上徹底消失,通俗來說就是看不見也摸不到。
visible:hidden--- 使對象在網頁上不可見,但該對象在網頁上所占的空間沒有改變,即它仍然具有高度、寬度等屬性,通俗來說就是看不見但摸得到。
//第1種方法 ,給元素設置style屬性 $("#hidediv").css("display", "block"); //第2種方法 ,給元素換class,來實現隱藏div,前提是換的class樣式定義好了隱藏屬性 $("#hidediv").attr("class", "blockclass"); //第3種方法,通過jquery的css方法,設置div隱藏 $("#blockdiv").css("display", "none"); $("#hidediv").show();//顯示div $("#blockdiv").hide();//隱藏div
append的屬性依然存在,只是在原來的基礎上再后面增加屬性 但是addClass和removeClass則是增加和刪除屬性,如果刪除了,屬性就不存在了 簡單說就是一個是新增屬性,一個是增刪屬性
8.列舉jquery的篩選方法有哪些?重點
1.選擇對象
1).基本
·#id 根據給定的ID匹配一個元素。例如:$("#id")
·element 根據給定的元素名匹配所有元素。例如:$("div")
·.class 根據給定的類匹配元素。例如:$(".style1");
·* 匹配所有元素。例如:$("*")
·selector1,selector2,selectorN 將每一個選擇器匹配到的元素合並后一起返回。例如:$("#id,div,.style1")
2).表單
·:button 匹配所有按鈕。例如:$(":button")
·:checkbox 匹配所有復選框。例如:$(":checkbox")
·:file 匹配所有文件域。例如:$(":File")
·:hidden 匹配所有不可見元素,或者type為hidden的元素。例如:$("input:hidden")
·:image 匹配所有圖像域。例如:$(":image")
·:input 匹配所有 input, textarea, select 和 button 元素。例如:$(":input")
·:password 匹配所有密碼框。例如:$(":password")
·:radio 匹配所有單選按鈕。例如:$(":radio")
·:reset 匹配所有重置按鈕。例如:$(":reset")
·:submit 匹配所有提交按鈕。例如:$(":submit")
·:text 匹配所有的單行文本框。例如:$(":text")
·:header 匹配如 h1, h2, h3之類的標題元素。例如:$(":header").css("background", "#EEE");
2.篩選條件
1).屬性篩選
·[attribute*=value] 匹配給定的屬性是以包含某些值的元素。例如:$("input[name*='man'")
·[attribute!=value] 匹配所有含有指定的屬性,但屬性不等於特定值的元素。例如:$(input[name!='man');
·[attribute$=value] 匹配給定的屬性是以某些值結尾的元素。例如:$("input[name$='man']")
·[attribute=value] 匹配給定的屬性是某個特定值的元素。例如:$("input[name='man']");
·[attribute] 匹配包含給定屬性的元素。例如:$("div[id]")
·[attribute^=value] 匹配給定的屬性是以某些值開始的元素。例如:$("input[name^='man']")
·[selector1][selector2][selectorN] 同時滿足多個條件。例如:$("input[id][name$='man']")
·:hidden 匹配所有的不可見元素。例如:$("tr:hidden")
·:visible 匹配所有的可見元素。例如:$("tr:visible")
·:checked 匹配所有選中的被選中元素(復選框、單選框等,不包括select中的option)。例如:$("input:checked")
·:disabled 匹配所有不可用元素。例如:$("input:disabled")
·:enabled 匹配所有可用元素。例如:$("input:enabled")
·:selected 匹配所有選中的option元素。例如:$("select option:selected")
2).內容篩選
·:contains(text) 匹配包含給定文本的元素。例如:$("div:contains('John')")
·:empty 匹配所有不包含子元素或者文本的空元素。例如:$("td:empty")
·:has(selector) 匹配含有選擇器所匹配的元素的元素。例如:$("div:has(p)");
·:parent 匹配含有子元素或者文本的元素。例如:$("td:parent")
3).層級篩選
·ancestor descendant 在給定的祖先元素下匹配所有的后代元素。例如:$("form input")
·parent > child 在給定的父元素下匹配所有的子元素。例如:$("form > input")
·prev + next 匹配所有緊接在 prev 元素后的 next 元素。例如:$("label + input")
·prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素。例如:$("form ~ input")
·:first-child 匹配第一個子元素。例如:$("ul li:first-child")
·:last-child 匹配最后一個子元素。例如:$("ul li:last-child")
·:nth-child(index/even/odd/equation) 匹配其父元素下的第N個子或奇偶元素。例如:$("ul li:nth-child(2)")
·:only-child 如果某個元素是父元素中唯一的子元素,那將會被匹配。例如:$("ul li:only-child")
4).方法篩選
·:animated 匹配所有正在執行動畫效果的元素。例如:$("div:animated");
·:eq(index) 匹配一個給定索引值的元素。例如:$("tr:eq(1)")
·:even 匹配所有索引值為偶數的元素,從 0 開始計數。例如:$("tr:even")
·:first 匹配找到的第一個元素。例如:$("tr:first")
·:gt(index) 匹配所有大於給定索引值的元素,從 0 開始計數。例如:$("tr:gt(0)")
·:last 匹配找到的最后一個元素。例如:$("tr:last")
·:lt(index) 匹配所有小於給定索引值的元素。例如:$("tr:lt(2)")
·:not(selector) 去除所有與給定選擇器匹配的元素。例如:$("input:not(:checked)")
·:odd 匹配所有索引值為奇數的元素,從 0 開始計數。例如:$("tr:odd")
9.jquery的事件有哪些?
bind() 向匹配元素附加一個或更多事件處理器 blur() 觸發、或將函數綁定到指定元素的 blur 事件 change() 觸發、或將函數綁定到指定元素的 change 事件 click() 觸發、或將函數綁定到指定元素的 click 事件 dblclick() 觸發、或將函數綁定到指定元素的 double click 事件 delegate() 向匹配元素的當前或未來的子元素附加一個或多個事件處理器 die() 移除所有通過 live() 函數添加的事件處理程序。 error() 觸發、或將函數綁定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 對象上是否調用了 event.preventDefault()。 event.pageX 相對於文檔左邊緣的鼠標位置。 event.pageY 相對於文檔上邊緣的鼠標位置。 event.preventDefault() 阻止事件的默認動作。 event.result 包含由被指定事件觸發的事件處理器返回的最后一個值。 event.target 觸發該事件的 DOM 元素。 event.timeStamp 該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數。 event.type 描述事件的類型。 event.which 指示按了哪個鍵或按鈕。 focus() 觸發、或將函數綁定到指定元素的 focus 事件 keydown() 觸發、或將函數綁定到指定元素的 key down 事件 keypress() 觸發、或將函數綁定到指定元素的 key press 事件 keyup() 觸發、或將函數綁定到指定元素的 key up 事件 live() 為當前或未來的匹配元素添加一個或多個事件處理器 load() 觸發、或將函數綁定到指定元素的 load 事件 mousedown() 觸發、或將函數綁定到指定元素的 mouse down 事件 mouseenter() 觸發、或將函數綁定到指定元素的 mouse enter 事件 mouseleave() 觸發、或將函數綁定到指定元素的 mouse leave 事件 mousemove() 觸發、或將函數綁定到指定元素的 mouse move 事件 mouseout() 觸發、或將函數綁定到指定元素的 mouse out 事件 mouseover() 觸發、或將函數綁定到指定元素的 mouse over 事件 mouseup() 觸發、或將函數綁定到指定元素的 mouse up 事件 one() 向匹配元素添加事件處理器。每個元素只能觸發一次該處理器。 ready() 文檔就緒事件(當 HTML 文檔就緒可用時) resize() 觸發、或將函數綁定到指定元素的 resize 事件 scroll() 觸發、或將函數綁定到指定元素的 scroll 事件 select() 觸發、或將函數綁定到指定元素的 select 事件 submit() 觸發、或將函數綁定到指定元素的 submit 事件 toggle() 綁定兩個或多個事件處理器函數,當發生輪流的 click 事件時執行。 trigger() 所有匹配元素的指定事件 triggerHandler() 第一個被匹配元素的指定事件 unbind() 從匹配元素移除一個被添加的事件處理器 undelegate() 從匹配元素移除一個被添加的事件處理器,現在或將來 unload() 觸發、或將函數綁定到指定元素的 unload 事件
10.mouseout和mouseover以及mouseenter和mouseleave的區別?
mouseover與mouseenter
不論鼠標指針穿過被選元素或其子元素,都會觸發 mouseover 事件。
只有在鼠標指針穿過被選元素時,才會觸發 mouseenter 事件。
mouseout與mouseleave
不論鼠標指針離開被選元素還是任何子元素,都會觸發 mouseout 事件。
只有在鼠標指針離開被選元素時,才會觸發 mouseleave 事件。
11.寫jquery的ajax的get請求方法和post請求方法?
//get()方式 $.ajax({ url:'./data/index.txt', type:'get', dataType:'text', success:function(data){ $('p').html(data); }, error:function(error){ console.log(error) } //post()方式 $.ajax({ url:'/index', type:'post', data:{name:'張三',age:12}, success:function(data){ $('p').html(data); }, error:function(error){ console.log(error) }