zoukankan      html  css  js  c++  java
  • jquery 初步学习

    首先 jQuery是一个轻量级的 JS框架,核心文件才几十KB

    1. jquery 对象

    var $variable=jquery对象

    var variable = DOM对象

    $variable[0] # jquary对象转化为dom对象

    $($variable[0])# dom对象转化为jquery对象

    2。jQuery的基础语法

    $(selector).action()

    id选择器:$("#id")

    类选择器:$(".classname")

    标签选择器 :$("tagname")

    配合使用:$("div.c1")

    所有元素选择器:$("*")

    组合选择器 :$("#id,.c1,div") #拥有3个其中任意属性的,取并集

    层级选择器:

    $("x y")     #x的所有后代y(子子孙孙)

    $("x>y")    #x的所有儿子中有y的

    $("x+y")    #紧跟着x后面的y(同一级别)

    $("x~y") #x之后所有的兄弟Y

    基本筛选器:

    $("#div:first")

    $("#div:last")

    :eq(index)   #索引值等于index的元素

    :even 匹配索引值为偶数的元素

    :odd  匹配索引值为奇数的元素

    :gt(index) 匹配所有大于给定索引值的元素

    :lt (index)  匹配所有小于给定索引值的元素

    :not(元素选择器)  移除所有满足not条件的标签

    :has(元素选择器) 从后代中找包含在内的标签

    $("div:has(h1)") #注意找的是div标签

    $("div:has(.c1)")

    $("li:not(.c1)")后代中不包含有a标签的li标签

    属性选择器:

    $("input[type='text']")取出类型是text的input标签

    表单常用筛选:

    :text

    :password

    :file

    :radio

    :checkbox

    :submit

    :reset

    :botton
    $(":botton")#找到所有拥有button的标签

    表单对象属性:

    :enabled

    :disabled

    :checked

    :selected

    <form>

      <input name="email" disabled="disabled"/>

      <input name="id"/>

    <form>

    $("input":enabled) //找到可用的input标签

    筛选器:

    下一个元素(同级之间):

    $("#id").next()

    $("#id").nextall()

    $("#id").nextUntil("#i2")直到找到id为i2的前面

    父亲元素:

    $("#id").parent()        #找到父类

    $("#id").parents()  #查找当前元素所有父类

    $("#id").parentUntil("#i2") #查找当前元素所有的父辈元素,直到遇到匹配的那么元素为止

    儿子和兄弟元素:

    $("#id").children()   //儿子们

    $("#id").siblings()  //兄弟们

    查找元素:$("#id").find()    // 找后代元素中拥有。。。。

    .first()//获取匹配第一个元素

    .last()//获取匹配最后一个元素

    .not()//从匹配元素的集合中删除与指定表达式匹配的元素

    .has()//保留包含特定后代的元素

     $("div.c1")等价于$("div").filter(".c1")

     $("div .c1")等价于$("div").find(".c1")

    ")

  • 相关阅读:
    尾递归
    博客搬家 --- CSDN
    sublime text 插件集锦
    chrome 常用插件集锦
    IntelliJ Idea 2017 免费激活方法
    Mac下Java JNI 调C
    webgl学习笔记五-纹理
    webgl学习笔记四-动画
    webgl学习笔记三-平移旋转缩放
    webgl学习笔记二-绘图多点
  • 原文地址:https://www.cnblogs.com/zhaoweihang/p/9133732.html
Copyright © 2011-2022 走看看