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).οnclick=function(){ } $("#p").[0].οnclick=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不但恢复节点的内容，还能再恢复 事件的绑定；