码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2017-09-10 20:49:06      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:传参数   绑定   库冲突   empty   png   with   入参   div   cti   

  JQuery 语法:

1、使用JQuery必须先导入JQuery.x.x.x.js文件;
2、JQuery中的选择器:
$("选择器").函数();
①$是JQuery的缩写,即可以使用JQuery("选择器").函数();
②选择器,可以是任何的CSS支持的选择符;

3.文档就绪函数:方式在文档未完全加载完成之前,运行JQuery代码;
$(document).ready(function(){
 JQuery代码
});

简写形式:  $(function(){});

文档就绪函数和window.onload区别

①window.onload必须等到网页中的所有内容加载完成后才会执行代码(包括图片、视频等资源)
文档就绪函数,只需要在网页DOM结构加载完毕后,就可以执行代码
② window.onload只能写一个,写多个只会执行最后一个。
文档就绪函数,可以写多个,并且不会被覆盖。
4、原生JS对象与JQuery:
①使用$选中的是JQuery对象,只能调用JQuery的函数,而不能使用元素JS的事件与函数;
$("#p").click(); √
$("#p").click=function(){}×
解释:$("#p")是JQuery对象,.click是原生JS事件
同理, 使用document.getElement系列获取的是原生JS对象,也不能使用JQuery相关函数。
②原生JS对象 转为 JQuery对象
可以使用$包裹原生JS对象,即可转为JQuery对象;
var p =document.getElementsByTagName("p");
$(p).click(); √ 原生JS对象已转为JQuery对象;
③JQuery对象转为JS对象。使用.get(index)或[index]
$("#p").get(0).onclick=function(){}
$("#p").[0].onclick=function(){}
5、JQuery解决多库冲突
由于其他的JS库,也可能使用$作为自身标识,导致其他JS库与JSuery冲突。
要解决冲突,可以放弃使用$,直接使用JQuery对象。
[使用自执行函数传入JQuery对象简化写法]
jQuery.noConflict(); 调用这个函数,将$控制权让渡给其他类库,即JQuery不能再使用$

eg:

!function(j){
//函数之中,就可以用字母j,代替JQuery对象
});
}(JQuery);

JQuery操作及其他函数

使用$()直接创建一个标签节点

$(function(){});

将创建好的节点,插入到指定位置。

技术分享

在#div1内部的最后,直接插入一个节点。

$("#div1").append("<p>这是被插入的p标签</p>");

把新节点插入到#div1中

$("<p>这是被插入的p标签</p>").appendTo("#div1");

在#div1内部的开头,直接插入一个节点。

$("#div1").prepend("<p>这是被插入的p标签</p>");

$("#div1").after("<p>这是被插入的p标签</p>");

$("<p>这是被插入的p标签</p>").insertBefore("#div1");

把每个p标签外面,都包裹一层div

$("p").wrap("<div></div>");

把所有的p标签,包裹在同一个div中

$("p").wrapAll("<div></div>");

把#div1里面的所有子元素,用<div>包裹起来

$("#div1").wrapInner("<div></div>");

删除元素的父标签

$("#p").unwrap();

将所有匹配的p标签,全部换为span标签

$("p").replaceWith("<span>111</span>");

用span元素,替换掉所有p标签

$("<span>111</span>").replaceAll("p");

删除#div1中的所有子元素。 但是#div1依然保留空标签

$("#div1").empty();

直接从DOM中,删除#div1以及所有子元素

$("#div1").remove();

直接从DOM中,删除#div1以及所有子元素

$("#div1").detach();

remove和detach异同

1、相同点:
 ① 都会把当前标签,以及当前标签的所有子节点,全部删除;
 ② 都可以在删除时,把当前节点返回。并可以使用变量接受返回的节点,以便后期恢复;

 2、 不同点:
 使用接受的节点,恢复原节点时。
 remove只能恢复节点的内容,但是事件绑定,不能再恢复;
 detach不但恢复节点的内容,还能再恢复 事件的绑定;

eg:

$("#div1").click(function(){
alert(1);
})
var div1 = null;
$("button:eq(0)").click(function(){
div1 = $("#div1").remove();
})
$("button:eq(1)").click(function(){
div1 = $("#div1").detach();
})
$("button:eq(2)").click(function(){
$("button:eq(2)").after(div1);
});

JS中.cloneNode() 和 JQ中 .clone()区别

 两者都接受传入true/false的参数。

 .cloneNode() 不传参数或传入参数false,表示只克隆当前节点,而不克隆子节点。 传入true表示可隆全部子节点。

 .clone() 无论传入哪个参数,都会克隆所有子节点。但是,不传参数或者传入false,表示只克隆节点,不克隆节点绑定的事件。 传入true表示同时克隆及诶单绑定的事件。

eg : $("#div1").clone(true).empty().insertBefore("button:eq(0)");

JQuery

标签:传参数   绑定   库冲突   empty   png   with   入参   div   cti   

原文地址:http://www.cnblogs.com/ljr001/p/7501968.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!