• Python Day15 jQuery


    一 jQuery是什么

    [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。

    [2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

    [3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

    [4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

    [5]  jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

    二 什么是jQuery对象

    jQuery 对象就是通过jQuery包装DOM对象后产生的对象。j

    Query 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法: $(“#test”).html();

    $("#test").html() 
       
             意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 
    
             这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; 
    
             虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错
    
             约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. 
    
    var $variable = jQuery 对象
    var variable = DOM 对象
    
    $variable[0]:jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML
    

    三 寻找元素

    3.1 选择器

     基本选择器    
    $("*")  $("#id")   $(".class")  $("element")  $(".class,p,div")
     层级选择器
    $(".outer div")  $(".outer>div")   $(".outer+div")  $(".outer~div")
    基本筛选器
    $("li:first")  $("li:eq(2)")  $("li:even") $("li:gt(1)")
    属性选择器
    $('[id="div1"]')   $('["alex="sb"][id]')
    表单选择器 
    $("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")
    

    3.2 表单属性选择器

     :enabled
     :disabled
     :checked
      :selected
    
    <body>
    
    <form>
        <input type="checkbox" value="123" checked>
        <input type="checkbox" value="456" checked>
    
    
      <select>
          <option value="1">Flowers</option>
          <option value="2" selected="selected">Gardens</option>
          <option value="3" selected="selected">Trees</option>
          <option value="3" selected="selected">Trees</option>
      </select>
    </form>
    
    
    <script src="jquery.min.js"></script>
    <script>
        // console.log($("input:checked").length);     // 2
    
        // console.log($("option:selected").length);   // 只能默认选中一个,所以只能lenth:1
    
        $("input:checked").each(function(){
    
            console.log($(this).val())
        })
    
    </script>
    
    
    </body>
    

    3.3 筛选器

    过滤筛选器

     

      

      

  • 相关阅读:
    Qt之QLineEdit
    Redis与Java
    Qt之属性系统
    Qt之Meta-Object系统
    设计模式(八)外观模式
    Qt之QRadioButton
    Qt之QSystemTrayIcon
    Redis与Java
    JSP公用COMMON文件
    eclipse远程调试Tomcat方法[转]
  • 原文地址:https://www.cnblogs.com/hanjialong/p/7300799.html
走看看 - 开发者的网上家园