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版本而报错

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

jquery总结01-基本概念和选择器的更多相关文章

  1. JQuery(一)---- JQ的选择器,属性,节点,样式,函数等操作详解

    JQuery的基本概念 JQuery是一个javascript库,JQuery凭借着简洁的语法和跨平台的兼容性,极大的简化了js操作DOM.处理事件.执行动画等操作.JQuery强调的理念是:'wri ...

  2. jQuery学习笔记之概念(1)

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  3. .NET的堆和栈01,基本概念、值类型内存分配

    当我们对.NET Framework的一些基本面了解之后,实际上,还是很有必要了解一些更底层的知识.比如.NET Framework是如何进行内存管理的,是如何垃圾回收的......这样,我们才能写出 ...

  4. 基于jQuery带备忘录功能的日期选择器

    今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...

  5. 彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器 基于SharePoint平台开发时,人员选择器使用频率是非常高的,但是原生的人员选择器使用太麻 ...

  6. jQuery -- 光阴似箭(一):初见 jQuery -- 基本用法,语法,选择器

    jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...

  7. 前端基础之jQuery入门 01

    jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互, ...

  8. jQuery 事件流的概念

    jQuery  事件流的概念 什么是事件流 DOM事件流 1. 事件捕获阶段; 2.处于目标阶段; 3.事件冒泡阶段; <!DOCTYPE html> <html lang=&quo ...

  9. jQuery 学习01——定义、安装引用、语法、选择器及事件

    什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多"的JavaScript库. jQuery库包含以下功能: HT ...

随机推荐

  1. 【iCore3 双核心板_FPGA】例程七:基础逻辑门实验——逻辑门使用

    实验指导书及代码包下载: http://pan.baidu.com/s/1Rs18U iCore3 购买链接: https://item.taobao.com/item.htm?id=52422943 ...

  2. CSS成长之路----知识点篇

    一,ul--li列表水平排列,切居中对齐 主要是利用Li标签中的display属性.设置为display:inline,使li纵向排布,且能够使用text-align:center;使其居中显示 HT ...

  3. most queries (more than 90 percent) never hit the database at all but only touch the cache layer

    https://gigaom.com/2011/12/06/facebook-shares-some-secrets-on-making-mysql-scale/ Facebook shares so ...

  4. bootstrap加深

    1.安装: bootstrap中文网:http://www.bootcss.com/ bootstrap.css样式:http://v3.bootcss.com/css/#tables class=' ...

  5. 一种javascript链式多重继承的方式(__proto__原型链)

    var a=function(){this.foo='bar';} a.prototype={b:1}; var aa=function(){} aa.prototype={c:2,__proto__ ...

  6. node + nginx + mongo搭建负载均衡

    基于node和nignx和mongo搭建负载均衡 nginx配置: upstream back {                                                  # ...

  7. [Android Tips] 9. framework notification layout font size

    android 4.4 framework notification layout 相关字体大小 * title: notification_title_text_size: 18dp * conte ...

  8. TCP/IP详解--发送ACK和RST的场景

    在有以下几种情景,TCP会把ack包发出去: 1.收到1个包,启动200ms定时器,等到200ms的定时器到点了(第二个包没来),于是对这个包的确认ack被发送.这叫做“延迟发送”: 2.收到1个包, ...

  9. 管理不同版本ruby和rails的利器——rvm

    近年来,ruby on rails逐渐火了起来,我想各位码农早就耳闻,特别是那些做B/S项目的童鞋,早就想跃跃一试了. 笔者也是初次接触ruby on rails ,我想,对于初学者来说,最好的学习方 ...

  10. PHP---------去除数组里面值为空或者为空字符串的元素

    array_filter(array('a'=>'','',null,'b'=>3),function($val){         if($val===''||$val===null){ ...