那些學些網址_jquery初學知識

標籤：blog   http   color   io   os   ar   for   sp   檔案   

http://www.cnblogs.com/mingmingruyuedlut/archive/2011/10/18/2216553.html(ajax)
http://www.enet.com.cn/eschool/video/jQuery/(jquery)
http://www.cnblogs.com/zhangziqiu/tag/jQuery/(jquery網頁)
http://www.verycd.com/topics/2772159/(PHP)
http://www.enet.com.cn/eschool/video/sqlmana/(sqlsever資料庫操作)
http://www.enet.com.cn/eschool/esch_new/
http://demo.shopxx.net/admin/index.jsp

 

基本選取器--幾年前學慣用的

div:eq(1) 選擇第二個div

div:le(4) 選擇索引小於四的所有div

div:gt(3) 選擇索引大於三後面所有的div

div:even 選擇基數div

div:odd  選擇偶數div

div:odd:not(.2) 選擇偶數排除class為2的元素

  :animated選擇所有正在執行動畫的所有div

 :header 選擇所有的標題元素

.2~input   選擇class為2後面的同輩所有input元素

.2+input   選擇class為2後面的同輩第一個input元素

.2>input   選擇div下面同輩的所有input標籤

.2  input   選擇div下面的所有input標籤

setTimeout(‘ssssss()‘,1000) 一秒鐘調用一次sssss()這個函數

類容選取器

div:contains(‘2‘)  選擇類容為2 的所有div

div:empty   選擇類容為空白 沒有子項目的div

div:has(a)  選擇類容包含a標籤的div

div:parent  選擇所有包含有類容的div

$("div:hidden").show();  選擇所有隱藏的div 並顯示出來

div:visible 選擇所有可見的div

屬性過濾器

div[id] 選擇所有擁有id屬性的div

$("#btn").click(function()
{ $("input[name=‘a1‘][checked=‘checked‘]").each(function(i){
alert($(this).attr(‘checked‘));//輸出屬性checked
})
})
選擇id為btn的buttn按鈕 點擊它 尋找所有input 含有name屬性的
並且name="a1"的所有元素 並且選中 然後用迴圈遍曆

div[title^=‘a‘]  title屬性以a開頭的所有div

div[title $=‘a‘]  title屬性以a結尾的所有div

div[title *=‘ab‘]  title屬性包含ab的所有div  

div[id][title=‘3‘][id=‘111‘] 賽選有id屬性的div 並且title=‘3‘ id=‘111‘

子項目過濾選取器

$("ul>li:nth-child(2)") 選取ul下的第二個li

$("ul>li: first-child") 選取ul下的第一個li

$("ul>li:last-child")   選取ul下的最後一個li

select :selected  擷取下拉框中的值
$("ul>li:only-child")   選取只有一個li的ul

表單對象屬性過濾選取器

input:enabled   為可用的input標籤

input:disabled 停用input標籤

.div:hidden  表示隱藏的div並且class=div

.div :hidden 表示影藏的class為div下面的所有隱藏標籤


表單選取器

.from1 :text 選擇form表單下所有的單行文字框

.from1 :password 選取from表單下的所有密碼框

建立節點

<ul id="tt"><li>sdfdsfds</li></ul>
var li1=$("<li>sdafasf</li>");
var li2 $("<li>sdaf是打發</li>");
$("#tt").append(li1).append(li2);

//載入在標籤裡面
$("#a1").append($("#b1").html())  把b1中的文本追加到a1文本後

$("#b1").append($("a1"))   把b1全部載入到a1後 包括標籤

$("#a1").prepend($("#b1").html())  把b1中的文本追加到a1文本前

//載入到標籤外面
$("#a1").after("#b1")  把b1 放到a1後面

$(#b1).insertAfter("#a1");把b1 放到a1後面

#("#a1").before($("b1")) 把b1 放到a1前面

//移除項
$("ul > li:eq(1)").remove(); 移除ul下索引為1的li標籤

//清空項

$("ul1 >li[title="aa"]").empty();

//複製節點
只是單純的複製 沒有複製事件
$("#ul1>li").click(function(){
$(this).clone().appendTo("#ul2");
})
//將事件也複製過來
$("#ul1>li").click(function(){
$(this).clone(true).appendTo("#ul2");
})

$("#b1").appendTo($("a1"))   把b1全部載入到a1前 包括標籤

//替換
$("#p").replaceWith("替換的類容")

 #("替換的類容").replaceAll("#p")

包裹節點
$("#ul1").wrap("<div>把ul標籤包裹在div裡面 </div>")

$("ul").wrapAll("<div>把所有的匹配的元素包含在一個元素裡面</div>")

$("#div1").wrapInner("<span>將div裡面的類容放在span裡面</span>")

屬性的操作
attr(獲得屬性) attrRemove(刪除元素屬性)
$("#ul>li:eq(3)").attr("title");找到ul下第三個li並且獲得title屬性

$("#ul>li").attr("title","sss") 找到ul下的li並且加上title屬性等於sss

設定多個屬性 $("#ul>li").attr("title","sss").attr("class","ttt")

$("#ul>li").attr("title":"sss","class":"ttt","name":"yyy")

刪除屬性
$(#ul1>li).removeAttr("title"); 刪除ul下所有li標籤的title屬性

添加樣式
$("#ul1>li:eq(0)").attr("class") 擷取樣式

$("#ul1>li:eq(0)").attr("class","ddd dff")  class裡加兩個

$("#ul1>li:eq(0)").addClass("dd") 追加樣式

移除樣式
$("#ul1>li").removeClass(); 移除ul下li標籤的全部樣式

$("#ul1>li").removeClass("dd"); 移除ul下li標籤的dd樣式

樣式切換
$(#btn1).toggle(funchtion()){第一次執行的},function(){第二次執行})交替執行

樣式判斷
$("#ul1>li:eq(0)").hasClass("functiongsize") 判斷第一個li是否含有functionsize屬性

$("keyword").focus(function(){  
if($(this).val()=="你好"){
$("#keyWord").focus(function(){$(this).val("").sttr("class","red");}) 得到焦點
}
}
if($(this).val.length<=0){
$("#keyWord").blur(function(){$(this).val("你好").sttr("class","ccc");}) 得到焦點
}

取得匹配子項目的集合
$("#did ul").children().css("brackground","red");

$("#sss").next();找到緊鄰的後面元素

$("#p").prev().html(); 找到緊鄰前面的元素

$("#p1").siblings()找到所有同輩的元素

$(document).bind("click",function(e){$(e.target).closest("li").css("color","red")})
選取當前點中的元素並將其改變顏色

$("#divcss").css({"color":"red","fontsize":"15px"})

設定透明度 :$("#div").css("opacity","0.5") 半透明

$("#div").offset().left 擷取當前這個元素的相對位移 (相對整個瀏覽介面)

(外層div加 position:relative)(內層div position:absolute絕對位置)
$("#div").position().left;

div 有個屬性可以使其有捲軸 overflow:auto

$("#diva").scrollTop();拉動捲軸時對應的位置

設定位移
$("#btn1").click(function(){$("#diva").scrollTop(150)})

jquery事件

$(function(){})檔案載入完成後執行裡面的類容(標籤解析完了後執行)
$(window).load(function(){})圖片載入完成後執行

摺疊盒展開(cursor:pointer(滑鼠移動到上面為手形))
綁定事件
$("#div").bind("click",function(){
if($(this).next().is("visible)){
   $(this).next().hide();
}else{
$(this).next().show();
}
})

移動上去顯示 移開隱藏事件 mouseover

事件彙總
$("#div").hover(function(){},function(){});滑鼠移動上去執行前面一個 移開執行後面一個函數
$("#div").toggle(function(){},function(){})點擊切換兩個函數

移除事件
$("#div").unbind("事件名字");

事件冒泡
stopproopagation()阻止冒泡

阻止預設行為
$("#div").bind("click",function(e){e.preventDefault();})

change 當裡面的項發生過改變時執行

 

那些學些網址_jquery初學知識