JQuery复习心得

this === event.currentTarget    event.stopPropagation  阻止冒泡  http:www.css88.com

JQ和原生JS入口函数的区别:

  • 书写个数不同
    • 原生JS中入口函数只能出现一次,出现多次后会被层叠掉
    • JQ中可以随意使用,不会被层叠掉
  • 执行时机不同
    • 原生JS的入口函数在所有资源文件加载完成后执行。包括外部JS、外部CSS、页面文档、图片
    • JQ的入口函数在文档加载完后就执行,也就是在DOM树加载好后就可以直接操作DOM,不需要等所有外部元素加载完。(但是使用$(window).ready(function () {});可以实现等图片等元素加载完后执行入口函数的效果

JS和JQ的DOM相互转换

  • JS==>JQ
    • var jqdiv = $("jsdiv");  在$后加JS变量名就好
  • JQ==>JS
    • var jsdiv = JQdiv[0];  或者  div = JQdiv.get(0);  用[]或者get()传入索引值获取

选择器

  • 基本选择器:和CSS中差不多,有 ID选择器  类名选择器  标签选择器  通配符(*)选择器   获取方式也一样
  • 层级选择器: 子代选择器  后代选择器
    • 过滤选择器:   :eq(index)指定的元素  :odd获取奇数位的元素,得到的是偶数值  :even偶数位    用法:   $("li:eq(2)")
  • 筛选选择器: .find()从后代里找  .children()子代里找  .eq()用法和上边类似,写法有区别  .siblings()兄弟   .parent()父级

节点操作

  • 创建节点
    • $("<span></span>");  直接传带标签的内容
    • $("ul").html("<li>你好</li>");  通过父级元素调用html()来创建,若是html()不传任何内容,表示获取ul中的内容
  • 添加节点
    • append()  $("oldul").append(newli);
    • appendTo()   上面的反过来就是了
    • prepend()  在盒子的最前边添加  $("ul").prepend(newli);新添加的li成为第一个li
    • prependTo()  你猜猜怎么用
    • after()  $("li").after(newli);新添加的里li在旧的li之后  操作的是兄弟级的元素
    • before()  恩...
  • 删除节点
    • .html("")  传空字符,直接清空内容
    • .remove()  自杀式
  • 复制节点
    • .clone()  默认深复制调用者
原文地址:https://www.cnblogs.com/missjingjing/p/8661186.html