JQuery常用内容(更新中)

dom和jquery的相互 转换
#dom->jquery
$(dom)
#jquery->dom
$jquery.get(0)

选择第一个div元素 
$("div:first")
选择最后一个div元素 
$("div:last")
选择class不为one的所有div元素 
$("div:not('.one')")
选择索引值为偶数的div元素 
$("div:even")
选择索引值为奇数 的div元素 
$("div:odd")
选择索引值等于3的元素 
$(div:eq(3))
选择索引值大于3的元素 
$(div:gt(3))
选择索引值小于3的元素 
$("div:lt(3)")
选择所有的标题元素 
$(":header") 
选择当前正在执行动画的所有元素 
$(":animated")

选取含有文本“di”的div元素 
$("div:contains('di')")
选取含有class为mini元素 的div元素 
$("div:has(.class)")
选取不包含子元素(或者文本元素)的div空元素 
$("div:empty")
选取含有子元素(或者文本元素)的div元素 
$("div:parent")

选取所有可见的div元素 
$("div:visible")
选取所有不可见的元素 
$("div:hidden")
选取所有的文本隐藏域, 并打印它们的值
$("input:hidden").each(function(){
                alert($(this).val());
            });


选取含有 属性title 的div元素 
$("div[title]")
选取 属性title值等于“test”的div元素 
$("div[title='test']")
选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)  
$("div[title!='test']")
选取 属性title值 以“te”开始 的div元素 
$("div[title^='te']")
选取 属性title值 以“est”结束 的div元素 
$("div[title$='te']")
选取 属性title值 含有“es”的div元素 
$("div[title*='te']")
组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有“es”的元素 
$("div[id][title*='es']")

$("input[type='text']").on("focus blur",function(){
    var dv=$(this).attr("defaultValue");
    if($(this).is(":focus")){
        $(this).val(dv);
    }
})

选取每个class为one的div父元素下的第2个子元素
$("div[class='one'] :nth-child(2)")
$("div.one:nth-child(2)")

选取每个class为one的div父元素下的第一个子元素
$("div.one :first-child")


选取每个class为one的div父元素下的最后一个子元素
$("div.one :last-child")

如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素
$("div.one :only-child")

对表单内 可用input 赋值操作
$("input:enabled")

对表单内 不可用input 赋值操作
$("input:disabled")

获取多选框选中的个数
alert($("[name='newsletter']:checked").length);

获取下拉框选中的内容
$(":selected").each(function(){
    $("#selectDivId").append(	$(this).val()   );
});


显示隐藏
$(document).ready(function(){
    var $allLi=$("li:gt(4):not(:last)");
    $allLi.hide();
    $("span").click(function(){
        if($allLi.is(":hidden")){
            $allLi.show();
            $(this).html("影藏");
        }else{
            $allLi.hide();
            $(this).html("显示");
        }
    });
});

html(...) 设置html代码,如果有标签,将进行解析。

text(...) 设置文本值,如果有标签,将被转义  -->   <  &lt;   &  &amp;  >  <     

A.append(B)  将B插入到A的内部后面(之后的串联操作,操作A)
    <A>
        ....
        <B>B>
    <A>
A.prepend(B) 将B插入到A的内部前面
    <A>
        <B>B>
        ....
    <A>
--------------------------------------------
A.appendTo(B) 将A插入到B的内部后面 (之后的串联操作,操作A)
A.prependTo(B) 将A插入到B的内部前面

--------------------------------------------
A.after(B)  , 将B插入到A后面(同级)
    <A>A>
    <B>B>
A.before(B) ,将B插入到A前面
    <B>B>
    <A>A>
-----------------------------------
A.insertAfter(B) , 将A插入到B后面(同级)
    <B>B>
    <A>A>
A.insertBefore(B) 将A插入到B前面
    <A>A>
    <B>B>


empty()  清空标签体
remove() 删除当前对象。如果之后再使用,元素本身保留,绑定事件 或 绑定数据 都会被移除
detach() 删除当前对象。如果之后再使用,元素本身保留,绑定事件 或 绑定数据 都保留


绑定数据
data(name) 获得
data(name,value) 设置


A.replaceWith(B) ,使用A将B替换掉
A.replaceAll(B) ,使用B将A替换掉

A.wrap(B) ,使用B将每一个A进行包裹(多个B)
<B><A>A>B>
<B><A>A>B>

A.wrapAll(B) ,使用B将所有A进行包裹(一个B)
<B>
    <A>A>
    <A>A>
B>


A.add(B)  将A和B组合一个对象 。类型 $("A,B")
andSelf() : 将之前对象添加到操作集合中
    A.children().andSelf()  
    A   孩子    孩子和A
end() :回到最近的一个"破坏性"操作之前
    A.children().children().end() .end()  
    A   孩子   孙子     孩子  A


<A>
    <B>
        <C>C>
        <D>D>
        <E>E>
        <F>F>
    B>
A>
B.children([...])   获得所有的子元素。CDEF
A.find(D)  从指定的区域查询指定元素。D
D.next()    下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev()    上一个兄弟。D  (previous)
E.prevAll()  前面的所有兄弟。CD
E.siblings()    所有兄弟。CDF
E.parent()  父元素。B
E.closest(A)  向上获得指定的父元素(含自己),如果获得返回一个对象,如果没有没有对象。
------------------------------

C.nextUntil(E)  获得后面所有兄弟,直到指定条件位置。DE
F.prevUntil(D)  获得前面所有兄弟,直到指定条件位置。DE

E.parents()   获得所有的父元素。AB


文本选中的内容:
$("#e01").select(function(event){
    //支持谷歌
    var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd);
    $("#textMsg").html("文本内容被选中:select , " + sub);
});

1只能点击一次,之后失效
$("#h01").one("click",function(){
    alert("--");
});

点击:先弹出+++再弹出---
$("#h02").bind("click.a",function(){
    alert("++++");
);
$("#h02").bind("click.b",function(){
    alert("---");
}







你可能感兴趣的:(草稿)