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代表具体值
                    
     })
  • 相关阅读:
    Java二叉树非递归实现
    iOS程序生命周期 AppDelegate
    pch 文件
    获取app崩溃信息的途径 iOS
    iOS Storyboard适配问题
    时间戳
    lable 以及cell的高度自适应
    时间戳 获得当前时间 -iOS
    GCD 多线程 ---的记录 iOS
    OC 常用方法记录
  • 原文地址:https://www.cnblogs.com/xu1115/p/10916406.html
Copyright © 2011-2022 走看看