一.$
jQuery中$这个符号经常出现,第一个例子中就出现了,.js文件中上来就写$(document).ready(function(){})这是什么啊?而且$(function(){})与之是等价的,这个符号到底能起到什么作用呢?一大堆的问号猛的就出现在我脑中,后来才知道,原来它是jQuery的别称,而jQuery是jQuery库中提供的一个函数,这个函数的作用是根据()中的参数查找和选择html 中的元素的,而$(document).ready(function(){})是事件模块中重要一个函数,可以极大的提高Web应用程序的速度,相当于javascript中的常规写法window.onload,不过他们还是有一些区别的。
window.onload
$(document).ready()
执行时间
网页所有内容加载完后执行
DOM结构加载完后就执行,效率更高
编写个数
1个
如果同时编写了两个window.onload,那么只能执行第二个多个
多个$(document).ready()都会执行,执行顺序取决于函数的顺序以及引用文件的顺序
是否支持简写
不支持
简写形式为:$(function(){});
二.对DOM元素的操作
所谓操作包括:查找,创建,插入,删除,复制,替换。
1.查找
即获取需要操作的元素,此方法jQuery选择器中已经详细做了介绍,大家可以参考
2.创建
$("<li>XXXX </li>");
$("<span>XXXX </span>");
$("<ul>XXXX </ul>");等
2.插入
HTML
<title>插入节点</title> <script language="JavaScript" type="text/javascript" src="jquery.js"></script> <script language="JavaScript" type="text/javascript" src="插入节点.js"></script> </head> <body> <p>我的名字是:</p> </body> </html>
(1)append 向每个匹配元素内部追加内容
JS
$(function(){ $("p").append("cjr"); });
结果:我的名字是:cjr
(2)appendTo 将所有匹配的元素添加到指定的元素中
JS
$(function(){ $("<span>cjr</span>").appendTo("p"); });
结果:
我的名字是:cjr
(3) prepend 向每个匹配的元素内前置内容
JS
$(function(){ $("p").prepend("你好:"); });
结果:你好:我的名字是:
(4)prependTo 将所有匹配的元素前置到指定元素中
JS
$(function(){ $("<span>你好:</span>").prependTo ("p"); });
结果:
你好:我的名字是:
(5)after在每个元素后面插入内容
JS
$(function(){ $("p").after("RONG"); });
结果:
我的名字是:
RONG
注:不在一行
(6) insertAfter将所有匹配的元素插入到指定元素的后面
JS
$(function(){ $("<span>RONG</span>").insertAfter ("p"); });
结果:
我的名字是:
RONG
(7) before在每个匹配元素之前插入内容
JS
$(function(){ $("p").before("大家好:"); });
结果:
大家好:
我的名字是:
(8) insertBefore将所有匹配的元素插入到指定的元素前面
JS
$(function(){ $("<span>大家好:</span>").insertBefore ("p"); });
结果:
大家好:
我的名字是:
4. 删除
几种删除节点的方法
- var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点
- $("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
- $("ul li").remove("li[title!=宝马]");//将ul元素下lititle属性不等于"宝马"的li元素删除
- $("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容
5. 复制
$(function(){ $("p").clone(true).appendTo("p"); //复制p节点,并将它追加到p节点后边 });
6. 替换
$(function(){ $("p").replaceWith("大家好,我是cjr!"); });
三.编写自己的插件
格式:
$.fn.mywin = function(参数1,参数2){
//定义用到的属性
//插件实现的方法
}
还有就是一些方法,事件的使用,实例中涉及到了一些,还有很多,这里就不一一总结了,这些方法都挺好用的,其中封装了很多东西,省的自己去写了,真正体现了用最少的代码做最多的事情.