jquery学习笔记

Posted 2022-06-22 michael_yqs

        今天不忙，想起看看jquery了，不是研究源码啦，就是系统的看一下它的使用说明，做了简单的笔记。

一、DOM操作

1、删除节点
     element.remove();//将元素从页面中删除，删除成功则返回删除的对象；支持选择性删除
     element.remove("li[title!=JQuery]");//参数为删除的过滤条件

2、复制节点
     element.clone(true);//true表示复制节点的同时也复制绑定在节点上的事件，复制的新元素也具有了节点事件

3、节点替换
     elemA.replaceWith(elemB);//用elemB替换掉所有的elemA
     elemB.replaceAll(elemA);//用elemB替换掉所有的elemA（使用顺序与replaceWith相反）
     注：替换前给元素绑定的事件将随着原来元素的消失而一起消失，需要重新绑定事件到替换后的元素。

4、包裹节点
    elemA.wrap(elemB);//将每个匹配的elemA包裹在elemB里面，每个匹配的元素将独立包裹
    elems.wrapAll(elemA);//将所有的匹配的元素包裹在一个元素(elemA)里面
    elemA.wrapInner(tag);//将每个匹配元素(elemA)的子内容（包括文本节点）用其他结构化的标记（tag）包裹起来，elemA将是tag的父元素
5、遍历DOM节点
     children、prev、next、siblings、nextAll、prevAll、find、parent、parents（多个祖先元素）、closest
     说一下closest：
      它用来取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的JQuery对象。
比如，给点击的目标元素的最近的li元素添加颜色，可以使用如下代码：
$(document).bind("click", function (e)  
    $(e.target).closest("li").css("color","red");  
)
6、offset（）：获取元素在当前视窗的相对偏移，返回的对象包含两个值：top、left，它只对可见元素有效
     position（）：获取元素相对于父元素的偏移，返回的对象也包含top、left
     scrollTop（）、 scrollLeft（）：分别获取元素的滚动条距离顶端和左端的距离，另外可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定的位置。（scrollLeft（300）：滚动到距离左端300px的地方）
7、使用val（）选中select、checkbox、radio
      val()方法不仅能设置元素的值，同时也能获取元素的值。另外，val()方法还有另外一个用处，就是它能使select（下拉列表框）、checkbox（多选框）和radio（单选框）相应的选项被选中，在表单操作中会经常用到。
    在JQuery中，val()方法是从最后一个选项往前读取，如果选项的value或者text中任意一项符合就会被选中。例如：

<option value="选择2号">选择1号</option>
<option value="选择1号">选择2号</option> 

无论使用val("选择1号")还是val("选择2号")，都会选中后面一个<option value="选择1号">选择2号</option>。
如果要两个都选中的话，给select加上multiple属性，然后 elem.val(["选择1号","选择2号"])，这样两个就都会被选中了。注意只有设置了multiple="multiple" 属性才可以选中多个，也可以用attr("selected",true)来实现：
$("#single option:eq(1)").attr("selected",true); //设置属性selected

二、事件

加载事件：ready和load的区别：ready只需要DOM结构加载完成，与之相关联的一些文件或者是图片不需要完全加载好，load的需要等到所有文件都加载完成。
事件绑定，四种方式：
elem.click(function());
elem.bind("click",function());
elem.on("click",function());
elem.one("click",function());//用于绑定执行后马上就要解除绑定的事件，执行一次后就不会再执行了
解除绑定：elem.unbind("click",func);//第二个参数不写，则解除绑定的所有click事件，否则只解除绑定在click事件上的func处理过程。

事件模拟：
 在JQuery中，可以使用trigger(type[,data])方法完成模拟操作，type是事件处理类型，data是事件处理函数需要的参数，可以省略。

例如可以使用下面的代码来触发id为btn的按钮的click事件。

$('#btn').trigger("click");

 这样，当页面加载完毕后，就会立刻输出想要的效果， 也可以直接简写click()，来达到同样的效果： $('#btn').click();。

这个有点类似于mootools的fireEvent的作用。
trigger支持自定义事件。
trigger不仅会执行模拟的事件还会执行浏览器的默认事件，若只想执行模拟事件不想执行浏览器的默认事件，则可以使用triggerHandler()，使用方法和trigger一样。  

事件冒泡：从里层向外层冒泡。

   <div id="content">
    外层div元素

    <span>内层span元素</span>

    外层div元素

</div>

对上述元素绑定事件：

$(function()
    // 为span元素绑定click事件
    $('span').bind("click",function()
        var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
        $('#msg').html(txt);
    );
    // 为div元素绑定click事件
    $('#content').bind("click",function()
        var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
        $('#msg').html(txt);
    );
    // 为body元素绑定click事件
    $("body").bind("click",function()
        var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
        $('#msg').html(txt);
    );
)

点击span会同时触发span、#content、body上的点击事件，点击#content会同时触发#content、body上的click事件。
有些时候利用事件冒泡可以大大提高脚本的性能，但是有些情况下会产生意料之外的效果，比如本例，这时候需要阻止事件冒泡，用event.stopPropagation()来阻止事件冒泡。
另外有些元素具有一些默认事件，链接的跳转、表单的提交等，某些情况下需要阻止默认事件，如表单校验出错的时候，就不希望表单提交了，用event.preventDefault()来阻止默认事件。
阻止事件冒泡和默认事件还有一种比较简单的实现方式：return false；当需要同时阻止默认事件和冒泡的时候可以采用这种比较简单的方式。据我的经验，有些事件是不能用return false来阻止的，暂时想不起来了。但是大多时候它还是很有用的。
事件捕获和事件冒泡的过程相反，用的比较少，没什么可写的。
事件对象的属性和方法：
event.type：获取事件类型
event.target：获取触发事件的元素
 event.pageX/event.pageY：获取到光标相对于页面的坐标
event.which： 在鼠标单击事件中获取到鼠标的左、中、右键，1、2、3分别表示左中右；在键盘事件中获取键盘的按键。
 event.metaKey： 键盘事件中获取 ctrl 按键  
 event.originalEvent： 指向原始的事件对象
 event.relatedTarget：在标准DOM中，mouseover和mouseout所发生的元素可以通过 event.target方法来访问，相关元素是通过event.relatedTarget方法来访问的。 event.relatedTarget在mouseover中相当于IE浏览器的event.fromElement方法，在 mouseout中相当于IE浏览器的event.toElement方法，jQuery对其进行了封装，使之能兼容各种浏览器。
event.preventDefault（）：阻止默认事件
event.stopPropagation（）：阻止事件冒泡