-
元素选择器:根据给定(html)标记名称选择所有的元素 $("element"); 原生:var divs = document.getElementsByTagName('div');查看全部
-
通过.css方法设置的样式属性优先级要高于.addClass方法查看全部
-
类选择器:$('.class'); 原生:getElementsByClassName();查看全部
-
id选择器:一个用来查找的id,即元素的id属性 $("#id");查看全部
-
DOM对象转换成jQuery对象 $(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。 如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。 例子: <div>元素一</div> <div>元素二</div> <div>元素三</div> var div = document.getElementsByTagName('div');//dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color','red'); //给第一个元素设置颜色查看全部
-
浏览器支持: [att=val]、[att]、[att|=val]、[att~=val] 属于CSS 2.1规范 [ns|attr]、[att^=val]、[att*=val]、[att$=val] 属于CSS3规范 [name!="value"] 属于jQuery 扩展的选择器 CSS选择器无论CSS2.1版本还是CSS3版本,IE7和IE8都支持,webkit、Gecko核心及Opera也都支持,只有IE6以下浏览器才不支持 在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件查看全部
-
eq全称是equal(意思是“等于”);gt全称是greater than(意思是大于);lt全称是less than(意思是小于)查看全部
-
JavaScript代码 var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 var div = $div.get(0) //通过get方法,转化成DOM对象 div.style.color = 'red' //操作dom对象的属性查看全部
-
var div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象查看全部
-
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 ] )查看全部
-
可维护性: .addClass()的本质是通过定义个class类的样式规则,给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式 通过.addClass()我们可以批量的给相同的元素设置统一规则,变动起来比较方便,可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改,日后维护也要一一的修改,比较麻烦 灵活性: 通过.css()方式可以很容易动态的去改变一个样式的属性,不需要在去繁琐的定义个class类的规则。一般来说在不确定开始布局规则,通过动态生成的HTML代码结构中,都是通过.css()方法处理的 样式值: .addClass()本质只是针对class的类的增加删除,不能获取到指定样式的属性的值,.css()可以获取到指定的样式值。 样式的优先级: css的样式是有优先级的,当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候,优先级如下 外部样式 < 内部样式 < 内联样式 .addClass()方法是通过增加class名的方式,那么这个样式是在外部文件或者内部样式中先定义好的,等到需要的时候在附加到元素上 通过.css()方法处理的是内联样式,直接通过元素的style属性附加到元素上的 通过.css方法设置的样式属性优先级要高于.addClass方法 总结: .addClass与.css方法各有利弊,一般是静态的结构,都确定了布局的规则,可以用addClass的方法,增加统一的类规则 如果是动态的HTML结构,在不确定规则,或者经常变化的情况下,一般多考虑.css()方式查看全部
-
.css() 方法:获取元素样式属性的计算值或者设置元素的CSS属性 获取: 1. .css( propertyName ) :获取匹配元素集合中的第一个元素的样式属性的计算值 2. .css( propertyNames ):传递一组数组,返回一个对象结果 设置: 1. .css(propertyName, value ):设置CSS 2. .css( propertyName, function ):可以传入一个回调函数,返回取到对应的值进行处理 3. .css( properties ):可以传一个对象,同时设置多个样式 注意事项: 1. 浏览器属性获取方式不同,在获取某些值的时候都jQuery采用统一的处理,比如颜色采用RBG,尺寸采用px 2. .css()方法支持驼峰写法与大小写混搭的写法,内部做了容错的处理 3. 当一个数只被作为值(value)的时候, jQuery会将其转换为一个字符串,并添在字符串的结尾处添加px,例如 .css("width",50}) 与 .css("width","50px"})一样查看全部
-
.toggleClass( )方法:在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。 1. .toggleClass( className ):在匹配的元素集合中的每个元素上用来切换的一个或多个(用空格隔开)样式类名 2. .toggleClass( className, switch ):一个布尔值,用于判断样式是否应该被添加或移除 3. .toggleClass( [switch ] ):一个用来判断样式类添加还是移除的 布尔值 4. .toggleClass( function(index, class, switch) [, switch ] ):用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数 注意事项: 1. toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加 2.toggleClass会保留原有的Class名后新增,通过空格隔开查看全部
-
.html(),.text()和.val()的差异总结: 1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的html内容(包括html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上;另外.html()方法使用在多个元素上时,只读取第一个元素;.val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。 2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容,如果三个方法同时运用在多个元素上时,那么将会替换所有选中元素的内容。 3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。查看全部
-
val()方法 1. .val()无参数,获取匹配的元素集合中第一个元素的当前值 2. .val( value ),设置匹配的元素集合中每个元素的值 3. .val( function ) ,一个用来返回设置值的函数 注意事项: 1. 通过.val()处理select元素, 当没有选择项被选中,它返回null 2. .val()方法多用来设置表单的字段的值 3. 如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值查看全部
举报
0/150
提交
取消