jquery 根据class名 赋值_jQuery简单用法!!!
1. jQuery的選擇器D
(1) 想要獲得input標簽中name屬性名字包含a 的標簽對象應該如何書寫
$(“input[name*=a]”)
(2) 請說出$("input[type=text][name^=z]")選擇器的含義
獲得input中類型為text且name屬性值開頭為z的
2. jQuery的選擇器E
(1) $("input:disabled")這個選擇器的作用是什么?
獲得所以input中包含disabled的input標簽
(2) $(":input")和$("input");這兩個選擇器的區別是什么?
$(“:input”):獲取表單中的所有元素
$(“input”):只獲得表單中的input元素
3. :操作頁面的樣式1
(1) 如何可以獲得一個div元素的寬和高的css樣式,JQ獲得方式和JS獲得方式之間的差異在什么地方.
Js獲得:document.getelementbyid(“div”).style.width=”200px”
Jq:獲得: $(“#div”).css(“width”)
代碼量
(2) 想要操作一個元素對象的css樣式有幾種方式.
二種 $(“#div”).css(“樣式名”,”樣式值”)
---json的數據格式
$(“#div”).css({“樣式名”:”樣式值”,”樣式名”:’樣式值’})
4. 操作頁面的樣式2
(1) 想通過增加class的方式給指定元素增加樣式,有幾種書寫方式,請寫出具體代碼。
$(function(){
$("#div2").click(function(){
//通過添加class屬性來添加樣式
// $("#div2").attr("class","div")
$("#div2").addClass("div")
})
})
</script>
<style>
#div2{
width: 200px;
height: 200px;
border: 2px solid green;
}
.div{
width: 500px;
background-color: red;
}
</style>
<body>
<div id="div2"></div>
</body>
(2) 請寫出你所學習過的操作元素css的方式,分別說明其每一個的使用的場景是什么?
jQuery:
操作單個
$(“id”).css(“操作的css”,”修改屬性”)
操作多個
用json的格式操作
$(“id”).css({“操作的css”:”修改的屬性”,”操作的css2”:”修改的屬性2”})
javaScript
Docuement.getelementById(“id”).style.屬性=”修改值”
5. 操作頁面元素的屬性1
(1) 請問attr("value")和val()的區別是?
Atter(“value”):獲得的是該元素value的固定值
Val():獲得的是輸入值
(2) <input id=”inp1” value=’123’ type=’text’ class=”d1”/>
$("#inp1").attr("type")
$("#inp1").attr("value ")
$("#inp1").attr("class ")
輸出的結果是什么?請寫出常使用的間接獲得對象的方式
Text123d1
//div中所有的span標簽
// $("div span").css("background-color","red")
// //div下的直系span
// $("div>span").css("background-color","green")
//span標簽緊挨著的span標簽
$("#spana+span").css("background-color","green")
//span標簽同級的所有span標簽,不包括自己
$("#spana~span").css("background-color","green")
6. 操作頁面元素的屬性2
(1) 想要操作元素的屬性有幾種方式,請列舉。
var tt=$("#tt")
$("body").click(function(){
tt.attr("type","button")
tt.attr("value","測試按鈕")
//用json的格式獲得
tt.attr({"type":"button","value":"分數"})
(2) attr("checked")和prop("checked")這兩個操作方式有什么區別?使用場景是什么?
Attr;返回的是checked的值
Prop:返回的是checked的boolean值
(3) prop("checked",true) 這句代碼是什么意思。
將checked的狀態變為選中
7. 操作頁面的文本和值1
(1) 請寫出html()和text()在獲得值得時候兩者的區別,和使用的場景。
和javaScript中的innerhtml(會識別js標簽)和innertext(只會識別純文本))
(2) 請說出val()和html()在獲得值得時候兩者的差異。
Val()適用于單標簽,用于表單,只獲得value值
Html()適用于雙標簽,不能用于表單,識別js標簽
8. 操作頁面的文本和值2
(1) 請寫出html()和text()在賦值得時候兩者的區別,和使用的場景。
Html(“賦值”):可以識別js標簽
Text(“賦值”):不會識別js標簽,全部作為文本賦值
(2) 請說出val()和html()在賦值得時候兩者的差異。
Val(賦值):設置每個匹配元素中每個集合的值
Html(賦值):設置每一個匹配元素中的html內容
被多個元素調用時,會改變每一個元素的值()取值的話,只會取到第一個
9. 操作頁面的元素1
(1) 請問appendTo 和append兩個方法之間的區別是什么?
Append:是在元素后添加某個元素
Appendto;將元素添加到某個元素下
$("#div1").append(p)
// //語法不一樣,邏輯不一樣,作用一樣
p.appendTo($("#div1"));
(2) 請問prepend和prependTo兩個方法之間的區別是什么?
Prepend:是在元素前添加某個元素(添加在該元素下)
Prependto;將元素添加到某個元素下
// //添加p在div1 ---在現有標簽前(div內)
$("#div1").prepend(p)
p.prependTo($("#div1"))
(3) 請說出before和afterd的使用場景是什么
你需要添加該元素的同級元素before添加在之前,after添加在之后
//添加p在div1 ---在現有標簽前(div外,同級元素)
p.insertBefore($("#div1"))
$("#div1").before(p)
//添加p在div1 ---在現有標簽后(div外,同級元素)
p.insertAfter($("#div1"))
$("#div1").after(p)
10. 操作頁面的元素2
(1) 請問replaceAll("div p:nth-child(5)");代碼是什么意思?
用一個新元素替換duv中的第五個p元素
/****************替換指定節點***********************/
$("#div1 p:nth-child(1)").replaceWith(p)
p.replaceAll("#div1 p:nth-child(1)")
(2) 請問replaceWith()和replaceAll()方法之間的區別是什么?
沒什么區別,用法不同
$("#div1 p:nth-child(1)").replaceWith(p)
p.replaceAll("#div1 p:nth-child(1)")
(3) 請問 remove()和empty()之間的區別是什么?
Empty:只移除文本.保留元素
Remove():整個元素移除
11. 事件處理1
(1) 請說出 bind() 事件的作用和使用場景是什么?請列舉
需要在一個元素上綁定多個事件采用json格式綁定
//可以用bind實現json格式綁定事件
$("#bind").bind({
'click':function(){alert("單機時間")},
'dblclick':function(){},
'blur':function(){alert("鼠標以上")}
})
(2) one()事件的使用的場景是什么?
不想讓事件一直被使用,one()作用使事件使用一次就沒了
$("#one").one({
'click':function(){alert("單機時間")},
'dblclick':function(){},
'blur':function(){alert("鼠標以上")}
})
12. 事件處理2
(1) 請說出trigger()這個事件的作用和使用,我們可以在什么位置來使用這個標簽?
Trigger(),從另一個事件中可以使用指定對象的事件,
$("#tager").click(function(){
$("#in1").trigger('dblclick');
})
(2) 在JQ中如何可以解綁一個對象上的所有事件,如何解綁一個對象上的單個事件?
對象.Unbind(‘指定事件’)
$("#unbind").click(function(){
//不寫參數,默認全部事件解綁
$("#in").unbind('click');
})
(3) live這個方法是解決什么問題的,現在還繼續使用嗎?
解決使用通過事件添加的方法,無法獲得他的屬性,只有1.7之前支持,之后的不支持
//方法添加元素 live 可以掃描到此方法`添加的按鈕的屬性,js版本1.7支持,后面的版本不支持
$(".in_to").live('click',function(){
alert("單機事件綁定")
$('body').append('<input type="button" name="" class="in_to" value="添加單擊事件綁定" />')
})
Val()和text()和html()的區別
都是為了得到值,和賦值
Val():只能用于表單,
Text()和html():不能用于表單
Val(),html():當應用于多個參數時,只會返回第一個
Text():全部返回
Html(替換值):如果應用在多個元素上,則每個元素都會被替換(每個元素都會有一個替換值)
例子:
Script內:
$(function(){
var w=$(".ds").eq(1).html();
console.log(w)
})
Body內:
<div class="ds">
wudi1
</div>
<div class="ds">
wudi2
</div>
輸出:
Wudi1
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的jquery 根据class名 赋值_jQuery简单用法!!!的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 部队文职人员工资标准与现役的比较
- 下一篇: 吕蒙哪里人 探寻吕蒙的籍贯和家族背景?