zoukankan      html  css  js  c++  java
  • jquery总结01-基本概念和选择器

    dom元素和jquery元素的区别

    dom元素支持dom元素自带的属性和方法,jquery元素支持jquery元素自带的属性和方法

    dom                  var div = document.getElementById('a');

    jquery                 var $div = $('#a');

    dom转jquery        var $a = $(div);

    jquery转dom         var a = $div[0] 或者var a = $div.get(0);

    js会因为获取不到元素而报错,jquery不会。

    jquery获取的永远是对象,所以判断是否获取到该元素用$().length或者$().[0]来判断。

    jquery选择器

    $(this)于this的区别

    $(this) jquery的上下文对象 支持jquery的方法和属性

    this dom的上下文对象 支持jquery的方法和属性

    常用选择器

    id 选择器 #hh  

    类选择器 .demo  

    元素选择器 div  

    全选择器 *   

    后代选择器 parent child  所有后代

    子选择器 parent>child  儿子代的 孙子代以后的就不行了

    相邻兄弟选择器 pre+next  此元素之后的一个兄弟元素  和jquery的.next()一样

    一般兄弟选择器 prev~siblings  次元素之后的所有兄弟元素 jquery的.siblings() 更全可以选择同一父元素下的所有兄弟元素

    基本筛选选择器

    $(':first') 第一个元素

    $(':last')

    $(':not()')

    $(':eq(index)')  等于从零开始

    $(':gt(index)')   大于

    $(':lt(index)')   小于

    $(':even')  偶

    $(':odd') 奇

    $(':header') 标题

    $(':gt(index)')  正在执行动画效果的

    内容筛选选择器

    $(':contains(text)')

    $(':parent')有内容的

    $(':empty')没有内容的              

    $(':has(text)')至少包含

    可见筛选选择器

    $(':visible') 可见     注意 只要站空间都算可见  visibility:hidden ;opacity:0;即使不显示也占空间算可见

    $(':hidden')  隐藏   ①display:none  ②type="hidden"  ③高宽为0  ④祖先隐藏

    属性筛选选择器

    $('[attribute=value]')

    $('[attribute|=value]') 等于value或以value-开头

    $('[attribute*=value]') 字符串包含value

    $('[attribute~=value]') 空格值中包含

    $('[attribute^=value]') 以value开始

    $('[attribute$=value]') 以value结束

    $('[attribute!=value]') 不等于

    $('[attribute]')有这个属性

    $('[attribute][attribute][attribute]')

    子元素筛选器

    $(':first-child') 第一个子元素

    $(':last-child')

    $(':only-child') 唯一子元素

    $(':nth-child') 第n个,从1开始  $(':nth-child(3n)') ,$(':nth-child(even)') 

    $(':nth-last-child') 倒数第n个

    注意:nth-child(index) 是从1开始,:eq(index)是从0开始

    表单元素筛选器

    $(':input') input textarea select button

    $(':text') 

    $(':password')

    $(':radio')

    $(':checkbox')

    $(':submit')

    $(':reset')

    $(':button')

    $(':image')

    $(':file')

    表单对象筛选器

    $(':enable') 可用

    $(':disenable')

    $(':checked')

    $(':selected') 注意选中的是option         

    注意:

    ①选择器里面有特殊符号例如 # 需要用\进行转义 $('#a\#b');

    ②老版本属性选择器是带@的,[@title='text'],这可能会因为更新jquery版本而报错

    ③选择器多一个空格和少一个空格的影响是很大的。

  • 相关阅读:
    使用 git 提交报错:error: RPC failed; HTTP 413 curl 22 The requested URL returned error: 413 Request Entity Too Large 的解决办法
    vue3使用 svg, 不是 svg 图标,是 svg 大图片。可动态修改参数
    Unix信号列表
    Linux CentOS系统安装 node 版本管理工具 nvm
    《能源监测与评价》——产品能耗的节能监测
    脚本
    Parallels Desktop 安装 Centos 虚拟机
    Nuxt3 学习笔记
    电力行业中的一些基本概念
    管理成熟度和管理者成熟度
  • 原文地址:https://www.cnblogs.com/wufangfang/p/6098268.html
Copyright © 2011-2022 走看看