js笔记-Dom查询和增删改

1. 基本Dom查询
   • .getElementById("id名");
   • .getElementsByClassName("类名")[0表示第一个];
   • .querySelector(".类名｜#id名｜标签名");只查询第一个
   • .querySelectorAll查询所有的
   • .documentElement是html根标签
   • .body是body
   • .all弃用
2. 增删改
   • appendClild()添加节点
     用法：父节点.appendClild(子节点)
   • removeClild()删除子节点
     用法：父节点.removeClild(子节点)
     常用：自己.parentNode(父元素).removeClild(自己)
   • replaceClild()替换节点
     用法：父节点.replaceClild(新节点,旧节点)
   • insertBefore()在指定节点前添加节点
     用法：父节点.insertBefore(新节点,旧节点)
   • createAttribute()创建属性节点
     用法：document.createAttribute(属性名)
   • createElement()创建元素节点
     用法：document.createElement(标签名)
   • createTextNode()创建文本节点
     用法：document.createElement(文本)
   • getAttribute()返回指定的属性值
     用法：getAttribute(属性名)
   • setAttribute()设置或修改属性得值
     用法：setAttribute(属性名,属性值)

js笔记-类的操作

1. 修改Class：.ClassName="类名";（添加类需要在类名前面添加空格；如.ClassName=" 类名"）

   //添加Class
   function addClass(obj,cn){
   //检查obj中是否含有className
       if(!hasClass(obj,cn)){
       obj.className+=" "+cn
       }
   }
   //调用
   addClass(obj,"类名");
   removeClass(obj,"类名");
   //判断一个元素是否含h1有指定的class属性值
   function hasClass(obj, cn) {
       var reg = new RegExp("\\b" + cn + "\\b")
       return reg.test(obj.className)
   }
   //移除Class
   function removeClass(obj,cn){
       var reg = new RegExp("\\b"+cn+"\\b")
   obj.className=obj.className.replace(reg,"");
   }
   //切换toggle一个类
   function toggleClass(obj,cn){
       if(hasClass(obj,cn)){
       removeClass(obj,cn)
       }else{
       addClass(obj,cn)
       }
   }

js笔记-jQuery

Dom操作与动画

• 使用css（）为指定的元素设置样式值css(name,value)或css({name:value,name:value...})
• 追加样式addClass(class)或addClass(class1 class2 ...)
• 移除样式removeClass(class)或removeClass(class1 class2 ...)
• 切换样式toggleClass(class)
• .html()对HTML代码进行操作，类似js中innerHTML
• .text()可以获取或设置元素的文本内容
• .val()可以获取或设置元素的value属性值
• .attr()用来获取与设置元素属性，原生的建议使用prop()
• .removeAttr()用来删除元素的属性
• A.append(B)将B加入到A中，appendTo()相反
• .prepend()前置加入，.prependTo相反()
• .after()表示将B加入到A之后
• .before()表示将B加入到A之前
• .clone()用于复制某个节点
• .chirldren()用于获取元素的所有子元素
• .find()用于获取元素的后代元素
• .next()获取紧邻元素之后的元素
• .nextAll()获取紧邻元素之后的所有同级元素
• .prev()获取紧邻元素之前的元素
• .prevAll()获取紧邻元素之前的所有同级元素
• .siblings()用于获取位于匹配元素前面和后面的所有同辈元素
• .parend()获取元素的父级元素
• .parends()获取元素的祖先元素

事件与动画

1. .click()点击事件
2. .mouseover()鼠标移入时
3. .mouseout()鼠标移出时
4. .show()显示；.show("slow")以较慢的速度显示
5. .hide()隐藏；.hide(1000)以1秒的时间隐藏
6. .toggle()用于切换元素的可见状态
7. .fadeln()和.fadeOut()淡入淡出
8. .fadeToggle()淡入淡出
9. .slideDown()延伸，.slideUp()收缩
10. .slideToggle()元素上拉与下拉切换
11. .anmite()动画效果