首页
   /       /   
JavaScript复习笔记
4月
5
JavaScript复习笔记
作者:大彭Sir    分类: 学习笔记

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()动画效果
本文标签:标签: javaScript web
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录