-
普通处理,通过标准JavaScript处理: var p = document.getElementById('imooc');//这里得到是一个对象,通过设置属性的方法进行操作 p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途径'; p.style.color = 'red'; 通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象,再通过innerHTML与style属性处理文本与颜色。 jQuery的处理: var $p = $('#imooc');//类数组对象,里面包含有方法 $p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red'); 通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。查看全部
-
$("div").html()是使用标签选择器获取div标签,并将内容设置为:您好!通过慕课网学习jQuery才是最佳的途径。 对应于javascript中的各类选择器,如: $("*") ——所有元素 $("#lastname") ——id="lastname" 的元素 $(".intro") ——所有 class="intro" 的元素 $("p") ——所有 <p> 元素 $(".intro.demo") ——所有 class="intro" 且 class="demo" 的元素查看全部
-
$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。查看全部
-
jQuery选择器之层级选择器 子元素 后代元素 兄弟元素 相邻元素 > (大于号)紧跟父子关系 如$("div > p")表示选择div下的直接层是p的节点。 + (加号) 紧跟兄弟关系 如$("div + p")表示选择div同层的左右相邻的p节点。 ~ (波浪线)任意距离兄弟关系 如$("div + p")表示选择div同层的p节点。 (空格) 任意层父子关系 如$("div p")表示选择div下的p节点(不管中间隔多少层)。 ,(逗号) 表示选择器组合,如$("div p, span p")表示div下p节点和span下p节点。查看全部
-
jQuery选择器之全选择器(*选择器) $( "*" ) 兼容性: 1.IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的 2.getElementById的参数在IE8及较低的版本不区分大小写 3.IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A 4.IE8及较低的版本,浏览器不支持getElementsByClassName查看全部
-
jQuery选择器之元素选择器 $( "element" ) 搜索指定元素标签名的所有节点,这个是一个合集的操作。 同样的也有原生方法getElementsByTagName()函数支持查看全部
-
jQuery选择器之类选择器 $( ".class" ) 类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选; jQuery除了选择上的简单,而且没有再次使用循环处理;查看全部
-
DOM对象转化成jQuery对象查看全部
-
jQuery对象转化成DOM对象 jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。 方法1:利用数组下标的方式读取到jQuery中的DOM对象 方法2:通过jQuery自带的get()方法,(原理与方法1相同,只是jQuery将其封装成一个方法了)查看全部
-
通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。 通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。查看全部
-
$(document).ready 作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码查看全部
-
进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需要注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别在于 2.x 不再兼容 IE6、7、8浏览器,这样做的目的是为了兼容移动端开发。由于减少了一些代码,使得该版本比 jQuery 1.x 更小、更快。 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题,使用的是 1.9 版本。jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小,效率更快)。 jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可查看全部
-
HTML data-* 属性 在HTML5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们要在一个文字按钮上存放相对应的id:<a href="javascript:" data-id="2312">测试</a> html5 dataset是新的HTML5标准,允许你在普通的元素标签里嵌入类似data-*的属性,来实现一些简单数据的存取。它的数量不受限制,并且也能由JavaScript动态修改,也支持CSS选择器进行样式设置。这使得data属性特别灵活,也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中,我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题 我们把DOM可以看作一个对象,那么我们往对象上是可以存在基本类型,引用类型的数据的,但是这里会引发一个问题,可能会存在循环引用的内存泄漏风险。通过jQuery提供的数据接口,就很好的处理了这个问题了,我们不需要关心它底层是如何实现,只需要按照对应的data方法使用就行了 jQuery提供的存储接口 $.data( element, key, value ) //静态接口,存数据。(元素,键,值) $.data( element, key ) //静态接口,取数据 element.data( key, value ) //实例接口,存数据 element.data( key ) //实例接口,取数据 -------------------------------------------------------------------------------- jQuery提供的删除接口 $.removeData( element [, name ] ) element.removeData( [name ] )查看全部
-
jQuery版本 : 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了。我们这本课程为了兼容性问题,使用的是 1.9 版本。jQuery 每一个系列版本分为:压缩版(compressed) 与 开发版(development),我们在开发过程中使用开发版(开发版本便于代码修改及调试),项目上线发布使用压缩版(因为压缩版本体积更小,效率更快)。查看全部
-
.css({ })查看全部
举报
0/150
提交
取消