jqeury 基础

jquery 
选择器:

基本选择器:#id 、.class、*(匹配所有)
层次选择器:
    $(div span) 选取<div>里的所有的<span>元素、
      $(div>span) 选取<div>元素下的元素名是<span>的子元素
    $(div+span) 选取div元素的下一个同辈元素
    $(div~span) 选取div元素的后面所有同辈元素
过滤选择器
  基本选择器:
    :first   $("div:first")选取所有<div>元素中第1个<div>元素
        :last
    :not(selector)  $("input:not(.myclass)")选取clss不是muclass的input元素
        :even  偶数 从0开始
    :odd   奇数 从0开始
    :eq(index) 选取索引等于index的元素 (index是从0开始) $("input:eq(1)")
    :gt(index) 大于
    :it(index) 小于
    :header  选取所有有标题元素
    :animated 选取当前正在执行动画的所有元素
    :focus 选取当前获取焦点的元素
  内容过滤选择器
     :contains(text) 选取文本内容为"text"的元素  $("#div:contains('我')")
    :empty   选取不包含子元素或者文本的空元素
    :has(selector)选取含有选择器锁匹配的元素的元素  $("div:has(p)") 选取含有p元素的div
    :parent 选取含有子元素或者文本的元素 

  可见性过滤选择器
    :hidden    :visible 
   
  属性过滤选择器
    [attribute] 选取拥有此舒心的元素   $("div[id]")
           [attribute=value] 选取属性的值为value 的元素  $("div[title=test]")
        [arrtibute!=value] 选取属性的值不为value 的元素  $("div[title!=test]")

  子元素过滤选择器
    :first-child 选取每个父元素的第1个子元素  $("ul li:first-child")
    :last-child
    :nth-chid(index)
  
   表单对象属性过滤选择器

           :enabled  选取所有可用元素
    :disabled 选取所有不可用元素
    :checked 
    :selected

表单选择器
     :input 选取所有<input>元素
    :text
    :password
    :radio
    :checkbox
    :submit
    :imgage
    :reset  获取所有重置按钮
    :button
    :file 选取所有上传域
    :hidden 



show() 显示隐藏的匹配元素
css(name,value) 给元素设置样式
text(string)设置所有匹配元素的文本内容
filter(expr)筛选出指定表达式匹配的元素集合,其中expr可以是多个选择器的组合、 是对自身集合元素筛选
fint()会在元素内寻找匹配元素,对它的自己操作
 例如:<div class="css">
         <p class="rain">测试1</p>
       </div>
      <div class="rain">
         <p>测试2</p>
      </div>

var $find = $("div").find(".rain");
alert( $find.html() ) ; //输出测试2
var $filter = $("div").filter(".rain");
alert( $filter.html() ); ////输出测试 <p>测试2</p>


addClass(class)为匹配元素添加指定的类名





jquery DOM
      
    增:
    append() 向每个匹配元素内部追加内容 
    after()向每个匹配元素之后追加内容
     before() 向每个匹配元素之前追加内容
    删:
    remove()    $("ul li:eq(1)").remove();
    清空:
    empty()  清空节点   $("ul li:eq(1)").empty()
    包裹:
    wrap() 将某个节点用其他标记包裹起来   $("strong").wrap("<b></b>")  // 用<b> 标签把<strong>元素包裹起来


属性操作

    attr()方法来获取和设置元素属性。  var p=$("p").attr("tilte");  // 获取<p> 元素节点属性title
       removeAttr() 方法来删除元素属性。
    addClass() 追加样式
    removeClass() 移除样式
    hasClass() 是否包含样式
      toggle() 交替一组动作
    html() 获取元素的html内容,相当于innerhtml
    text() 获取元素的文本内容,相当于innerText
    val() 取值

   遍历节点
    children() 获取匹配元素的子元素集合   
    next() 获取匹配元素后面紧临的同辈元素
    prev()获取匹配元素前面紧临的同辈元素
    siblings获取匹配元素前后面紧临的同辈元素
    parent 获取集合元素的父级元素
    parents 获取集合元素的祖先元素

   事件:
       bind() //绑定事件

window.load() 与$(documnet).ready的区别
  window.load()是需要页面中的说有元素、图片、链接都加载完成之后才可以触发。
  而$(documnet).ready是不要求页面完全加载完,只需要加载完dom机构就可以触发

 

posted @ 2016-08-19 11:32  来自潘大大  阅读(244)  评论(0编辑  收藏  举报