python学习笔记-Day16-jquery（文档处理/事件/插件）-CSDN博客

文档处理

ppend(content|fn)

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

参数

contentString, Element, jQueryV1.0

要追加到目标中的内容

function(index, html)FunctionV1.4

返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

示例

描述:

向所有段落中追加一些HTML标记。

HTML 代码:

I would like to say:

jQuery 代码:

$("p").append("Hello");

结果:

[ I would like to say: Hello ]

appendTo(content)

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。

参数

contentString

用于被追加的内容

示例

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

I would like to say:

jQuery 代码:

$("p").appendTo("div");

结果:

<div>I would like to say: </div>

描述:

新建段落追加div中并加上一个class

HTML 代码:

jQuery 代码:

$("")

.appendTo("div")

.addClass("test")

.end()

.addClass("test2");

结果:

prepend(content)

向每个匹配的元素内部前置内容。

这是向所有匹配元素内部的开始处插入内容的最佳方式。

参数

contentString, Element, jQueryV1.0

要插入到目标元素内部前端的内容

function(index, html)FunctionV1.4

返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。

示例

描述:

向所有段落中前置一些HTML标记代码。

HTML 代码:

I would like to say:

jQuery 代码:

$("p").prepend("Hello");

结果:

[ HelloI would like to say: ]

描述:

将一个DOM元素前置入所有段落

HTML 代码:

I would like to say:

Hello

Good Bye

jQuery 代码:

$("p").prepend( $(".foo")[0] );

结果:

HelloI would like to say:

Hello

Good Bye

描述:

向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

I would like to say: Hello

jQuery 代码:

$("p").prepend( $("b") );

结果:

HelloI would like to say:

prependTo(content)

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。

参数

contentString

用于匹配元素的jQuery表达式

示例

描述:

把所有段落追加到ID值为foo的元素中。

HTML 代码:

I would like to say: <div id="foo"></div>

jQuery 代码:

$("p").prependTo("#foo");

结果:

<div id="foo">I would like to say: </div>

after(content|fn)

在每个匹配的元素之后插入内容。

参数

contentString, Element, jQueryV1.0

插入到每个目标后的内容

functionFunctionV1.4

函数必须返回一个html字符串。

示例

描述:

在所有段落之后插入一些HTML标记代码。

HTML 代码:

I would like to say:

jQuery 代码:

$("p").after("Hello");

结果:

I would like to say: Hello

描述:

在所有段落之后插入一个DOM元素。

HTML 代码:

HelloI would like to say:

jQuery 代码:

$("p").after( $("#foo")[0] );

结果:

I would like to say: Hello

描述:

在所有段落中后插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

HelloI would like to say:

jQuery 代码:

$("p").after( $("b") );

结果:

I would like to say: Hello

before(content|fn)

概述

在每个匹配的元素之前插入内容。

参数

contentString, Element, jQueryV1.0

插入到每个目标后的内容

functionFunctionV1.4

函数必须返回一个html字符串。

示例

描述:

在所有段落之前插入一些HTML标记代码。

HTML 代码:

I would like to say:

jQuery 代码:

$("p").before("Hello");

结果:

[ HelloI would like to say: ]

描述:

在所有段落之前插入一个元素。

HTML 代码:

I would like to say: Hello

jQuery 代码:

$("p").before( $("#foo")[0] );

结果:

HelloI would like to say:

描述:

在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。

HTML 代码:

I would like to say: Hello

jQuery 代码:

$("p").before( $("b") );

结果:

HelloI would like to say:

empty()

删除匹配的元素集合中所有的子节点。

示例

描述:

把所有段落的子元素（包括文本节点）删除

HTML 代码:

Hello, Person <a href="#">and person</a>

jQuery 代码:

$("p").empty();

结果:

remove([expr])

从DOM中删除所有匹配的元素。

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

参数

exprStringV1.0

用于筛选元素的jQuery表达式

示例

描述:

从DOM中把所有段落删除

HTML 代码:

Hello how are you?

jQuery 代码:

$("p").remove();

结果:

how are

描述:

从DOM中把带有hello类的段落删除

HTML 代码:

Hello how are you?

jQuery 代码:

$("p").remove(".hello");

结果:

how are you?

clone([Even[,deepEven]])

克隆匹配的DOM元素并且选中这些克隆的副本。

在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。

参数

EventsBooleanV1.0

一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false

Events[,deepEvents]Boolean,BooleanV1.5

1:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。

示例

描述:

克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。

HTML 代码:

Hello, how are you?

jQuery 代码:

$("b").clone().prependTo("p");

结果:

HelloHello, how are you?

描述:

创建一个按钮，他可以复制自己，并且他的副本也有同样功能。

HTML 代码:

<button>Clone Me!</button>

jQuery 代码:

$("button").click(function(){

$(this).clone(true).insertAfter(this);

});

##############################################

事件

注册事件的三种方法

第一种：

在html页面的标签上直接对标签注册事件

<input type="button" οnclick="CheckAll('#edit_mode', '#tb1');" value="全选" />

第二种：

        $(function(){
            //文档加载完毕后，自动执行此段代码
//            第二种注册事件方式
//            批量对某一类标签定义事件时使用
            $("#id").click(function(){
                     console.log("123")
                    }
            );           
        })

第三种

        ((){
            
().(, () {
                .()
            });
            
        })

jquery支持的事件

blur([[data],fn]) blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的，可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

change([[data],fn]) change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发；可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

click([[data],fn]) 调用执行绑定到click事件的所有函数

dblclick([[data],fn]) dblclick事件会在元素的同一点双击时触发。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

error([[data],fn]) 调用所有绑定到error事件上的函数；可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。

如果异常是由window对象抛出，事件处理函数将会被传入三个参数：

1. 描述事件的信息 ("varName is not defined", "missing operator in expression", 等等.),

2. 包含错误的文档的完整URL

3. 异常发生的行数如果事件处理函数返回true，则表示事件已经被处理，浏览器将认为没有异常。

focus([[data],fn]) 可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法

focusin([data],fn) 当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

focusout([data],fn) 当一个元素，或者其内部任何一个元素失去焦点的时候会触发这个事件。这跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

keydown([[data],fn]) 会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发。

keypress([[data],fn]) 会调用执行绑定到keydown事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keydown事件会在键盘按下时触发

keyup([[data],fn]) 会调用执行绑定到keyup事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。keyup事件会在按键释放时触发。

mousedown([[data],fn]) mousedown事件在鼠标在元素上点击后会触发

mouseenter([[data],fn]) 与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

mouseleave([[data],fn]) 与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

mousemove([[data],fn]) mousemove 事件通过鼠标在元素上移动来触发。事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标

mouseout([[data],fn]) mouseout事件在鼠标从元素上离开后会触发

mouseover([[data],fn]) mouseover事件会在鼠标移入对象时触发

mouseup([[data],fn]) mouseup事件会在鼠标点击对象释放时

resize([[data],fn]) 当文档窗口改变大小时触发

scroll([[data],fn]) 当滚动条发生变化时触发

select([[data],fn]) 会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

submit([[data],fn]) 会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。

unload([[data],fn]) 在每一个匹配元素的unload事件中绑定一个处理函数

扩展/插件

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

查看这里<a href="http://docs.jquery.com/Plugins/Authoring" title="Plugins/Authoring">Plugins/Authoring</a>可以获取更多信息。

参数

objectObjectV1.0

用来扩充 jQuery 对象。

示例

描述:

增加两个插件方法。

jQuery 代码:

jQuery.fn.extend({

check: function() {

return this.each(function() { this.checked = true; });

uncheck: function() {

return this.each(function() { this.checked = false; });

}

});

结果:

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

jQuery.extend(object)

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。查看 'jQuery.fn.extend' 获取更多添加插件的信息。

参数

objectObjectV1.0

用以扩展 jQuery 对象

示例

描述:

在jQuery命名空间上增加两个函数。

jQuery 代码:

jQuery.extend({

min: function(a, b) { return a < b ? a : b; },

max: function(a, b) { return a > b ? a : b; }

});

结果:

jQuery.min(2,3); // => 2

jQuery.max(4,5); // => 5

转载于:https://blog.51cto.com/timesnotes/1746471