JQuery

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")是JQuery对象,.onclick()是原生js事件。

同理,使用document.getElement系列获取的是原生js对象,也不能使用JQuery相关函数。
② 原生JS对象转为jQuery对象,可以使用$包裹原生JS对象,即可转为JQuery对象。
var p=document.getElementByTagName("p");
$(p).click();√ 原生JS已转为JQuery对象
③ JQuery对象转为原色JS对象,使用.get(index)或[index]
$("#p").get(0).onclick=function(){
}
$("#p").[0].onclick=function(){
}
5、jQuery.解决多库冲突

由于其他的JS库也可能使用$作为自身标识,导致其他js 库与jQuery冲突
要解决冲突,可以放弃使用$直接使用jQuery对象。
[使用自执行函数传入jQuery对象简化写法]
jQuery.noConflict();//调用这个函数,将$控制权让渡给其他类库,即 jQuery.
!function(j){
函数之中,就可以用字母j代替jQuery对象
}(jquery);

jQueryDOM操作及其他函数 

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


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

 在#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不但恢复节点的内容,还能再恢复 事件的绑定;

 

posted @ 2017-09-09 15:29  炫彩小zyy  阅读(313)  评论(0编辑  收藏  举报