html: div id="open_close" style="display: none...;">hellodiv> jquery: function show(){ if($("#open_close").css("display") == "none"){ $("#open_close
antzone{ width:200px; height:100px; background:#ccc; } jquery.../1.9.0/jquery.js"> $(document).ready(function(){ $("#bt").click(function(){ $...(".antzone").hide() }); }); div class="antzone">div> 点击按钮可以隐藏class属性值为"antzone"的元素。
原生Js与jQuery显示隐藏div的几种方法 简介:本文将会讲解,如何使用原生的JS和jquery来实现对于这个div盒子的隐藏 js 方式一 首先是进行js演示和讲解。...首先是display的方法,display属性的特点为,可以使得div隐藏之后释放占用的页面空间。...div的显示和隐藏,但是隐藏后页面显示空白,功能也消失。...从性能角度分析:第一种方式性能更高,用div.style.display="none"隐藏会引起,div里面的东西休眠,里面的事件就不响应了。 jQuery 使用jQuery的话就会更加的便捷了。...div 通过css方法设置 $(“#id”).css(“display”,“none”);//隐藏div $(“#id”).css(“display”,“block”);//显示div 通过hide与show
比如我要获取倒数第二个li元素,下面就是此功能的演示。 代码如下: 前端 jquery.../1.9.0/jquery.js"> $(document).ready(function(){ var text... 每一天都是新的要好好真心 div id="show">div> 上面的代码实现了我们的要求,实现的原理也非常的简单。...大家eq()的参数为0的时候就是获取第一个元素,为1的时候就是第二个元素,以此类推。 所以当参数为-1的时候理所当然就是倒数第一个,那么-2就是倒数第二个,以此类推。
前两天不知道是哪位同学问的问题,鼠标滑过一个div的时候,怎么控制子集元素属性的出现和隐藏,然后我说用用mouseover和mouseout这两个鼠标事件就行,那如果js不怎么熟悉的时候,可以用CSS:...方法: 使用a 控制其他块的样式: 使用a控制a的子元素 b: .a:hover .b { background-color:blue;...} 效果是这个样子的: ?...demo是昨天的基础上写的: <!...3 div> div> ----
jQuery是一种JavaScript库,实现了常见任务的自动化和复杂任务简单化。 jQuery库为Web脚本编程提供了通用的抽象层,使之适合任何脚本编程情景。...jQuery能满足以下需求: 取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本?...混合选择 eg: $('#selected-plays > li') 子元素选择符 > 查找ID为selected-plays元素的子元素(>)中所有的列表项 ---- jQuery 事件 什么是事件...HTML 元素: //hide元素点击时隐藏标签 $("#hide").click(function(){ $("p").hide(); }); //show元素点击时隐藏标签 $(...显示被隐藏的元素,并隐藏已显示的元素: //点击button隐藏p标签,再次点击显示 $("button").click(function(){ $("p").toggle(); }); 淡入和淡出
1、eq() 筛选指定索引号的元素 2、first() 筛选出第一个匹配的元素 3、last() 筛选出最后一个匹配的元素 4、hasClass() 检查匹配的元素是否含有指定的类...5、filter() 筛选出与指定表达式匹配的元素集合 6、is() 检查元素是否参数里能匹配上的 7、map() 8、has() 筛选出包含指定子元素的元素 9、not() 排除能够被参数中匹配的元素...13、find() 从指定元素中查找子元素 14、next() 获取指定元素的下一个兄弟元素 15、nextAll() 获取其后的所有兄弟元素 16、nextUntil() ...注意参数条件本身不会被匹配 24、siblings() 获取指定元素的兄弟元素,不分前后 25、add() 将选中的元素添加到jQuery对象集合中 26、andSelf() 将自身加到选中的...jQuery集合中,以方便一次性操作 27、end() 将改变当前选择器选中的操作回退为上一个状态。
2、jQuery的作用 jQuery和JavaScript它们的作用一样,都是负责网页行为操作,增加网页和用户的交互效果,只不过jQuery简化了JavaScript编程,jQuery实现交互效果更简单...3、jQuery的优点 jQuery兼容了现在主流的浏览器,增加了程序员的开发效率 jQuery简化了JavaScript编程,代码编写更加简单 4、小结 jQuery是一个免费、开源的JavaScript...事件属性设置了也个函数来获取标签元素,而jquery提供了ready函数来解决这个问题,保证获取标签元素没有问题,它的速度比原生的window.onload更快。...); }) jQuery选择器 1、jQuery选择器的介绍 jquery选择器就是快速选择标签元素,获取标签的,选择规则和css样式一样 2、jQuery选择器的种类 标签选择器 类选择器 id选择器...),把事件加到父级上,通过判断事件来源,执行相应的子元素的操作,事件代理首先可以极大减少事件绑定次数,提高性能;其次可以让新加入的子元素也可以拥有相同的操作。
于是各种HTML5的框架都出来了。由于对于jquery的熟悉,jquery mobile 为多数人选择学习的对象。我也是众多追求者之一。最近一直在开发jQuery Mobile的相关应用。...> div data-role="content"> 点击按钮2,隐藏按钮1,并且将按钮2改为圆角 点击按钮3,显示按钮1,并且将按钮2改为非圆角...> 点击按钮5,隐藏按钮4,并且将按钮5改为圆角 点击按钮6,显示按钮4,并且将按钮5改为非圆角 div...减去ui-first-child样式 $('#btn2').parent("div").removeClass('ui-first-child'); }); //a5标签的onclick...('ui-first-child'); } //a6标签的onclick事件 function showA(){ $('#a4').css('display',''); //给
可见性选择器 语法 说明 :visible 选取所有可见的元素 hidden()方法 隐藏 :hidden 选取所有隐藏的元素 show()方法 显示 2.5 jQuery选择器注意事项 选择器的书写规范很严格...; 可以查找当前元素下的子元素; html //当鼠标访问指定的li时,指定的li下的p标签显示,鼠标移除后,对应的p消失 3三八线加入看单的时候可以加个点看看有哪些; 常用方法 方法 说明 $(this).find("标签名") 当前标签下的指定标签 $(this).index() 当前标签的下标 3、jQuery...) 通过选择器获取节点 $(html) 使用HTML字符创建jQuery节点 3.4.2 插入节点 1 元素内部插入子节点 方法 说明 $(A).append(B) 将B节点追加到A节点的子节点中 $...3.6.1 遍历子元素 方法 说明 children() 获取元素的所有子元素 $(selector).children([expr]); 获取子元素的中的指定元素 3.6.2 遍历同辈元素 方法
/code.jquery.com/ 版本下载 1.简单入门 还记得上篇文章反复强调的一个问题嘛?...如下: $('#div1') // id为div1的元素 .children('ul') //该元素下面的ul子元素 .slideDown('fast') //高度从零变到实际高度来显示ul元素 .parent...() //跳到ul的父元素,也就是id为div1的元素 .siblings() //跳到div1元素平级的所有兄弟元素 .children('ul') //这些兄弟元素中的ul子元素 .slideUp...,它指的是改变html的标签结构,它有两种情况: 1、移动现有标签的位置 2、将新创建的标签插入到现有的标签中 创建新标签 var $div = $('div>'); //创建一个空的div var...$div2 = $('div>这是一个div元素div>'); 移动或者插入标签的方法 1、 append() 和 appendTo():在现存元素的内部,从后面放入元素 var $span =
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。...(domDiv); 1.2 jQuery动态创建标签的方式 jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。...props:用于附加到新创建元素上的属性、事件和方法 返回值:返回新创建标签的jQuery包装对象 // jq的 appendTo,类似DOM的appendTo方法 $("div>Hello</...DOM节点操作 2.1 添加子节点append(content|fn)方法 参数: content:类型String, Element, jQuery,添加的子节点。...DOM的CSS属性读写 3.1 简单获取元素的内部宽高(不包括边框和外边距) innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
id="box">div> // jQuery代码,写在一对script标签中 // 可以使用最简洁的代码,完成JS中复杂的功能!...选择所有的子元素: 选择器.children() 选择所有的指定的子元素: 选择器.children("ul") 选择第一个子元素:选择器.first() 选择最后一个子元素:选择器.last() 判断标签是否包含某个class...二次筛选:选择器.has(子标签选择器),选择所有包含指定子元素的父标签 二次筛选:父选择器.find(子选择器),从父选择器选中的标签中的子元素里面...,查询符合子选择器的标签元素 next:选择下一个同级元素 prev:选择上一个同级元素
通过jQuery注册事件 jQuery注册事件也很简单,通过选择器包装好标签对象后,调用相关的事件方法即可,调用事件方法时需要传递一个函数对象,当事件被触发就会执行函数里的代码。...控制标签 通过jQuery可以很方便的控制标签,例如可以对某个标签增加子标签,或者删除某个标签等等,append方法就可以给某个标签添加一个子标签: jQuery的显示/隐藏效果 show方法可以显示某个组件,hide方法则可以隐藏某个组件: 的情况下,元素从隐藏到完全可见的过程中,会逐渐地改变其高度、宽度、外边距、内边距和透明度。...,如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素,同样的可以设置过程时间和回调函数: <!
元素,返回包含所有的 DOM 元素的 jQuery 对象param 是 DOM 元素:将 DOM 元素对象包装成 jQuery 对象返回(this)param 是标签字符串: 创建标签 DOM 元素对象并包装为...方法 描述 children(selector) 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。...(子元素) find(selector) 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的方法。...事件监听绑定在父元素上, 但事件发生在子元素上 事件会冒泡到父元素 但最终调用的事件回调函数的是子元素: event.target 好处: 新增的元素没有事件监听 减少监听的数量(n==>1) jQuery...1.基本动画 方法 描述 show() 将隐藏的元素显示 hide() 将可见的元素隐藏 toggle() 可见就隐藏,不可见就显示 以上的动画都可以添加参数: ① 第一个参数就是显示 执行的时间,以毫秒为单位
1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。...(domDiv); 1.2 jQuery动态创建标签的方式 jQuery的构造函数本身可以接收html标签的字符串来动态创建HTML标签。...props:用于附加到新创建元素上的属性、事件和方法 返回值:返回新创建标签的jQuery包装对象 // jq的 appendTo,类似DOM的appendTo方法 $("div>Hello的元素的所有子元素的数据应该被复制。 $("b").clone().prependTo("p"); 上传视频标签文本框特效案例: 的CSS属性读写 3.1 简单获取元素的内部宽高(不包括边框和外边距) innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。此方法对可见和隐藏元素均有效。
”) 属于其父元素的特定类型的唯一子元素的所有 元素 $(“div > p”) div> 元素的直接子元素的所有 元素 parent descendant $(“div p”)...:empty选择没有子元素或内容文字的元素,如:$("td:empty")) :has()选择包含至少一个匹配指定选择器的元素的元素,如:$("div:has(p)")) :parent选择至少有一个子节点...") //匹配所有可见元素 :hidden选择所有隐藏的元素,如:$("div:hidden").show(3000)); :visible选择所有隐藏的元素,如: $("div:visible... 元素是 元素的父元素,同时是 div> 的子元素 左边的 元素是 的父元素, 的子元素,同时是 div> 的后代。...右边的 元素是 的父元素, 的子元素,同时是 div> 的后代。 元素是右边的 的子元素,同时是 和 div> 的后代。
JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件,使开发⼈员能够更⽅便地处理各种交互⾏为....change(function) 鼠标悬停事件 $(selector).mouseover(function) 操作元素 获取/设置元素内容 三个简单的获取元素内容的JQuery⽅法: JQuery方法...代码示例: 删除被选元素(及其子元素) div id="div1">我是⼀个divdiv> 删除 div 元素 $(function...() { $('button').click(function(){ $('#div1').remove(); }); }); 删除被选元素的子元素...这对于更新包含HTML标签的内容非常有用。
继承了css选择器的语法和功能 2. 主要由元素标签名,class,id和多个选择器组成 3. 可以实现大多数页面元素的查找 4. ...通过DOM之间的层次关系来获取元素 2. jQuery有四种常用的层次选择器: (1) 后代选择器 (2) 子选择器 (3) 相邻选择器 (4) 同辈选择器 ?...在层次选择呢亲中,后代选择器和子选择器较为常用,而相邻元素选择器和同辈元素选择器在jQuery中可以用更加简单的方法代替: (1)使用next()房代替prev-next(相邻元素选择器) (2)使用nextAll...//带空格的jQuery 选择器 var $t a= $ (".test :hidden") ; 以上代码选取的是class 为“test”的元素内部的隐藏元素。...而代码: /1不带空格的jQuery选择器 var $t b= $(".test:hidden") ; 选取的是隐藏的class 为“test" 的元素。 最后: ? (C) 房上的猫 。
.find("p").hide().end().hide() 第一个hide()是对于p标签的 然后用end()结束对p标签的引用而返回到#div1标签 所以第二个hide()是对于#div1起作用的...label元素的下一个input元素节点,经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器,该选择器返回的为id为prev...的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器 $("tr:first") 匹配第一个选择的元素 $("tr:last") 匹配最后一个选择的元素 $("input:not(:checked...匹配所有不为空的元素(含有文本的元素也算) $("div:hidden") 匹配所有隐藏的元素,也包括表单的隐藏域 $("div:visible") 匹配所有可见的元素 属性过滤选择器 $("div[...") $("div span:first-child")匹配父元素的第1个子元素 $("div span:last-child") 匹配父元素的最后1个子元素 $("div button:only-child