JQuery倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互等功能。使用jQuery必須要引用用庫文件才有用，如jquery-1.8.3.min.js。無論元素字體中有無css樣式，jquery都可以以最高級的權限去設置字體樣式。
1.JQuery庫中的$()是什么？
$()函數是JQuery()函數的別稱。$()函數用于將任何對象包裹成JQuery對象，接著你就被允許調離定義在JQuery對象上的多個不同方法。你可以將一個選擇器字符串傳入$()函數，它會返回一個包含所有匹配的DOM元素數組的JQuery對象
2.如何找到所有 HTML select 標簽的選中項？
$('[name=selectname]:selected')
3.$(this) 和 this 關鍵字在 jQuery 中有何不同？
$(this) 返回一個 jQuery 對象，你可以對它調用多個 jQuery 方法，比如用 text() 獲取文本，用val() 獲取值等等。而 this 代表當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。
4.jquery怎么移除標簽onclick屬性？
獲得a標簽的onclick屬性: $("a").attr("onclick")
刪除onclick屬性：$("a").removeAttr("onclick");
設置onclick屬性：$("a").attr("onclick","test();");
5.JQuery中addClass,removeClass,toggleClass的使用。
$(selector).addClass(class)：為每個匹配的元素添加指定的類名
$(selector).removeClass(class)：從所有匹配的元素中刪除全部或者指定的類，刪除class中某個值；
$(selector).toggleClass(class)：如果存在（不存在）就刪除（添加）一個類
$(selector).removeAttr(class);刪除class這個屬性；
6.JQuery有幾種選擇器?
(1)、基本選擇器：#id，class,element,*;
(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings
(3)、基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
(4)、內容過濾器選擇器： :contains ，:empty ，:has ，:parent
(5)、可見性過濾器選擇器：:hidden ，:visible
(6)、屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
(7)、子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表單選擇器： :input ，:text，:password ，:radio ，:checkbox ，:submit 等；
(9)、表單過濾器選擇器：:enabled ，:disabled，:checked ，:selected
7.JQuery中的Delegate()函數有什么作用？
delegate()會在以下兩個情況下使用到：
1、如果你有一個父元素，需要給其下的子元素添加事件，這時你可以使用delegate()了，代碼如下：
$("ul").delegate("li","click", function(){ $(this).hide(); });
2、當元素在當前頁面中不可用時，可以使用delegate()
8.$(document).ready()方法和window.onload有什么區別？
(1)、window.onload方法是在網頁中所有的元素(包括元素的所有關聯文件)完全加載到瀏覽器后才執行的。
(2)、$(document).ready() 方法可以在DOM載入就緒時就對其進行操縱，并調用執行綁定的函數。
9.如何用JQuery禁用瀏覽器的前進后退按鈕？
$(document).ready(function() {
window.history.forward(1);
//OR window.history.forward(-1);
});
10.jquery中$.get()提交和$.post()提交有區別嗎？
相同點：都是異步請求的方式來獲取服務端的數據；
異同點：
1、請求方式不同：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。
2、參數傳遞方式不同：get請求會將參數跟在URL后進行傳遞，而POST請求則是作為HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。
3、數據傳輸大小不同：get方式傳輸的數據大小不能超過2KB 而POST要大的多
4、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，因此有安全問題。
11.寫出一個簡單的$.ajax()的請求方式？
$.ajax({
url:'http://www.baidu.com',
type:'POST',
data:data,
cache:true,
headers:{},
beforeSend：function(){},
success:function(){},
error:function(){},
complete:function(){}
});
12.鼠標滑到指定位置時觸發事件
$(window).scroll(function(){
if($(window).scrollTop() > 100){
$('.box').addClass('active')
}
else{$('.box').removeClass('active') }
});
13.給某選擇器添加css多個樣式
$(function(){
$("#id").css({ "width" : "35px", "height" : "35px",});}
});
14. 移除整個元素和內容
$(function(){
$("#id").eq().remove("class");
});
15. 設置多個選擇器
$(function(){
$("#seimg01, #setext01").css({ "margin-left" : "-25px",});
});
16. 清除屬性樣式
$(function(){
$("#delId2 div p span").removeAttr("style");
});
19.設置最后一條數據樣式
$(function(){
$(".nri01").last().css("margin-bottom","0px");
});
20.設置第一個元素樣式
$(function(){
$(".search-menu ul li").eq(0).css("border-bottom","1px solid #333");
});
21.添加切換效果
$(function(){
$("#id").click(function(){
$("#id02").slideToggle();//滑動切換->向下與向上
});
});
22.當點擊元素時，改變圖片路徑和大小
function dsmenu(){
$("#menupic").attr({
"src" : "{zjtech:sitepath}{zjtech:languagepath}images/menuh.png",
});
//點擊后改變圖片大小
$("#menupic").css({
"width" : "35px",
});
}
23.當點擊空白區域時，設置其他事件
$(document).click(function(emenu){
var _con = $('.menu'); // 設置目標區域
if(!_con.is(emenu.target) && _con.has(emenu.target).length === 0){
$(".menuWrap").slideUp("1200");
});
24.鼠標移動上去和離開效果設置
$(function(){
$("#homepro li").mouseover(function(){
$("#homepro-mask").css("display","block");
});
$("#homepro li").mouseout(function(){
$("#homepro-mask").css("display","none");
});
});
25.點擊關閉
$(function(){
$('#close').click(function(){
$('#chat_f1').hide();
});
})
26. 獲得$(this)下面的指定的子元素
$(".t_ys").click(function(){
//方法一 find查找所有的子元素，會一直查找，跨層級查找
$(this).find(".name").html();
//方法二 children 查找直接的子元素，不會跨層級
$(this).children(".name").html();
})
27.從第2個字符截取到第4個字符
$(document).ready(function() {
$(".daymd").each(function() {
var maxwidth = 2;
if ($(this).text().length > maxwidth) {
$(this).text($(this).text().substring(2, 4));//從第2個字符截取到第4個字符
$(this).html($(this).html() + ''); //可加省略號 ...
}
});
});
28.當參數數據為空時，刪除整個元素
var cshu1 = "[content:P_parame01]" ; //var cshu = "";//空串
cshu1 = Boolean(cshu1);//false
console.log(cshu1);
//alert("我是參數01：" + "返回 " + cshu1);
if(cshu1 == false){
var obj1 = document.getElementById("delId1");
obj1.innerHTML = "";//刪除div內容
//刪除div
var parentObj1 = obj1.parentNode;//獲取div的父對象
parentObj1.removeChild(obj1);//通過div的父對象把它刪除
}
掃一掃 加微信咨詢
