Javascript - Jquery - 常用方法

常用方法（Common Method）

与class有关的方法

addClass(className)
//为该Jquery指定或增加一个className，返回该Jquery

removeClass(className)
//移除参数指定的className，返回该Jquery

hasClass(className)
//测试该Jquery是否含有参数指定的className

toggleClass(className)
//该Jquery的className在原来的className与参数指定的className之间切换，一般用在事件里

示例

<style>
        .spanColor{ color: Red; }
        .spanRelColor{ color: Green; }
</style>

<span class='spanColor'>hello</span>
<input type="button" value='click' />

$(document).ready(function () {
    //切换className
    var JQueryObj = $('input');
    var span = $('.spanColor');
    JQueryObj.click(function () {
        span.toggleClass('spanRelColor');
    })
});

与表单有关的属性/方法

val([value])
//获取或设置当前表单元素的值

与距离有关的属性/方法

pageY
//鼠标对象的属性，获取鼠标离文档客户区顶部的高度

var box = $("#box");
var span= $("#span");
box.mousemove(function (e) {
    span.text("x:" + e.pageX + "y:" + e.pageY);
});

pageX
//鼠标对象的属性，获取鼠标离客户区左边的宽度

offset()
//返回一个Jquery，包含了left和top属性，分别表示该Jquery离客户区的左边距和顶边距
//示例：
$('div').offset().left

height()
//获取Jquery的高度

innerHeight()
//获取Jquery的高度＋padding

outerHeight([bool])
//参数默认false，获取Jquery的高度＋padding＋border。true时，获取Jquery的高度＋padding＋border＋margin

scrollTop([number])
//设置或获取出现滚动条的Jquery，其滚动条从顶部的开始位置滚动了多少距离

scrollLeft([number])
//设置或获取出现滚动条的Jquery，其滚动条从左部开始位置滚动了多少距离

position()
//返回一个Jquery，该Jquery包含了left和top属性，分别表示该Jquery离其父元素的左边距和顶边距

与样式有关的属性/方法

css(cssName | { cssName: cssValue })
//获取被选元素中的首个dom元素的css
//设置被选元素中所有的dom元素的css

< div  class = "box"  style = " background: #b6ff00; " ></ div >
< div  class = "box"  style = " background: blue; " ></ div >
< div  class = "box"  style = " background: red; " ></ div >
< script  type = "text/javascript" >       
     $ ( document ). ready ( function  ()  {
         var  color  =  $ ( ".box" ). css ( "background-color" ); //获取第一个div的背景色
         alert ( colorRGB2Hex ( color ));
     });

     //RGB值转16进制颜色代码
     function  colorRGB2Hex ( color )  {
         var  rgb  =  color . split ( ',' );
         var  r  =  parseInt ( rgb [ 0 ]. split ( '(' )[ 1 ]);
         var  g  =  parseInt ( rgb [ 1 ]);
         var  b  =  parseInt ( rgb [ 2 ]. split ( ')' )[ 0 ]);
         var  hex  =  "#"  +  (( 1  <<  24 )  +  ( r  <<  16 )  +  ( g  <<  8 )  +  b ). toString ( 16 ). slice ( 1 );
         return  hex ;
     }
</ script >

height(heightNumber | fn(index, heightNumber))
//获取被选元素中的首个dom元素的内部高度
//设置被选元素中所有的dom元素的内部高度
//高不包括padding和border
//fn：index参数指当前迭代的dom元素在Jquery被选元素中的索引

width(widthNumber | fn(index,widthNumber))
//获取被选元素中的首个dom元素的宽度
//设置被选元素中所有的dom元素的宽度
//宽不包括padding和border
//fn：index参数指当前迭代的dom元素在Jquery被选元素中的索引

innerHeight()
//获取被选元素中的首个dom元素的内部高度
//高包括padding，不包括border

innerWidth()
//获取被选元素中的首个dom元素的内部宽度
//宽包括padding，不包括border

outerHeight(bool)
//获取被选元素中的首个dom元素的内部高度    
//高包括border、padding，bool默认false，true时，包括margin

outerWidth(bool)
//获取被选元素中的首个dom元素的内部宽度
//宽包括border、padding，bool默认false，true时，包括margin

 

与节点有关的属性/方法

$()虽然可以选择html元素，但是返回的Jquery要进一步选择又怎么办？此时，可以调用API方法。

选择的方法

parent()
//获取被选元素的父节点

parents(selector)
//获取被选元素的指定的祖先节点
//示例：
$("div").parents(".box");

children(tag, selector)
//获取被选元素的子节点，不包括后代节点。参数不存在时，则获取所有子节点
//示例：
var tr = $("#tr");
tr.children("td:eq(1)") //获取该tr的索引为1的td节点

next()
//获取被选元素的下一个兄弟节点

nextAll(selector)
//获取被选元素后面的由参数选择器选择的兄弟节点，参数不存在，则获取所有兄弟节点
//示例：
$("#box").nextAll("a[id=10]")//选择ID为box的节点，然后选择它的兄弟节点，该兄弟节点的id=10

prev()
//获取被选元素的上一个兄弟节点

prevAll(selector)
//获取被选元素的前面的由参数选择器选择的兄弟节点，参数不存在时，则获取所有前面的兄弟节点

nextUntil(selector)
//获取被选元素的后面的兄弟节点，直到遇到选择器给出的节点时停止，不包括选择器给出的节点

prevUntil(selector)
//获取被选元素的前面的兄弟节点，直到遇到选择器给出的节点时停止，不包括选择器给出的节点

siblings(selector)
//获取被选元素的兄弟节点，参数不存在，则获取所有兄弟节点

插入的方法

append ( html  |  text  |  Jquery )
//在我包含的尾部插入参数指定的元素

appendTo ( html  |  Jquery )
//将我插入参数指定的节点所包含的末尾

$ ( document ). ready ( function  ()  {
     var  div  =  $ ( "<div style='background:red;width:100px;height:40px;'></div>" );
     var  p  =  $ ( "<p>test</p>" );
     p . appendTo ( div );
     div . appendTo ( document . body );
});

 

prepend ( html  |  text  |  Jquery )
//在我包含的首部插入参数指定的数据

prependTo ( html  |  Jquery )
//将我插入参数指定的节点所包含的首部

before ( html  |  text  |  Jquery )
//在我之前插入参数指定的数据

insertBefore ( html  |  Jquery )
//将我插入参数指定的节点的前面

after ( html  |  text  |  Jquery )
//在我之后插入参数指定的数据

insertAfter ( html  |  Jquery )
//将我插入参数指定的节点的后面

wrap ( html  |  Jquery )
//将我用参数指定的节点包裹，也即每一个我都单独包一个参数节点：<div><p></p><div>   <div><p></p><div>

wrapAll ( html  |  Jquery )
//将我们用参数指定的节点包裹，也即每一个我全部包在一个参数节点里：<div><p></p><p></p><div>

wrapInnerl ( html  |  Jquery )
//将我包含的文本用参数指定的节点包裹，也即每一个我所包含的文本都单独包一个参数节点 <div>aaaaa<div>   <div>aaaaa<div>

获取或设置

$(htmlCode)
//创建一个Html节点并将其包装为Jquery返回，htmlCode必须全小写
//示例：
$(document).ready(function () {
    var html = "<div>hello</div>";//创建元素节点和文本节点
    html += "<p/>";//单闭合节点可以写成<p/>或<p></p>
    var h= $(html);
    $(document.body).append(h)//插入body里     

});

attr(attriName, attriValue)
//获取或设置结果集中的元素的属性值
//示例：

var html = $(".cbox").attr({ "id": "box", "class": "rbox" }); //attr方法可接收属性名以获取属性值、匿名对象（设置属性与属性值）、属性名和属性值
$(document.body).append(html);

removeAttr(attri)
//删除我的属性
        
text(html | Jquery)
//获取我所包含的文本（包括后代节点的文本）
//设置我所包含的所有数据。这会替换掉原来包含的html和文本
//返回一个Jquery

html(html | Jquery)
//获取我所包含的html（包括后代html）
//设置我所包含的所有数据，这会替换掉原来包含的html和文本
//返回一个Jquery

index(selector)
//在我包含的内容里查找由选择器选择的元素的索引

remove()
//删除我，包括我包含的一切

empty()
//清空我包含的一切

replaceWith(html | text | Jquery)
//将我替换为参数指定数据

replaceAll(html | text | Jquery)
//将参数指定的数据替换为我自己

clone(bool)
//克隆另一个我，bool默认false，true时，会额外克隆我订阅的事件

迭代元素

each(fn)
//迭代Jquery，每次迭代自动调用fn函数，等同于：$.each(obj,fn(index,item))
//示例

$ ( document ). ready ( function  ()  {
     var  divList  =  $ ( ".box" );
     divList . each ( function  ()  {
         alert ( $ ( this ). id );
     });
});

　　

解决Jquery标识符冲突

如果一个页面中不但引用了jquery.js，还引用了有可能引发冲突的其它js脚本，可作如下设置

//使用一个变量替代$即可
var jq = $.noConflict();

　　

Javascript - 学习总目录

转载于:https://www.cnblogs.com/myrocknroll/p/6942700.html