Javascript

常用方法（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;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 - 学习总目录