zoukankan      html  css  js  c++  java
  • jQuery学习笔记

    1.jQuery的作用:为了简化JavaScript的开发
      优点:封装了很多与定义的对象和函数,能帮助使用者建立有高难度交互的web3.0特性的富客户端页面,并且兼容各大浏览器
      当前流行的JavaScript库有:jQuery、MooTools、Prototype、Dojo、YUI、EXT_JS、DWR

    2.jQuery对象就是通过jQuery包装DOM对象后产生的对象。
      jQuery对象是jQuery独有的,jQuery无法使用DOM对象的任何方法,同时DOM对象也不能使用jQuery里的方法

    3.约定:如果获取的是jQuery对象,那么要在变量面前加$

    4.DOM对象与jQuery对象的类型互换
      DOM--->jQuery $(DOM对象)
      jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
      jQuery--->DOM对象 jQuery对象[0]或jQuery对象.get(0)

    5.jQuery选择器
      作用:在jQuery中,对事件处理,遍历DOM和ajax都依赖于选择器
      优点:简洁的写法、完善的事件处理机制

    6.基本选择器
      通过元素ID,class和标签名来查找DOM元素
        1.#id 用法:$("#id"); 返回单个元素组成的集合
        2.Element 用法:$("div"); 返回值 集合元素
        3.class 用法:$(".class"); 返回值 集合元素
        4.* 用法:$("*"); 返回所有匹配元素集合
        5.组合 用法:$("div,span,.class,#id"); 返回值 集合元素

    7.层次选择器
      通过 DOM 元素之间的层次关系来获取特定元素
        1.$("form input");
        在给定的祖先元素下匹配所有后代元素
        2.$("form>input");
        在给定的祖先元素下匹配所有子元素
        3.$("form+input");
        匹配所有紧接该元素后的下一个元素
        4.$(”form ~ input”);
        匹配所有该元素后的元素,不包含input在内,只匹配同辈元素,子辈元素不被匹配

    8.过滤器选择器
      通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头
      过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器
        1.$(":first");
        匹配找到第一个元素
        2.$(":last");
        匹配找到最后一个元素
        3.$("input:not(:checked)");
        匹配找到不满足条件的元素
        4.$(":even");
        匹配找到索引为偶数的元素,从0开始计数
        5.$(":odd");
        匹配找到索引为奇数的元素,从0开始计数
        6.$(":eq(index)");
        匹配找到给定索引的元素
        7.$(":gt(index)");
        匹配找到大于给定索引的元素
        8.$(":lt(index)");
        匹配找到小于给定索引的元素
        9.$(":header");
        匹配找到标题元素
        10.$(":animated");
        匹配找到执行动画效果的元素

    9.内容过滤器
      过滤规则主要体现在它所包含的子元素和文本内容上
        1.$(":contains('text')");
        匹配包含给定文本元素
        2.$(":empty");
        匹配不包含子元素和文本的空元素
        3.$(":has(Element)");
        匹配包含某个标签元素的元素
        4.$(":parent");
        匹配含有子元素或文本的元素,与$(":empty")相反

    10.可见度过滤选择器
      根据元素的可见和不可见状态来选择相应的元素,利用 jQuery 中的 show() 方法将它们显示出来
        1.$(":hidden");
        匹配所有不可见的元素
        2.$(":visible");
        匹配所有可见的元素

    11.属性过滤器
      通过元素的属性来获取相应的元素
        1.$("[attribute]");
        匹配包含给定属性的元素
        2.$("[attribute=value]");
        匹配给定属性是特定值的元素
        3.$("[attribute!=value]");
        匹配给定属性不是特定值的元素
        4.$("[attribute^=value]");
        匹配给定属性以特定值开始的元素
        5.$("[attribute$=value]");
        匹配给定属性以特定值结束的元素
        6.$("[attribute*=value]");
        匹配给定属性包含特定值的元素
        7.$("[attribute=value][attribute=value]");
        复合属性选择器,需要同时满足多个条件时使用

    12.子元素过滤选择器(父元素和子元素之间要用空格隔开)
        1.$("ul li:nth-child(index/even/odd/equation)");
        匹配其父元素下的第N个子或奇偶元素,索引从1开始
        nth-child()选择器详解如下:
          (1):nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
          (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
          (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素
          (4):nth-child(3n+1): 能选取每个父元素下的索引值是 3n + 1的元素
        2.$(":first-child");
        匹配第一个子元素
        3.$(":last-child");
        匹配最后一个子元素
        4.$(":only-child");
        某个元素是父元素中唯一的子元素,那将会被匹配

    13.表单对象属性过滤器
      对所选择的表单元素进行过滤
        1.$(":enabled");
        匹配所有可用元素
        2.$(":disabled");
        匹配所有不可用元素
        3.$(":checked");
        匹配所有被选中的元素(多选框input)
        4.$(":selected");
        匹配所有被选中的元素(下拉框option)

    14.jQuery表单的一些操作方法
        val() 方法改变表单内<input>元素的值
        length 属性获取多选框选中的个数
        text() 方法获取下拉框选中的内容

    15.表单选择器
        1.$(":input");
        匹配所有 input, textarea, select 和 button 元素 (隐藏的元素也会被匹配)
        2.$(":text");
        匹配所有的单行文本框
        3.$(":password");
        匹配所有的密码框
        4.$(":radio");
        匹配所有单选按钮
        5.$(":checkbox");
        匹配所有复选框
        6.$(":submit");
        匹配所有提交按钮
        7.$(":image");
        匹配所有图像域
        8.$(":reset");
        匹配所有重置按钮
        9.$(":button");
        匹配所有按钮.这个包括直接写的元素button
        10.$(":file");
        匹配所有文件域
        11.$(":hidden");
        匹配所有不可见元素(直接使用 “:hidden” 的话就是匹配页面中所有的不可见元素)

  • 相关阅读:
    提高代码质量:如何编写函数
    如何写自我评价
    写简历注意事项
    Android开发注意细节
    Android:onNewIntent()触发机制及注意事项
    Atom与markdown
    Java程序性能优化总结
    Java中的继承与组合
    Fragment生命周期总结
    C# 生成随机姓名
  • 原文地址:https://www.cnblogs.com/qq634571685/p/7080077.html
Copyright © 2011-2022 走看看