首页手记 jQuery基础 (一)—样式篇笔记

jQuery基础 (一)—样式篇笔记

标签：

JQuery

jQuery

引入：<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>

入口开始：

$(document).ready(function() {
  $("div").html("你好！通过慕课网学习jQuery才是最佳的途径。");
});

jQuery对象与DOM对象：

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM
通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短
jQuery对象转化成DOM对象：var div = document.getElementsByTagName('div'); var $div = $('div')
DOM对象转化成jQuery对象：var div = $div[0] 或者 var div = $div.get(0)

选择器（和css选择器一样）：

id选择器：$( "#id" )
类选择器：$( ".class" )
元素选择器：$( "element" )
全选择器（*选择器）：$( "*" )
层级选择器，子元素后代元素兄弟元素相邻元素：$("p c")、$("p>c")、$("p~c")、$("p+c")
基本筛选选择器：$(".div:first")、$(".div:last")、$(".div:even")、$(".div:odd")、$(".aaron:eq(2)")、$(".aaron:gt(3)")、$(".aaron:lt(2)")、$("input:not(:checked) + p")
内容筛选选择器：$(".div:contains(':contains')")、$(".div:has(span)")、$("a:parent")、$("a:empty")
可见性筛选选择器：$('#div1:visible')、$('#div1:hidden')
属性筛选选择器：$('div[name=p1]')、$('div[p2]')、$('div[name|="-"]')、 $('div[name~="a"]')、$('div[name^=imooc]')、$('div[name$=imooc]')、$('div[name*="test"]')、$('div[testattr!="true"]')
子元素筛选选择器：$('.first-div a:first-child')、$('.first-div a:last-child')、$('.first-div a:only-child')、$('.last-div a:nth-child(2)')、$('.last-div a:nth-last-child(2)')
表单元素选择器：$(':input')、$('input:text')、$('input:password')、$('input:radio')、$('input:checkbox')、$('input:submit')、$('input:image')、$('input:button')、$('input:file')
表单对象属性筛选选择器：$('input:enabled')、$('input:disabled')、$('input:checked')、$('option:selected')
特殊选择器this，this表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法：$(this)

属性与特性操作：

操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法
jQuery中用一个attr()与removeAttr()
- attr()有4个表达式：
  - attr(传入属性名)：获取属性的值
  - attr(属性名, 属性值)：设置属性的值
  - attr(属性名,函数值)：设置属性的函数值
  - attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
- removeAttr()删除方法，.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）
获取Attribute就需要用attr，获取Property就需要用prop

文本操作：

获取集合中第一个匹配元素的HTML内容或设置每一个匹配元素的html内容，具体有3种用法：
- tml() 不传入值，就是获取集合中第一个匹配元素的HTML内容
- .html( htmlString ) 设置每一个匹配元素的html内容
- .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
- .html()方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅只是文本内容）
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：
- .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
- .text( textString ) 用于设置匹配元素内容的文本
- .text( function(index, text) ) 用来返回设置文本内容的一个函数
- .text()结果返回一个字符串，包含所有匹配元素的合并文本

表单元素的值：

.val()方法：
- .val()无参数，获取匹配的元素集合中第一个元素的当前值
- .val( value )，设置匹配的元素集合中每个元素的值
- .val( function ) ，一个用来返回设置值的函数
- 通过.val()处理select元素，当没有选择项被选中，它返回null

类名：

.addClass( className )方法：
- .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
- .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
- .addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
.removeClass( )方法：
- .removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
- .removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名
.toggleClass( )方法：
- .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
- .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
- .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的布尔值
- .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

样式：

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性：
- .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
- .css( propertyNames )：传递一组数组，返回一个对象结果
- .css(propertyName, value )：设置CSS
- .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
- .css( properties )：可以传一个对象，同时设置多个样式

数据：