){
alert
($(
this
).
html
())
$(
"<input type="
text
" name="
msg3
">"
).
appendTo
(
"div"
)
使用jQuery核心函数
说明:选择器本身只是一个有
特定语法规则
的字符串,没有实质用处。它的基本语法规则使用的就是CSS的选择器语法,并对其进行了扩展,只有调用$,并将选择器字符串作为参数传入才能起作用。
$(selector):根据选择器规则在整个文档中查找所有匹配的标签的数组(
伪
),并封装为jQuery对象
基本选择器
element
.class
selector1selector2selectorN(交集)找含有某种属性的元素
$("#div1" ).css ("background" ,"red" )
$("div" ).css ("background" ,"red" )
$(".box" ).css ("background" ,"red" )
$("div,span" ).css ("background" ,"red" )
$("div.class" ).css ("background" ,"red" )
$("*" ).css ("background" ,"red" )
层次选择器
查找子元素,后代元素,兄弟元素的选择器
ancestor descendant
parent > child
prev + next
prev ~ siblings(匹配prev元素之后的所有siblings(兄弟 )元素)
$("ul span" ).css ("background" ,"red" )
$("ul>span" ).css ("background" ,"red" )
$(".box + li" ).css ("background" ,"red" )
$("ul .box~*" ).css ("background" ,"red" )
过滤选择器
在原有选择器匹配器的元素中进一步进行过滤的选择器,多个过滤选择器顺序执行 !
$("div:first" ).css ("background" ,"red" )
$(".box:last" ).css ("background" ,"red" )
$("div:not(.box)" ).css ("background" ,"red" )
$(".box:eq(index)" ).css ("background" ,"red" )
$("li:gt(0):lt(2)" ).css ("background" ,"red" )
$("li:contains(" xxx")" ).css ("background" ,"red" )
console .log ($("li:hidden" ).length ,$("li:hidden" )[0 ])
$("li[title]" ).css ("background" ,"red" )
$("li:[title = " hello"]" ).css ("background" ,"red" )
表单选择器
$(":text:disabled" ).css ("background" ,"red" )
$(":checkbox:checked" ).length
$(":submit" ).click (function (){
var city = $("select>option:selected" ).html ()
console .log (city)
jQuery核心对象
理解:jQuery对象内部 包含的是DOM元素对象的伪数组 (可能只有一个元素),该对象拥有很多有用的 属性和方法,让程序员能更加方便的操作DOM
【注】jQuery对象与DOM元素对象方法不一样!
属性/方法
size()/ length :DOM元素个数
[index] / get(index) :根据下标获取 对应DOM元素
each():遍历包含的所有DOM元素 ,注意与$.each()区分
index():得到在所在兄弟元素中的下标
var $btns = $("button" )
console .log ($btns.length ,$btns.size ())
$btns[1 ].innerHTML
$btns.each (function (inex,domEle ){
console .log (index,domEle.innerHTML ,this )
console .log ($("#btn3" ).index ())
var json = '{"name":"Tom","age":12}'
var josn1 = '[' {"name" :"Tom" ,"age" :12 }',' {"name" :"jack" ,"age" :12 }']'
$.parseJSON (json)
JSON .parse (jsonString)
JSON .stringify (jsObject/jsArray)
jQuery对象属性
$('div:first' ).attr ('title' )
$('div' ).attr ('name' ,'a' )
$('div' ).removeAttr ('title' )
$('div' ).attr ('class' ,'aaa' )
$('div' ).addClass ('bbb' )
$('div' ).removeClass ('class' ,'aaa' )
$('li:last' ).html ()
$('li:first' ).html ('<h1>aaa</h1>' )
$(':text' ).val ()
$(':text' ).val ('abc' )
var $checkboxs = $(':checkbox' )
$('button:first' ).click (function (){
$checkboxs.prop ('checked' ,true )
var $checkboxs = $(':checkbox' )
$('button:last' ).click (function (){
$checkboxs.prop ('checked' ,false )
复制代码
462
魔术师卡颂
JavaScript
React.js