现在的位置: 首页 > 综合 > 正文

jQuery技巧总结

2013年06月09日 ⁄ 综合 ⁄ 共 2429字 ⁄ 字号 评论关闭

        视频看完了,在这次学习中我发现了这位老师的几个好习惯。老师在完成一部分的功能之后都会去验证,这样做能及时发现问题,而且也易于调试,调试的时候非常有针对性;还有就是老师的条理性非常强,尤其体现在完成那些逻辑性的句子的时候先通过注释把自己的想法写出来,然后再根据注释一点点的用代码实现;还有一点非常重要的就是老师在完成代码的时候善于去整理代码,将一些重复的代码封装在函数中,希望发现的这几个好习惯也会成为自己的习惯。下面说说我通过视频学到的知识

一.$

          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元素的操作


         想要对某元素进行操作,需要先获取此元素,获取元素的方法jQuery选择器中已经详细做了介绍,那么怎样对获取的元素进行操作呢?

所谓操作包括:查找,创建,插入,删除,复制,替换。


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){

//定义用到的属性

//插件实现的方法

}


        还有就是一些方法,事件的使用,实例中涉及到了一些,还有很多,这里就不一一总结了,这些方法都挺好用的,其中封装了很多东西,省的自己去写了,真正体现了用最少的代码做最多的事情.

抱歉!评论已关闭.