JavaScript大杂烩14 - 使用JQuery(上)
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
这是引用CDN上的文件,通常大家也会把这个类库下载下来放到本地,然后引用。
var domObj = document.getElementById('testDiv');
var jQueryObj = $(domObj);
而JQuery对象作为一个DOM对象的包装集,使用索引值的方式获取的就是DOM对象,如下面例子中的获取第1个元素:
var domObj = $('#testDiv')[0];
var domObj = $("#testDiv").get(0);
当然了,JQuery对象枚举的时候返回的也是DOM对象,如下所示:
$("#testDiv").each(function() { alert(this); });
这个例子中的this就是DOM对象。
$(selector).action(parameters);
下面分别看看这两个部分:
// 基础选择器
$('#testDiv') // 选择id为testDiv的元素,一般id在整个页面是唯一的
$('p') // 选择页面中所有的p元素
$('.big') // 选择页面中所有的CSS类为big的元素
// 选择器的与或关系
$('.big,p') // 选择页面中所有CSS类为big的元素和所有的p元素
$('p#testDiv') // 选择页面中所有的CSS类为big的p元素
// 层次选择器
$('form input') // 选择页面中所有的form元素下面的所有的input元素
$('form>input') // 选择页面中所有的form元素下面直接属于form的input元素
$('#name+img') // 选择页面中id为name的元素后面紧跟着的img元素
$('#name~img') // 选择页面中id为name的元素后面所有的img元素
// 各种条件的过滤器:索引值,内容过滤,属性过滤,子元素过滤
$('tr:first'), $('tr:last') // 选择第一行/最后一行表格
$('input:not(:checked)') // 选择页面中没有被checked的input,not后面的参数可以是任意的选择器
$('tr:even'), $('tr:odd') // 偶数行/奇数行
$('tr:eq(1)'),$('tr:gt(1)'), $('tr:lt(1)') // 满足条件的第二行/第二行后面的/第二行前面的
$(':header') // 所有h1, h2, h3元素
$('div:not(:animated)') // 所有没有在执行动画效果的div
$("div:contains('Name')") // 所有内容中含有Name字符串的div
$('div:has(p)') // 所有含有p元素的div
$('tr:hidden'), $('tr:visible') // 隐藏/显示的行
// 所有有id属性的div/id值为name的div/id值不为name的div
$('div[id]'), $("div[id='name']"), $("div[id!='name']")
// 所有id属性值以name开头/结尾/包含name的div
$("div[id^='name']"), $("div[id$='name']"), $("div[id*='name']")
// 满足多个属性条件的div
$("div[id='name'][name$='man']")
// 在每个ul中查找第2个li,nth-child后面的参数可以是even, odd, index值, 倍数如3n, 3n+1等等。
// 注意这个参数是从1开始的,而eq()是从0开始的。
$('ul li:nth-child(2)')
// 在每个ul的子元素中中查找第一个/最后一个li
$('ul li:first-child'), $('ul li:last-child') // 表单选择器与过滤器:
// 选择所有的input/text/password...
$(':input'), $(':text'), $(':password'), $(':radio'), $(':checkbox')
$(':button'), $(':submit'), $(':image'), $(':reset'), $(':file')
// 选择启用/禁用/checked/选中的input,option
$(':input:enabled'), $(':input:disabled'), $(':input:checked'), $('select option:selected')
$('<li class="greet">test</lt>')
上面代码从HTML代码生成了一个jQuery实例,它与从CSS选择器生成的jQuery实例完全一样。唯一的区别就是,它对应的DOM结构不属于当前文档。
$('li', someElement);
上面代码表示,只寻找属于someElement对象下属的li元素。someElement可以是jQuery对象的实例,也可以是DOM对象。
// first方法返回结果集的第一个成员,last方法返回结果集的最后一个成员。
$("li").first()
$("li").last()
// next方法返回紧邻的下一个同级元素,prev方法返回紧邻的上一个同级元素。
// 如果next方法和prev方法带有参数,表示选择符合该参数的同级元素。
$("li").first().next()
$("li").last().prev()
$("li").first().next('.item')
$("li").last().prev('.item')
// parent方法返回当前元素的父元素,parents方法返回当前元素的所有上级元素(直到html元素)。
// parent, parents, children这三个方法都接受一个选择器作为参数。
$("p").parent()
$("p").parent(".selected")
$("p").parents()
$("p").parents("div")
// children方法返回选中元素的所有子元素。
$("div").children()
$("div").children(".selected")
// 等同于
$('div > *')
$('div > .selected')
// siblings方法返回当前元素的所有同级元素。
$('li').first().siblings()
$('li').first().siblings('.item')
// nextAll方法返回当前元素其后的所有同级元素,prevAll方法返回当前元素前面的所有同级元素。
$('li').first().nextAll()
$('li').last().prevAll()
当然除了这些与DOM操作类似的获取parent, child, sibling(兄弟节点)的操作外,JQuery还提供了其它的一些相当强大的过滤操作,例如:
// closest方法返回当前元素,以及当前元素的所有上级元素之中,第一个符合条件的元素。
// find方法返回当前元素的所有符合条件的下级元素。
$('li').closest('div')
$('div').find('li')
// add方法用于为结果集添加元素。
$('li').add('p')
// addBack方法将当前元素加回原始的结果集。
$('li').parent().addBack()
// end方法用于返回原始的结果集
$('li').first().end() // filter方法用于过滤结果集,它可以接受多种类型的参数,只返回与参数一致的结果。
// 返回符合CSS选择器的结果
$('li').filter('.item')
// 返回函数返回值为true的结果
$("li").filter(function(index) {
return index % 2 === 1;
})
// 返回符合特定DOM对象的结果
$("li").filter(document.getElementById("unique"))
// 返回符合特定jQuery实例的结果
$("li").filter($("#unique"))
// not方法的用法与filter方法完全一致,但是返回相反的结果,即过滤掉匹配项。
$('li').not('.item')
// has方法与filter方法作用相同,但是只过滤出子元素符合条件的元素。
$("li").has("ul")
// 上面代码返回具有ul子元素的li元素。
上面代码中的需要说明两点:
JavaScript大杂烩14 - 使用JQuery(上)的更多相关文章
- JavaScript(14)jQuery(JavaScript 库)
JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时.为了应对这些调整,很多的 JavaScript (helper) 库应运而 ...
- JavaScript大杂烩15 - 使用JQuery(下)
前面我们总结了使用各种selector拿到了jQuery对象了,下面就是对这个对象执行指定的行为了. 2. 操作对象 - 行为函数action 执行jQuery内置的行为函数的时候,JQuery自动遍 ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- jquery上传文件控件Uploadify
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- jQuery上定义插件并重设插件构造函数
插件alert的全部代码,每个插件都定义在如下类似的作用域中: +function ($) { 'use strict'; // ALERT CLASS DEFINITION // ========= ...
- jQuery上传插件Uploadify使用帮助
Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.它的功能特色总结如下: 支持单文件或多文件上传,可控制并发上传的文件数 在服务器端支持各种语言与之配合使用,诸如PHP, ...
- JQuery上传插件uploadify优化
旧版的uploadify是基于flash上传的,但是总有那么些问题,让我们用的不是很舒服.今天主要分享下在项目中用uploadify遇到的一些问题,以及优化处理 官方下载 官方文档 官方演示 下面是官 ...
- jquery 上传空间uploadify使用笔记
基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个 ...
- jquery上传控件个人使用
转了一篇jquery的上传控件使用博文,但是,经过测试貌似不行,自己研究了一下,效果实现.记下,以后使用. 下载“Uploadify”,官方版本为php的,很多文件不需要,删除带.php的文件. &l ...
随机推荐
- django xlwt实现资产导出功能
做个记录 views import xlwt class ExAssetView(LoginRequiredMixin,View): def get(self,request): row = 1 st ...
- 21天打造分布式爬虫-requests库(二)
2.1.get请求 简单使用 import requests response = requests.get("https://www.baidu.com/") #text返回的是 ...
- mysql遇见contains nonaggregated column 'information_schema.PROFILING.SEQ'异常
报错如下:[Err] 1055 - Expression #1 of ORDER BY clause is not in GROUP BY clause and contains nonaggrega ...
- java 面试基础总结(二)---多线程
1.实现多线程的三种方法 1.继成Thread 类,覆盖run()方法即可 2.implements Runnable接口 3.implements Callale接口,执行时通过FutureTask ...
- 扩展方法IEnumerable<T>转换为IList<SelectListItem> ,提供@Html.DropDownList使用
由于在MVC中经常会使用到@Html.DropDownList方法,而该方法接收的是List<SelectListItem> 参数,因此就想着写一个扩展方法,直接把IEnumerable转 ...
- LoadRuner12.53教程(三)
教训1:建立一个Vuser Script jiào教 xùn训 1 : jiàn建 lì立 yī一 gè个 V u s e r S c r ...
- 实现text-detection-ctpn一路的坎坎坷坷
小编在学习文字检测,因为作者提供的caffe实现没有训练代码(不过训练代码可以参考faster-rcnn的训练代码),所以我打算先使用tensorflow实现,主要是复现前辈的代码,主要是对文字检测模 ...
- JavaWeb学习 (十三)————JSP
一.什么是JSP? JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写h ...
- windows下mongodb基础玩法系列一介绍与安装
windows下mongodb基础玩法系列 windows下mongodb基础玩法系列一介绍与安装 windows下mongodb基础玩法系列二CURD操作(创建.更新.读取和删除) windows下 ...
- Java设计模式学习记录-外观模式
前言 这次要介绍的是外观模式(也称为门面模式),外观模式也属于结构型模式,其实外观模式还是非常好理解的,简单的来讲就是将多个复杂的业务封装成一个方法,在调用此方法时可以不必关系具体执行了哪些业务,而只 ...