zoukankan      html  css  js  c++  java
  • jQuery入门级part.1

    jquery的选择器:

    基本选择器:

    #id                      根据id的属性值来获取元素

    TagName             根据标签名来获取元素

    selector1,selector2       匹配列表中的选择器

    .class               根据class的属性值来获取元素

    层级选择器:

    祖先元素  后代元素  匹配祖先元素下面的指定的后代元素

    parent > child  匹配父元素下面的指定的子元素

    prev + next   匹配当前元素的下一个兄弟元素  要求这两个元素必须邻居

    prev~siblings  匹配当前元素的下面的指定所有的兄弟元素

    简单选择器:

    :first 匹配第一个元素

    :last 匹配最后一个元素

    :even 匹配下标值为偶数的所有元素

    :odd  匹配下标值为奇数的所有元素

    :eq(index)  匹配下标值为指定值的元素

    :gt(index) 匹配下标值大于指定值的所有元素

    :lt(index) 匹配下标值小于指定值的所有元素

    :not(selector) 匹配不包含指定选择器的所有元素

    内容选择器:

    :contains(text) 匹配内容中包含指定值的元素

    :empty   匹配内容为空的元素

    :has(selector)  匹配内容中包含指定选择器的元素

    :parent  匹配内容不为空的元素

    可见性选择器:

    :hidden      匹配隐藏的元素   CSS中:display:none

    :visible        匹配显示的元素  CSS中:display:block

    属性选择器:

    [attribute]   匹配指定属性的所有元素

    [attribute=value]  匹配属性等于指定值的元素    input[name=”username”]

    [attribute!=value]  匹配属性不等于指定值的所有元素

    [attribute^=value]  匹配属性以指定值开头的所有元素

    [attribute$=value]  匹配属性以指定值结束的所有元素

    [attribute*=value]  匹配属性中包含指定值的所有元素

    [selector1][selector2][selectorN]  匹配列表中所有属性

    子元素选择器:

    :nth-child(index/even/odd)  匹配索引值为指定值或者索引值为奇偶的子元素  这里的是从1开始的

    :first-child 第一个子元素

    :last-child 最后一个子元素

    :only-child 匹配有且仅有一个子元素 

    !css3也可以用

    表单属性选择器:

    :input   匹配表单里面所有元素 包含select  textarea   !$(“input”)它是匹配到所有的input标签      !$(“:input”)它是匹配到除了input标签以外 select  textarea   所有的表单控件元素

    :text   匹配单行文本框

    :password  匹配单行密码框

    :radio   匹配单选按钮

    :checkbox 匹配多选按钮

    :submit       匹配提交按钮

    :reset  匹配重置按钮

    :image  匹配图片按钮

    :button  匹配普通按钮

    :file   匹配文件上传

    :hidden  匹配隐藏域   如果是要匹配表单中的隐藏域控件  一定要先加上input标签  $(“input:hidden”)

    表单对象选择器:

    :enabled  匹配表单中可用的表单控件

    :disabled  匹配表单中不可用的表单控件

    :checked  匹配表单中默认选中的元素   单选按钮和多选按钮

    :selected  匹配表单中默认选中的元素   下拉列表

    jQuery对象与JavaScript对象之间相互转换:

    jQuery对象转换为JavaScript对象:

    方法:jQuery对象[下标]

    JavaScript对象转换为jQuery对象:

    方法:$(JavaScript对象)

    jQuery中的方法来操作HTML标签中的属性:

    attr(name)   获取当前对象的指定的属性的值

    attr(key,value)  给当前对象设置属性值 

    attr(properties)  一次给当前对象设置多个属性值   要求参数必须是一个JSON对象

    removeAttr(name) 移动当前对象的属性名和属性值

    jQuery对象操作标签中的class属性:

    addClass(class)   给当前对象添加class属性值

    removeClass(class)  将当前对象的class属性值移除

    toggleClass(class)  当前对象中如果有指定的class属性值则移除 反之则添加

    hasClass(class)  如果有指定的class属性值就返回true  反之没有就返回false

    jQuery对象对标签中的style属性的操作:

    css(name) 获取到当前对象的style属性指定的CSS样式的属性值

    css(key,value) 给当前对象的的style属性中设置css样式

    css(properties) 一次设置多个   要求参数必须是一个JSON对象

    尺寸方法:

    width()      width(value)      height()      height(value)

    文本、值:

    html():获取双边标记中的内容

    html(val):往双边标记设置内容

    val():获取单边标记中的value属性值

    val(val):往单边标记中的value属性设置值

    text():获取双边标记的中的内容

    text(val):往双边标记设置内容

    html()和text()方法之间的区别: 一个可以解析HTML标签  一个解析不了

             html()获取的时候将标签中的所有的内容都会获取到

             text()获取的时候只会获取到标签中的文本内容

  • 相关阅读:
    QQ浏览器X5内核问题汇总
    jQuery全屏滚动插件fullPage.js
    CSS3 Animation
    CSS3 Transition
    CSS3 Transform
    HTML5学习笔记(2):input type file的特性
    HTML5学习笔记(1):HTML5介绍与语法
    你必须知道的28个HTML5特征、窍门和技术
    Java内存释放——《Thinking in Java》随笔004
    构造器调用构造器——《Thinking in Java》随笔003
  • 原文地址:https://www.cnblogs.com/huuangrui/p/6032021.html
Copyright © 2011-2022 走看看