] ) 反绑定,从每一个匹配的元素中删除绑定的事件。...JQuery Traversing 方法说明 eq( index ) 从匹配的元素集合中取得一个指定位置的元素,index从0开始 filter( expr ) 返回与指定表达式匹配的元素集合,可以使用...map( callback ) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。...add( expr ) 把与表达式匹配的元素添加到jQuery对象中。 children( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...andSelf( ) 将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素,添加border类属性。
个div添加样式 div:nth-child(2){ color:white; } 同一父级中,所有奇数div标签添加样式 div:nth-child(odd){ color:black...; } 同一父级中,所有偶数元素添加样式 div:nth-child(even){ color:black; } 同一父级中,第1,4,7,10,13…个元素添加样式 div:nth-child...(3n+1){ color:red; } 同一父级中,第2,5,8,11,14…个元素添加样式 div:nth-child(3n+2){ color:red; } 同上,只不过是从下往上数... div:nth-last-child(3){ color:white; } 同一父级中,给第2个mark标签样式 mark:nth-of-type(2){ display:block...; } 同一父级中,给倒数第2个mark标签样式 mark:nth-last-of-type(2){ display:block; } 同一父级中,给第一个元素添加样式 p:first-child
另外值得注意的是,因为原来的文章首页发生了移动,搜索使用的 search.json 配置文件也要复制一份,这样能同时保证不同目录下的搜索功能。...由于博客原来首页移动到子目录 blog 下,相应的博客分页展示页中的卡片链接、分页链接、标签链接等等都需要做出修改。...,使用的也是同一个页面模板,只是内容稍有不同。...important; } } 另外,也需要在 _config.yml 文件中在导航栏中添加链接,如下所示。...最后将以下代码添加到 _layouts/post.html 相应的位置即可,一般来说在写作时间下面较佳。
属性值包含"section"字符串的div元素。...= red; } 复制代码 h1中包含两个strong,都符合子代关系。...2.兄弟选择器(+、~) 兄弟选择器用来选择与某元素位于同一父元素之中,且位于该元素之后的兄弟元素。...临近兄弟选择器(+):该选择器使用‘+’来链接前后两个选择器,选择器中的两个元素有同一父亲,而且第二个元素必须紧跟第一个元素。...(老大跟老二,老二跟老三) 普通兄弟选择器(~):该选择器使用‘~’来链接前后两个选择器,选择器中的两个元素有同一父亲,但第二个不必紧跟第一个元素。
案例:发布微博案例 点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 点击的删除按钮,可以删除当前的微博留言。 jQuery 多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现...div> div> div> 复制js代码,启动js插件。...1.7.3 案例:toDoList 按下回车把新数据添加到本地存储里面 切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。...1.7.5 案例:toDoList 删除操作 点击里面的a链接,不是删除的li,而是删除本地存储对应的数据。
即 $('body').length; // 将会返回文档中该元素的数量,从1开始 $('body')[0]; // 等同于 document.body 同样的,size替代length属性,get...jQuery将会使用同一个方法既当getter又做setter,而不是定义一对方法,如果传入一个新值给方法,则它将设置此值。 用做setter时,这些方法会给jquery对象中的每个元素设置值。...设置样式的时候,css是直接添加到style属性中 $('h1').css('font-weight'); // 获取第一个h1的字体宽度 $('h1').css('fontWeight'); // 同理...div>'); // 将文档中的所有链接复制并插入该新div中 $('a').clone().appendTo('#linklist'); // clone不会复制事件处理程序 // 在每一个链接后插入...').wrap('div class="first">div>'); // 将所有的其他段落包装在另一个div里 $('body > p:not(:first
第一个选项是简单地链接到另一个页面,这可以与用户的响应关联。...在 jQuery Mobile 中,页眉的默认用法是作为固定在 Web 页面顶部的页面标题;在大部分情况下,页脚是 Web 页面中的最后一个元素,并且包括版权信息、其他超链接等内容。...> div> navbar 还有另一个很好的特性,您可以在每个按钮内包括自定义图标。...该列表项还包括一个用作在对话框中购买该列表项的一个超链接的图标。您也可以使用 data-split-icon 属性,修改显示在列表项右侧的拆分按钮的默认图标。 另一个有用的基本列表增强是列表分隔符。...在这种情况下,您就会有一个长列表,它看起来几乎是无法使用的,而搜索筛选器栏就是处理该问题的一个很好的方式。很幸运,使用 jQuery Mobile 将搜索筛选器栏添加到列表中并不需要花很大功夫。
从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。...如果在插入操作之前我们将这些项包装在UL标签中,然后把完整的UL插入到另一个DIV标签中,那么我们实际上仅仅插入一个标签而不是1000个,这看起来要更高效些。...使用noConflict重命名jQuery对象 大多数JavaScript框架都使用$符号作为缩写,当在同一个页面使用多个JS框架时,页面很容易发生冲突。幸运的是有一个简单的方法。...首先,在jQuery加载之后你可以使用方法将”JS”类添加到HTML标签中: 复制代码代码如下:$(‘HTML’).addClass(‘JS’); 因为这仅仅发生在javascript有效的时候,如果用户打开...有些时候你会注意到在点击链接后锚点会跳转到页面上部。 所有你要做的就是阻止它的默认行为,或者实际上你可以把”return false;”添加到任何事件的默认行为上。
浅复制一个元素 var li = ('li:first').clone(false) // 将复制的元素加入的ul中 ('ul').append( 深复制123456('button'...深复制一个元素 var li = ('li:first').clone(true) // 将复制的元素加入的ul中 ('ul').append( 深复制、浅复制的区别 浅复制只会复制元素本身...而深复制则会连同绑定事件一同复制。 ? 复制一个元素 var $li = $('li:first').clone(true) // 将复制的元素假如的ul中...jQuery部分逻辑思路 监听发送按钮 有内容 生成DIV,并添加 无内容 按钮禁止点击 生成div 获取用户输入内容,将内容作为DIV的内容进行生成 插入DIV 获取插入容器,在其顶部插入 顶/踩
3.获取CSS代码 选择适合自己需要的动画后,你可以直接从网站种获取代码。...你也可以选择压缩版的代码。 4.下载选择的动画 另一个惊奇的功能是,你可以将喜欢的动画的代码放到你的列表中,并仅下载你喜欢的动画代码。或者你可以将这些动画代码复制到一起。...div class="animated slideInLeft delay-{1-5}">div> 复制代码 速度 你可以通过添加下表中的类来控制动画的速度。...如果在这里都找不到你想要的动画,那你在哪都找不到了。 它的使用方式类似animista。比如,你可以直接选择动画,然后直接从网站中获取,或者下载整个库。...使用 使用很简单:将类名添加到你的元素中,比如: Hover me!
案例:发布微博案例 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中。 2.点击的删除按钮,可以删除当前的微博留言。 代码实现略。...多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现,这种情况被称为...(jQuery 文件 和 插件文件) 复制相关html、css、js (调用插件)。 1.4.1. 瀑布流插件(重点讲解) 我们学习的第一个插件是jQuery之家的开源插件,瀑布流。...div> div> div> 复制js代码,启动js插件。...1.7.3 案例:toDoList 按下回车把新数据添加到本地存储里面 // 1.切记: 页面中的数据,都要从本地存储里面获取,这样刷新页面不会丢失数据,所以先要把数据保存到本地存储里面。
[title='我的文件']" nth-child(2)表示取div的第二个 子元素选择器(>),表示只能选择下一级的元素 例如:#ab>p 含义:匹配id为ab的下一级中的p标签 实例(f-data-copy-detail...XPATH://div/input CSS: div>input 后代元素 如果一个元素在另一个元素的内部(子元素或者孙元素),则它在 XPATH 中使用“//”定义,而在 CSS 中仅使用空格定义...XPATH://div//input CSS: div input ID定位 XPATH 中的元素 id 使用以下内容定义:"[@id=‘kw’]",而在CSS中使用:"#kw"。...XPATH://input[@class="s_ipt"] CSS: input.s_ipt 弟弟元素:after-sibling 继兄弟 这对于表单元素非常有用,即页面中位于同一父节点内的下一个相邻元素...XPATH://input[@class="s_ipt"]/after-sibling::a CSS:input[class="s_ipt"]+a 哥哥元素:berfore-sibling 前兄弟 页面中位于同一父节点内的上一个相邻元素
$("ul").toggle(); }); 事件的动态绑定 对 dom 元素绑定事件的另一种写法 绑定一个事件 $(".del").on('click', function(...(){ // 1 秒内变成 50% 的透明度 $("div").fadeTo(1000,0.5); }); 链 链是允许在同一个元素上在一条语句中运行多个...jQuery 方法,可以把动作/方法链接在一起。..."); // 获得 div 中的内容(包含标签信息) alert($("div").html()); // 获得 div 中的内容(不包含标签信息,只包含文本内容...) alert($("div").text()); // 修改 div 中的内容(全部内容都覆盖) $("div").text("祖国万岁!")
div>"); 网页原本只有一个包含超链接的div,我们通过append方法向该div内的尾部插入了一个新的div 网页上原本存在的是边框为实线的div,而边框是虚线的是新插入的...7.1.3 删除节点 删除节点指的是把现有的元素从网页中删除,这时可以通过jQuery提供好的一些函数来实现,详见表7-1-2所示。...id='wai'>div>"); 上述代码使用wrapInner函数包裹ul中的所有li子元素 7.1.6 复制节点 clone函数用来复制节点,下面是该函数的一个示例。...,复制到了另一个下拉列表框中。...表7-1-4 节点过滤函数 节点过滤函数 说明 eq( ) 按索引获取匹配元素中的第n个元素,索引从0开始 first( ) 获取匹配元素中的第1个元素 last( ) 获取匹配元素中的最后1
div>"); 网页原本只有一个包含超链接的div,我们通过append方法向该div内的尾部插入了一个新的div 网页上原本存在的是边框为实线的div,而边框是虚线的是新插入的div...7.1.3 删除节点 删除节点指的是把现有的元素从网页中删除,这时可以通过jQuery提供好的一些函数来实现,详见表7-1-2所示。...id='wai'>div>"); 上述代码使用wrapInner函数包裹ul中的所有li子元素 7.1.6 复制节点 clone函数用来复制节点,下面是该函数的一个示例。...,复制到了另一个下拉列表框中。...表7-1-4 节点过滤函数 节点过滤函数 说明 eq( ) 按索引获取匹配元素中的第n个元素,索引从0开始 first( ) 获取匹配元素中的第1个元素 last( ) 获取匹配元素中的最后1个元素
我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。...jQuery设计思想之四,就是使用同一个函数,来完成取值(getter)和赋值(setter),即"取值器"与"赋值器"合一。到底是取值还是赋值,由函数的参数决定。 ...五、元素的操作:移动 jQuery设计思想之五,就是提供两组方法,来操作元素在网页中的位置移动。一组方法是直接移动该元素,另一组方法是移动其他元素,使得目标元素达到我们想要的位置。....appendTo()和.append():在现存元素的内部,从后面插入元素 .prependTo()和.prepend():在现存元素的内部,从前面插入元素 六、元素的操作:复制、删除和创建...$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。 $.grep() 返回数组中符合某种标准的元素。
于是,为了在有限的空间里容纳更多的内容,滑动门式的标签切换(Tabs)方式越来越受欢迎。通过滑动门技术,可以在同一块页面区域内放置数倍的内容。根据用户的选择来决定显示哪一部分。...但是我在实际应用中遇到了一些问题,除了 jQuery UI 自带的 JS 脚本很大,CSS 不符合实际应用需求外,还有一个最大的问题,你可能已经注意到了,在作为导航的标签定义中,每个标签对应哪一个区域是用链接目标来定义的...而且,这种方式来带来另一个麻烦,就是当我们需要给标签加上链接的时候,没办法加。即使你将标签的激活事件设置为 onmouseover 而不是 onclick, 链接也不能实现,因为链接用于指定目标了。...这种需求在我们的实际应用中并不是不存在的。比如: 两个图片中的 tabs 标签,都要添加到对应的新闻类别或者论坛板块的链接。这时候 jQuery UI Tabs 的默认绑定就带来了麻烦。...标签中的文字链接到对应的论坛板块。
的div元素 4 $('input[name=first]')//选择name属性等于first的input元素 也可以是jQuery特有的表达式: 1 $('a:first')//选择网页中第一个...a元素 2 $('tr:odd')//选择表格的奇数行 3 $('#myForm :input')//选择表单中的input元素 4 $('div:visible') //选择可见的div元素...jQuery使用同一个函数,来完成取值(getter)和赋值(setter)。到底是取值还是赋值,由函数的参数决定。...五、元素的操作:移动 如果要移动选中的元素,有两种方法:一种是直接移动该元素,另一种是移动其他元素,使得目标元素达到我们想要的位置。 假定我们选中了一个div元素,需要把它移动到p元素后面。...:复制、删除和创建 复制元素使用.clone()。
正如你所见,从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。 4....你是如何将一个 HTML 元素添加到 DOM 树中的?(答案如下) 你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。...好吧,除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次....正如你所见,从语法角度来说,ID 选择器和 class 选择器的另一个不同之处是,前者用字符”#”而后者用字符”.”。更详细的分析和讨论参见上面的答案链接。 4....好吧,除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是,如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次.
map(callback) 将jQuery对象中的一组元素利用callback方法转换其值,然后添加到一个jQuery数组中。 not(expr) 从匹配的元素集合中删除与指定的表达式匹配的元素。...slice(start, [end]) 从匹配元素集合中取得一个子集,和内建的数组的slice方法相同。 add(expr) 把与表达式匹配的元素添加到jQuery对象中。...andSelf() 将前一个匹配的元素集合添加到当前的集合中 取得所有div元素和其中的p元素,添加border类属性。...有如下两种方法: $("div").eq(2).html(); //调用jquery对象的方法 $("div").get(2).innerHTML; //调用dom的方法属性 4、同一函数实现set和...把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返回生成的新数组。