20150303+JQuery选择器-02

20150303+JQuery选择器-02

文档处理

插入

删除

复制

替换

包裹

查找

1、插入操作——内部插入

jQuery

<div> jQuery hello jQuery</div>

l append(content) :将content内容插入到元素的尾部

l appendTo(content) :将匹配到的元素插入到content元素尾部

l prepend(content) :将content内容插入到元素的头部

l prependTo(content) :将匹配到内容插入到content元素的头部

demo07_nc.html

wps9BE8.tmp

2、插入操作——外部插入

Linux <div> hello </div> Linux

l after(content) :在元素的尾部插入content内容

l before(content) :在元素的头部插入content内容

l insertAfter(content) :将匹配到的内容插入到content元素的尾部

l insertBefore(content) :将匹配到的内容插入到content元素的头部

demo08_wc.html

wps9C08.tmp

3、删除操作

<div>content</div>

l empty() :清空元素内容(但不清楚元素本身)

l remove() :清空整个元素(包括元素及内容)

demo09_del.html

wps9C18.tmp

4、复制克隆)操作

l clone() :克隆元素(但不包含事件)

l clone(true) :克隆元素(包含元素本身绑定的事件)

demo10_clone.html

wps9C48.tmp

案例05:实时购物车

anli05.html

wps9C59.tmp

运行效果:

wps9C5A.tmp

5、替换操作

html():实现对元素的内容替换

replaceWith() :实现对元素本身进行替换

demo11_replace.html

wps9C7A.tmp

还可以采用以下方式进行元素替换:

wps9C7B.tmp

在jQuery我们采用采用$来标识变量为jQuery对象,如$li

6包裹操作

<strong><span>文本信息</span></strong>

l wrap() :对每个元素进行包裹

l wrapAll() :对整个匹配元素进行统一包裹操作

l wrapInner() :对元素的内容进行包裹

demo12_wrap.html

wps9C9B.tmp

7、查找操作

l eq(index) :通过元素的索引匹配元素,默认索引从0开始

l filter(expr) :通过class进行元素过滤匹配元素

l not(expr) :匹配不是指定选择器元素

l children([expr]) :匹配所有子元素,里面可以加标识(子元素)

l find(expr) :通过后代选择器查找元素(后代元素)

l next([expr]) :查找下一个元素(相邻的)

l prev([expr]) :查找上一个元素(相邻的)

l parent([expr]) :查找当前元素的父元素

demo13_find.html

wps9CBC.tmp

综合案例:表格编辑器

wps9CCC.tmp

anli07.html

wps9CDD.tmp

运行效果:

wps9CEE.tmp

、jQuery插件扩展

在jQuery中,有些情况下,常用的方法或功能在jQuery中并没有进行封装,我们可以采用jQuery提供的接口实现对jQuery的扩展操作。

基本语法:

jQuery.fn.extend(object) :

参数说明:

要求参数是一个json对象

名/值对

要扩展的函数名称:函数的处理程序

语法:

jQuery.fn.extend({

fn1:function(){},

fn2:function(){},

......

});

由于jquery.js框架文件中存在以下代码

wps9CFE.tmp

我们还可以使用如下方式进行扩展:

$.fn.extend({

fn1:function(){},

fn2:function(){},

......

});

demo14_extend.html

wps9D0F.tmp

案例7:全选、全不选、反选功能实现

插件实现:

wps9D2F.tmp

绑定过程

wps9D4F.tmp

html代码:

wps9D70.tmp

运行效果:

wps9D90.tmp

、瀑布流布局(百度图片、花瓣网)

Wookmark.js 瀑布流布局

posted on 2016-05-07 22:19 山山未迟 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lifushan/p/5469363.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430566.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java实现记事本查找_Java实现记事本

首先说明&#xff0c;这是可能本人大学所写的最后一个Java程序了&#xff0c;接下来写C。一直想写这个程序很久了&#xff0c;作为跟计算器类似的经典小程序&#xff0c;写一下还是挺有意义的。本来觉得这程序不难写&#xff0c;其实各个部分综合起来&#xff0c;还是挺麻烦的&…

机器学习 —— 概率图模型(Homework: CRF Learning)

概率图模型的作业越往后变得越来越有趣了。当然&#xff0c;难度也是指数级别的上涨啊&#xff0c;以至于我用了两个周末才完成秋名山神秘车牌的寻找&#xff0c;啊不&#xff0c;CRF模型的训练。 条件随机场是一种强大的PGM&#xff0c;其可以对各种特征进行建模&#xff0c;同…

java生成四则运算表达式_生成四则运算(java实现)

|博客班级 | https://edu.cnblogs.com/campus/ahgc/AHPU-SE-19/ ||作业要求 | https://edu.cnblogs.com/campus/ahgc/AHPU-SE-19/homework/11376||作业目标 | 写一个能自动生成小学四则运算题目的程序 ||学号 | 3190704130 |代码如下&#xff1a;//main函数所在区域主要实现生成…

Kali Linux—借助 SET+MSF 进行网络钓鱼、生成木马、获主机shell、权限提升、远程监控、钓鱼邮件等完整渗透测试(三)

钓鱼邮件 当攻击者制作了钓鱼网站、木马程序后&#xff0c;便会想法设法将其传给受害者&#xff0c;而常见的传播方式便是钓鱼网站了。安全意识较差的用户在收到钓鱼邮件后点击邮件中的钓鱼链接、下载附件中的木马程序&#xff0c;便可能遭受攻击&#xff01; 工具简介 Swak…

struts2拦截器详解

在之前的文章中&#xff0c;我们已经涉及到了拦截器&#xff08;Interceptor&#xff09;的概念。 downpour 写道拦截器是AOP中的概念&#xff0c;它本身是一段代码&#xff0c;可以通过定义“织入点”&#xff0c;来指定拦截器的代码在“织入点”的前后执行&#xff0c;从而起…

为什么选用 React 创建混合型移动应用?

【编者按】本文作者为 14islands 联合创始人、创新 Web 开发者 David Lindkvist&#xff0c;主要介绍有关混合型应用搭建的方方面面。文章系国内 ITOM 管理平台 OneAPM 编译呈现。 最近&#xff0c;我们有幸与 Fjord 合作&#xff0c;从零开始为其用户打造了一款 HMTL5 混合型应…

python中减法运算函数_OpenCV-Python图像的减法运算cv2.subtract函数详解以及和矩阵减...

OpenCV-Python图像的减法运算cv2.subtract函数详解以及和矩阵减OpenCV-Python图像的减法运算cv2.subtract函数详解以及和矩阵减法的差异对比? ? 前往老猿Python博文目录 ?在《OpenCV-Python图像的加法运算cv2.add函数详解》详细介绍了图像的加法运算&#xff0c;有加法就有减…

数据访问......单条件查询与多条件查询

一. 将数据库数据访问封装成类 <?php class DB {public $host "localhost"; //服务器地址public $uid "root"; //用户名public $pwd "123"; //密码//执行SQL语句,返回相应结果的方法//$sql代表要执行的SQL语句,$type代表…

java集合类分析-hashset

一、 HashSet概述&#xff1a; HashSet实现Set接口&#xff0c;由哈希表&#xff08;实际上是一个HashMap实例&#xff09;支持。它不保证set 的迭代顺序&#xff1b;特别是它不保证该顺序恒久不变。此类允许使用null元素。 二、 HashSet的实现&#xff1a; 对于HashSet而言&…

站立会议 2

这是我们的第二次人员集中&#xff0c;主要是讨论一下接下来的一些工作安排&#xff0c;还有讨论一下在准备过程中出现的一些问题&#xff01; 项目进展&#xff1a; 今天的会议中&#xff0c;我们讨论了我们的项目进展&#xff0c;结果是&#xff1a;我们都已经找到了小球还有…

转为win64后, MS的lib问题

> 正在创建库 C:\Users\Administrator\Desktop\branch-Unicode-156\\Temp\Link\PointCloudMeasure\x64\Debug\PointCloudMeasure.lib 和对象 C:\Users\Administrator\Desktop\branch-Unicode-156\\Temp\Link\PointCloudMeasure\x64\Debug\PointCloudMeasure.exp1>vtkXM…

php redis 搜索,PHP+Redis有序集合(zset)实现博客园阅读排行榜功能

许多网站都有排行榜的功能&#xff0c;比如球员人气榜单、阅读排行榜&#xff0c;对于一些小网站&#xff0c;通过查数据库就能实现排行榜的功能&#xff0c;但是对于稍微有点用户量而且还是实时排名的网站&#xff0c;使用一些关系型数据库如(MySQL、Oracle)等来实现就有点力不…

iOS 开发疑难杂症(01)

搜了好多博客&#xff0c;技术网站&#xff0c;答案都不统一&#xff0c;今天偶然发现一个解决方案&#xff1a;这个问题一般是重复导入&#xff0c;使用include的问题&#xff0c;不过iOS一般不用include&#xff0c;所以这个不是正解&#xff0c;还有就是预编译文件&#xff…

cJONS序列化工具解读二(数据解析)

cJSON数据解析 关于数据解析部分&#xff0c;其实这个解析就是个自动机&#xff0c;通过递归或者解析栈进行实现数据的解析 /* Utility to jump whitespace and cr/lf *///用于跳过ascii小于32的空白字符 static const char *skip(const char *in) { while (in && *in…

小米范工具系列之二:小米范 web目录扫描器

最新版本1.1&#xff0c;下载地址&#xff1a;http://pan.baidu.com/s/1c1NDSVe 文件名scandir&#xff0c;请使用java1.8运行 小米范web目录扫描器主要功能是探测web可能存在的目录及文件&#xff0c;界面如下&#xff0c;左侧为发现的url&#xff0c;中间为浏览器&#xff0…

php中介者,PHP设计模式 - 中介者模式

【一】模式定义中介者模式(Mediator)就是用一个中介对象来封装一系列的对象交互&#xff0c;中介者使各对象不需要显式地相互引用&#xff0c;从而使其耦合松散&#xff0c;而且可以独立地改变它们之间的交互。对于中介对象而言&#xff0c;所有相互交互的对象&#xff0c;都视…

dedecms模版php,dedecms专题模板怎么用

dedecms专题模板怎么用&#xff1f;DeDeCms的专题相关信息bbs上相对较少&#xff0c;之前查阅了很多资料都未找到其解决方案推荐学习&#xff1a;织梦cms无柰只有靠自己动手丰衣足食&#xff1b;在官方的版本上有这样的一段话&#xff1a;1、文章列表用ID1,ID2,ID3这样形式分开…

Windows中断那些事儿

搞内核研究的经常对中断这个概念肯定不陌生&#xff0c;经常我们会接触很多与中断相关的术语&#xff0c;按照软件和硬件进行分类&#xff1a; 硬件CPU相关&#xff1a; IRQ、IDT、cli&sti 软件操作系统相关&#xff1a; APC、DPC、IRQL 一直以来对中断这一部分内容弄的一知…

(1-1)文件结构的升级(Area和Filter知识总结) - ASP.NET从MVC5升级到MVC6

ASP.NET从MVC5升级到MVC6 总目录 MVC5项目结构 带有Areas和Filter的项目结构 一般来说&#xff0c;小的MVC项目是不考虑领域的&#xff0c;但是&#xff0c;如果是稍微复杂一点的项目&#xff0c;往往是需要领域这个概念的。 一个领域就是一个小型的MVC项目&#xff0c;所以领域…

重启模块与及关开邮件存储设置功能页面-PHP-shell-py

邮件系统几百台&#xff0c;每台负责 grep -P "^ip\d.\d." /home/mymail/newconf/hosts.conf -c465 每台机器负责启动的模块又是不一样的如&#xff1a; A机器&#xff1a; ProgramsList"1svr,2svr,3svr,4svr," b机器&#xff1a; ProgramsList"asvr,…