慕课网

jQuery基础 (一)—样式篇

最热最新

慕移动9130976

jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能。我们可以用jQuery的同时也能混合JavaScript原生代码一起使用。通过jQuery生成的对象是一个做了包装处理的对象，如果要用jQuery对象自己的方法，就需要满足这个对象是通过jQuery生成的。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是操作的DOM元素，jQuery是一个类数组对象，DOM对象就是一个单独的DOM元素。如何把jQuery对象转成DOM对象？利用数组下标的方式读取到jQuery中的DOM对象 HTML代码 <div>元素一</div> <div>元素二</div> <div>元素三</div> JavaScript代码 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性用jQuery找到所有的div元素（3个），因为jQuery 对象也是一个数组结构，可以通过数组下标索引找到第一个div元素，通过返回的div对象然后调用它style属性然修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0 通过jQuery自带的get()方法 jQuery对象自身提供一个.get() 方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引： var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性其实我们翻开源码，看看就知道了，get方法就是利用的第一种方式处理的，只是包装成一个get让开发者更直接方便的使用。

查看全部

0 采集收起来源：jQuery对象转化成DOM对象
2018-03-22
人生还有多少个二十年

html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取? jQuery就提供了一个.data()的方法来处理这个问题使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化，比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了，常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的 jQuery提供的存储接口 jQuery.data( element, key, value ) //静态接口,存数据 jQuery.data( element, key ) //静态接口,取数据 .data( key, value ) //实例接口,存数据 .data( key ) //实例接口,存数据 2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了 jQuery.removeData( element [, name ] ) .removeData( [name ] )

查看全部

0 采集收起来源：jQuery的属性与样式之元素的数据存储
2016-08-05
木木380

id、class、tag都可以通过原生的方法获取到对应的节点 $("#id")=getElementById() $(".class")=getElementsByClassName() $("tag")=getElementsByTagName() 三者效率从高到低

查看全部

0 采集收起来源：jQuery选择器之全选择器（*选择器）
2018-03-22
木木380

id选择器：一个用来查找的ID，即元素的id属性 $( "#id" )

查看全部

0 采集收起来源：jQuery选择器之id选择器
2018-03-22
木木380

var div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色

查看全部

0 采集收起来源：DOM对象转化成jQuery对象
2016-08-05
木木380

var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法，转化成DOM对象 div.style.color = 'red' //操作dom对象的属性

查看全部

0 采集收起来源：jQuery对象转化成DOM对象
2016-08-05
人生还有多少个二十年

在HTML结构中里，多个class以空格分隔，当一个节点（或称为一个标签）含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名

查看全部

0 采集收起来源：jQuery的属性与样式之增加样式.addClass()
2016-08-05
Judiy

div

查看全部

0 采集收起来源：jQuery对象转化成DOM对象
2016-08-05
人生还有多少个二十年

dom中有个概念的区分：Attribute和Property翻译出来都是“属性”，《js高级程序设计》书中翻译为“特性”和“属性”。简单理解，Attribute就是dom节点自带的属性例如：html中常用的id、class、title、align等： <div id="immooc" title="慕课网"></div> 而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等获取Attribute就需要用attr，获取Property就需要用prop

查看全部

0 采集收起来源：jQuery的属性与样式之.attr()与.removeAttr()
2018-03-22
人生还有多少个二十年

操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还是会存在很多问题，这里先不说。而在jQuery中用一个attr()与removeAttr()就可以全部搞定了，包括兼容问题

查看全部

0 采集收起来源：jQuery的属性与样式之.attr()与.removeAttr()
2016-08-05
松氵鼠lzh

jQuery设置css

查看全部

1 采集收起来源：jQuery的属性与样式之样式操作.css()
2016-08-05
木木380

$(document).ready 的意思是等页面的文档（document）中的节点都加载完毕后，在执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。 <script type="text/javascript"> $(document).ready(function(){ $("div").html("您好！通过慕课网学习jQuery才是最佳的途径。"); }); </script>

查看全部

0 采集收起来源：jQueryHelloWorld体验
2018-03-22
木木380

jQuery 只是一个库，不需要特别的安装，只需要我们在页面 <head> 标签内中通过 script 标签脚本引入 jQuery 库即可。 <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

查看全部

0 采集收起来源：环境搭建
2018-03-22
松氵鼠lzh

属性筛选选择器

查看全部

0 采集收起来源：jQuery选择器之属性筛选选择器
2016-08-05
猫的黑眼圈

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

查看全部

0 采集收起来源：jQuery的属性与样式之.attr()与.removeAttr()
2016-08-05

首页上一页 691 692 693 694 695 696 697 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、有HTML/CSS基础 2、有JavaScript基础

老师告诉你能学到什么？: 1、jQuery的基础语法 2、jQuery当中的选择器 3、jQuery中的属性和样式