zoukankan      html  css  js  c++  java
  • js和jquery

      定义:

      jquery => js的dom操作进行封装,简化了js操作  //jquery就是把js封装成一个更简便的方法

      jquery和js区别:找到元素,操作元素

      只要看见 符号就代表jquery,除非是自己定义了个方法

      注意:想要用jquery方法,必须必须必须    引入jqeuy文件

    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>

      找元素

      js -> jquery   js元素转化成jquery元素用   $( jsdom )
      jquery -> js jquery元素转化成js元素用   $("button")[0]   或者   $("button") . get(0)

      js页面加载方法:

     window.onload=function(){
    
      }

      jquery页面加载方法一:

     $(document).ready(function(){
      })

      jquery页面加载方法二:

     $(function(){
    
      })

      操作内容

      //js对象=> jsdom   jquery对象=> jqdom
      获取:jsdom . innerHTML  赋值:jsdom.innerHTML="这是要填的内容";  //innerHTML是给非表单元素填内容
      获取:jsdom . value    赋值:jsdom.value="这是要填的内容";  //value是给表单元素填内容

      获取:jqdom . html()   赋值:jqdom.html("这是要填的内容")//这里可以添加标签  //html()是给非表单元素填内容
      获取:jqdom . val()    赋值:jqdom.val("这是要填的内容")  //val()是给表单元素填内容
      /*操作内容结束*/

      /*操作样式*/
      jsdom.style.color

      获取:jqdom.css("color")  赋值方法一: jqdom.css("color","red")
      赋值方法二:jqdom.css({  //json格式:大括号,内容赋值用:,每个用逗号隔开
               "css":"red",
               "width":"120px",
               ...
            })

      操作属性

      jsdom.setAttribute("class","c1")  //js设置元素的属性
      jsdom.getAttribute("class")  //js获取元素属性
      jsdom.removeAttribute("class")  //js移除元素属性
      jsdom.style.color //这个方法必须是非常清楚这个属性有的才可以用

      获取:jqdom.attr("class")   赋值方法一:jqdom.attr("class","c1")  移除:jqdom.removeattr("class")
      赋值方法二:jqdom.attr({    // json格式:大括号,内容赋值用:,每个用,隔开
              "id":"btn",
              "class":"c1",
              ...
            })
      jqdom.removeClass(classname)  //移除jq对象样式
      jqdom.addClass(classname)  //给jq对象添加样式

      操作事件

    jsdom.onClick=function(){
      this  //代表当前标签
    }

    jqdom.click(function(){
      $(this)   //这个this是js对象,必须用$转化成jquery,然后可以用jquery方法了
    })

      遍历

    $("img").each(function(i,item){  //i代表下标,item代表具体值
                    
     })
  • 相关阅读:
    vue之$nextTick详解
    vue动态组件,运用以及效果选项卡的运用
    深度解析vue之组件之间传值调用方法的奇淫技巧
    关于vuex模块化深层理解实例
    vue效果之改element的el-checkbox-group多选框组为单选可取消的单选框(样式还是多选框的样式)
    vue-div,文字无限滚动效果
    new webpack.ProvidePlugin vue模块化的全局引用
    实践开发:vue框架重点知识分析
    前端工程化,组件化,模块化,层次化
    开发中的细节整理
  • 原文地址:https://www.cnblogs.com/zyfeng/p/10729354.html
Copyright © 2011-2022 走看看