jquery及jquery常用选择器使用
本文为博主原创,未经允许不得转载:
1.jquery强大之处:
容易上手,强大的选择器,解决浏览器的兼容
完善的时间机制,出色的ajax封装,丰富的ui
2.jquery是一个javascript脚本库,不需要特别的安装,只需要我们在页面<head>标签内中,
通过script标签引入jquery库即可。
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
3.jquery对象与dom对象的区别
jquery对象与dom对象是不一样的,
通过一个简单的例子,简单来区分下dom对象与jquery对象:
<p id="imooc"> </p>
我们要获取页面上这个id为imooc的p元素,然后给这个文本节点增加一
段文字:“您好!欢迎学习jquery”,并且让文字的颜色变成红色。
普通处理,通过标准的javascript处理
var p = document.getElementById("imooc");
p.innerHTML= '您好!欢迎学习jquery';
p.style.coloe='red';
通过原生dom模型提供的decument.getElementById("imooc")方法获取的dom元素就是一个dom对象,
再通过innerHTML与style属性处理文本与颜色。
jquery处理:
var p = $("#imooc");
p.html("您好,欢迎学习jquery").css('color','red');
通过$("imooc")方法会得到一个p的jquery对象,p是一个类数组对象,这个对象里面包含了dom对象
的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的javascript处理
结果一致。
通过jquery方法包装后的对象,是一类数组对象,它与dom对象完全不同,唯一相似的是他们都能
操作dom。
通过jquery处理dom的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个dom
节点有哪些方法,也不需要关注浏览器的兼容问题,且代码也会更简洁。
4.jquery对象转化成dom对象
jquery库本质上还是javascript代码,它只是对javascript语言进行包装处理,为的是提供更好
更方便快捷的dom处理与开发经常使用的功能。我们使用jquery的同时也能混合javascript原生代码
一起使用。在很多场景中,我们需要jquery与dom能够相互的转换,他们都是可以操作的dom元素,
jquery是一个类数组对象,而dom对象就是一个单独的dom元素。
如何把jquery对象转成dom对象?
利用数组下标的方式读取到jquery中的dom对象
html代码:
<div>元素一</div>
<div>元素二</div>
<div>元素三</div>
javascript代码:
var div = $('div') //jquery对象
var div1 = div[0] //转化成dom对象
div1.style.color = 'red' //操作dom对象的属性
用jquery找到所有的div元素,因为jquery对象也是一个数组结构,可以通过下标索引找到第一个
div元素,通过返回的div对象,调用它的style属性,修改第一个div元素的颜色。这里需要注意的
一点是,数组的索引是从0开始的,也就是第一个元素下标是0.
通过jquery自带的get()方法
jquery对象自身提供一个.get()方法允许我们直接访问jquery对象中相关的dom节点,get()方法中
提供一个元素的索引:
var div = $('div') //jquery对象
var div1 = div.get(0); //通过get方法,转化成dom对象
div1.style.color = 'red' //操作dom对象的属性
其实我们翻开源码,看看就知道了,get方法就是利用的第一种方式处理的,只是包装成一个get
方法.
000000000000::
jquery选择器值id选择器:
页面的任何操作都需要节点的支撑,开发者如何快速高效的找到指定的节点也是前端开发的一个重点.
jquery提供了一系列的选择器帮助开发者达到这一目的.让开发者可以更少的处理复杂选择过程与性能
优化,更多专注业务逻辑的编写.
id选择器:一个用来查找的id,即元素的id属性.
$("#id")
id选择器也是基本的选择器,jquery内部使用javascript函数document.getElementById()来处理id
的获取。原生语法的支持总是非常搞笑的,所以在操作dom的获取上,如果能采用id的话尽然考虑用
这个选择器。
注意:
id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该
id选择集合中的第一个dom元素。但这种行为不应该发生。有超过一个元素的页面使用相同的id是无效的。
111111111111::
jquery选择器值之类选择器
类选择器,顾名思义,通过class样式类名来获取节点描述:
$(".class");
类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选。
同样的jquery事项,对于类选择器,如果浏览器支持,jquery使用javascript的原生getelementByClassName()
函数来实现的。
22222222222::
jquery选择器之元素选择器
元素选择器:更具给定(html)标记名称选择所有的元素
描述: $("element");
搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getelementByTagName()
函数支持。
var divs = document.getElementByTagName('div');
得到页面所有的div元素。
333333333::
jquery选择器之全选择器(*选择器)
在css中,经常会在第一行写下这样一段样式:
*{padding:0px; margin :0px; }
通配符*意味着给所有的元素设置默认的编剧。jquery中我们也可以通过传递*选择器来选中文档页面中的元素。
描述: $("*");
44444444444::
jquery选择器之层级选择器
文档中的所有的节点之间都是有这样活着那样的关系。我们可以吧节点之间的关系可以用传统的
家族关系来描述。可以吧文档树当做一个家谱,那么节点与节点直接就会存在斧子,兄弟,祖孙的关系了。。
选择其中的层级选择器就是用来处理这种关系的
子元素 后代元素 兄弟元素 相邻元素
通过一个列表,对比层级选择器的区别:
通过一个列表,对比层级选择器的区别
选择器 描述
$("parent > child") 子选择器::选择所有指定“parent”元素中指定的“child”的直接子元素
$("ancestor descendant") 后代选择器:选择给定的祖先元素的所有后代元素,一个元素的后代可能是该元素的一个孩子,孙子等
$("prev +next") 相邻兄弟选择器:选择所有紧接在“prev”元素后的“next” 元素
$("prev ~ siblings") 一般兄弟选择器:匹配“prev”元素之后的所有兄弟元素,具有相同的父元素,并匹配过滤“siblings”选择器。
异同点::
层级选择器都有一个参考节点。
后代选择器包含了子选择器的选择的内容。
一般兄弟选择器包含相邻兄弟选择器所选择到的元素,必须在同一个父元素下。。。
jquery及jquery常用选择器使用的更多相关文章
- JQuery的常用选择器 转
JQuery的常用选择器 刚开始学JQuery写的如有错误欢迎批评指正 JQuery拥有的选择器可以让我们更快更方便找到想要的元素,然后对相应的元素进行操作 简单介绍一下一些常用的选择器: 1.基本选 ...
- jQuery常用选择器总结
jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...
- js和jQuery常用选择器
笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...
- jquery 常用选择器和方法以及遍历(超详细)
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- 【学习笔记】锋利的jQuery(一)选择器
一.要点阐述 1,jQuery创建于2006年1月的一个开源项目,强调理念是“write less,do more”,压缩后大小30KB左右.. 2,jQuery里的方法都被设计程自动操作对象集合,而 ...
- jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
- jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要 选择器(第一节) 选择器的扩展方法(第一节) ...
- jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言 距离上次博客更新已经有二十来天了(●′ω`●) ...
- Python全栈开发之路 【第十五篇】:jQuery的介绍和选择器
本节内容 什么是jQuery? write less,do more. jQuery是一个快速,小巧,功能丰富的JavaScript库. 它通过易于使用的API在大量浏览器中运行,使得HTML文档遍历 ...
随机推荐
- php 网站301重定向设置代码实战案例
php 网站301重定向设置代码实战案例 301重定向就是页面永久性移走的意思,搜索引擎知道这个页面是301重定向的话,就会把旧的地址替换成重定向之后的地址. 302重定向就是页面暂时性转移,搜索引擎 ...
- Chrome插件消息传递实例
首先吐槽"360极速浏览器应用开发平台"的开发文档,在消息传递(http://open.chrome.360.cn/extension_dev/messaging.html)一节中 ...
- Oracle中字符串连接的实现方法
1.和其他数据库系统类似,Oracle字符串连接使用“||”进行字符串拼接,其使用方式和MSSQLServer中的加号“+”一样. 例如: SELECT '工号为'||FNumber||'的员工姓名为 ...
- Python+OpenCV图像处理(十)—— 图像二值化
简介:图像二值化就是将图像上的像素点的灰度值设置为0或255,也就是将整个图像呈现出明显的黑白效果的过程. 一.普通图像二值化 代码如下: import cv2 as cv import numpy ...
- The Little Prince-11/30
The Little Prince-11/30 Today, I have a meeting in our department. I sincerely hope that all of my d ...
- Android Camera2 参数调节关键字翻译集合,常用关键字解析
https://blog.csdn.net/qq_29333911/article/details/79400617 black_level_lock黑电平补偿是否锁定当前值,或者可以自由更改.col ...
- oracle parallel_index hint在非分区表的生效
之前没特别注意,在有些场景下希望使用并行索引扫描的时候,发现parallel_index hint并没有生效,于是抽空看了下文档:The PARALLEL_INDEX hint instructs t ...
- visual studio 2015下使用gcc调试linux c++开发环境搭建完整详解
一直以来,相信绝大部分的开发都是windows/mac下做开发,尤其是非嵌入式和qt系的,而开源服务器程序绝大部分都是跑在Linux下,几乎就没有跑在windows下的.一直以来开发人员都是在wind ...
- j2ee分布式缓存同步实现方案dlcache
现成的分布式K/V缓存已经有很多的实现,最主要的比如redis,memcached,couchbase.那为什么我们还要自己去实现呢,在我们解决了分布式系统下大量rpc调用导致的高延时后,我们发现很多 ...
- 08: MySQL慢查询
1.1 寻找慢查询 定义:我们将超过指定时间的SQL语句查询称为“慢查询”. 1.在mysql日志中开启慢查询日志 1. 修改配置文件 在 my.ini 增加几行: 主要是慢查询的定义时间(超 ...