web 13.JQueryベース
6056 ワード
属性セレクタには、
属性を取得または設定キー名を入力するだけで取得できます.たとえば、
JQueryベース:
$( A[ ^= ]) ;
がxxxを先頭とする$( A[ $= ]) ;
がxxxを末尾とする$( A[ != ]) ;
がxxxではない$( A[ *= ]) ;
がxxxを含む属性を取得または設定キー名を入力するだけで取得できます.たとえば、
alert($("#one").css("backgroundColor"));
背景色を取得します.設定するにはキー値を入力する必要があります.たとえば、$("#one").css("backgroundColor","green");
色を設定します.toggleClass();
削除されていない属性を削除するappend
追加prepend
誰の内部の前または後ろにbefore`````` after
追加誰が誰の前または後ろにempty
追加すると、すべての要素が保持され、対応するDOM要素(現在の要素をコピー)がクリアされ、戻ります.今日の内容
1. JQuery :
1.
2.
3. JQuery JS
4.
5. DOM
6.
JQueryベース: 1. : JavaScript 。 JS
* jQuery 、 JavaScript , Prototype JavaScript ( JavaScript )。jQuery “write Less,Do More”, , 。 JavaScript , JavaScript , HTML 、 、 Ajax 。
* JavaScript : js , js
2.
1. :
1. JQuery
* jQuery :
1.x: ie678, , BUG ,
。 , 1.x ,
:1.12.4 (2016 5 20 )
2.x: ie678, , BUG ,
。 2.x,
:2.2.4 (2016 5 20 )
3.x: ie678, 。 ,
3.x , jQuery 。
。 :3.2.1(2017 3 20 )
* jquery-xxx.js jquery-xxx.min.js :
1. jquery-xxx.js: 。 , 。
2. jquery-xxx.min.js: 。 , 。 。
2. JQuery js : min.js
3.
var div1 = $("#div1");
alert(div1.html());
3. JQuery JS
1. JQuery , 。
2. JQuery js .
3.
* jq -- > js : jq [ ] jq .get( )
* js -- > jq : $(js )
4. : ( )
1. :
1.
//1. b1
$("#b1").click(function(){
alert("abc");
});
2.
$(function () {
});
window.onload $(function)
* window.onload , ,
* $(function) 。
3. :css
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
2.
1.
1. ( )
* : $("html ")
2. id
* : $("#id ") id
3.
* : $(".class ") class
4. :
* : $(" 1, 2....")
2.
1.
* : $("A B ") A B
2.
* : $("A > B") A B
3.
1.
* : $("A[ ]")
2.
* : $("A[ =' ']")
3.
* : $("A[ =' '][]...")
4.
1.
* : :first
2.
* : :last
3.
* : :not(selector)
4.
* : :even , 0
5.
* : :odd , 0
6.
* : :eq(index)
7.
* : :gt(index)
8.
* : :lt(index)
9.
* : :header (h1~h6) ,
5.
1.
* : :enabled
2.
* : :disabled
3.
* : :checked /
4.
* : :selected
5. DOM
1.
1. html(): / -->
2. text(): / -->
3. val(): / value
2.
1.
1. attr(): /
2. removeAttr():
3. prop(): /
4. removeProp():
* attr prop ?
1. , prop
2. , attr
2. class
1. addClass(): class
2. removeClass(): class
3. toggleClass(): class
* toggleClass("one"):
* class="one", one 。 class="one",
4. css():
3. CRUD :
1. append():
* 1.append( 2): 2 1 ,
2. prepend():
* 1.prepend( 2): 2 1 ,
3. appendTo():
* 1.appendTo( 2): 1 2 ,
4. prependTo():
* 1.prependTo( 2): 1 2 ,
5. after():
* 1.after( 2): 2 1 。 1 2
6. before():
* 1.before( 2): 2 1 。 1 2
7. insertAfter()
* 1.insertAfter( 2): 2 1 。 1 2
8. insertBefore()
* 1.insertBefore( 2): 2 1 。 1 2
9. remove():
* .remove():
10. empty(): 。
* .empty(): ,
6.
1. : JavaScript 。 JS
* jQuery 、 JavaScript , Prototype JavaScript ( JavaScript )。jQuery “write Less,Do More”, , 。 JavaScript , JavaScript , HTML 、 、 Ajax 。
* JavaScript : js , js
2.
1. :
1. JQuery
* jQuery :
1.x: ie678, , BUG ,
。 , 1.x ,
:1.12.4 (2016 5 20 )
2.x: ie678, , BUG ,
。 2.x,
:2.2.4 (2016 5 20 )
3.x: ie678, 。 ,
3.x , jQuery 。
。 :3.2.1(2017 3 20 )
* jquery-xxx.js jquery-xxx.min.js :
1. jquery-xxx.js: 。 , 。
2. jquery-xxx.min.js: 。 , 。 。
2. JQuery js : min.js
3.
var div1 = $("#div1");
alert(div1.html());
3. JQuery JS
1. JQuery , 。
2. JQuery js .
3.
* jq -- > js : jq [ ] jq .get( )
* js -- > jq : $(js )
4. : ( )
1. :
1.
//1. b1
$("#b1").click(function(){
alert("abc");
});
2.
$(function () {
});
window.onload $(function)
* window.onload , ,
* $(function) 。
3. :css
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");
2.
1.
1. ( )
* : $("html ")
2. id
* : $("#id ") id
3.
* : $(".class ") class
4. :
* : $(" 1, 2....")
2.
1.
* : $("A B ") A B
2.
* : $("A > B") A B
3.
1.
* : $("A[ ]")
2.
* : $("A[ =' ']")
3.
* : $("A[ =' '][]...")
4.
1.
* : :first
2.
* : :last
3.
* : :not(selector)
4.
* : :even , 0
5.
* : :odd , 0
6.
* : :eq(index)
7.
* : :gt(index)
8.
* : :lt(index)
9.
* : :header (h1~h6) ,
5.
1.
* : :enabled
2.
* : :disabled
3.
* : :checked /
4.
* : :selected
5. DOM
1.
1. html(): / -->
2. text(): / -->
3. val(): / value
2.
1.
1. attr(): /
2. removeAttr():
3. prop(): /
4. removeProp():
* attr prop ?
1. , prop
2. , attr
2. class
1. addClass(): class
2. removeClass(): class
3. toggleClass(): class
* toggleClass("one"):
* class="one", one 。 class="one",
4. css():
3. CRUD :
1. append():
* 1.append( 2): 2 1 ,
2. prepend():
* 1.prepend( 2): 2 1 ,
3. appendTo():
* 1.appendTo( 2): 1 2 ,
4. prependTo():
* 1.prependTo( 2): 1 2 ,
5. after():
* 1.after( 2): 2 1 。 1 2
6. before():
* 1.before( 2): 2 1 。 1 2
7. insertAfter()
* 1.insertAfter( 2): 2 1 。 1 2
8. insertBefore()
* 1.insertBefore( 2): 2 1 。 1 2
9. remove():
* .remove():
10. empty(): 。
* .empty(): ,
6.