[关闭]
@omg-two 2017-01-10T02:16:42.000000Z 字数 5661 阅读 664

jQuery基础-样式篇学习笔记

jQuery 学习笔记

一、初识jQuery

1.环境配置

如下所示，在通过script标签引入jQuery的库文件即可。

  1. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

2.jQuery对象与DOM对象的转化

  1. //id为imooc的DOM对象
  2. var p = document.getElementById('imooc');
  3. //id为imooc的jQuery对象
  4. var $p = $('#imooc');

jQuery对象与DOM对象是不一样的。jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。 jQuery对象是一个类数组对象，包含了DOM对象信息，同时还封装了很多操作方法。jQuery对象的调用屏蔽了浏览器底层带来的差异，不需要考虑兼容性的问题。

  1. //html页面内容范例
  2. <div>元素一</div>
  3. <div>元素二</div>
  4. <div>元素三</div>

jQuery是类数组对象，所以，把jQuery对象转换为DOM对象即可通过数组下标的方式获取。如下所示，获取div对象并转换成DOM对象。

  1. var $div = $('div') //jQuery对象
  2. var div = $div[0] //转化成DOM对象

同样，也可以通过jQuery自带的get()方法获取。其中get()方法就是利用第一种方式处理的。

  1. var $div = $('div') //jQuery对象
  2. var div = $div.get(0) //通过get方法，转化成DOM对象
  3. ```
  4. 那么，如何把DOM对象转化为jQuery对象呢？一般都是通过$(DOM对象)来转化,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。如下所示：
  7. <div class="md-section-divider"></div>
  9. ```js
  10. var div = document.getElementsByTagName('div'); //dom对象
  11. var $div = $(div); //jQuery对象

二、jQuery选择器

1.id选择器

  1. $("#id")

jQuery内部使用document.getElementById()来处理ID的获取。每个id在页面内都是唯一的，多个元素分配相同id，那么则匹配第一个DOM。但是这种行为是错误的，不提倡。

2.类选择器

  1. $(".class")

如果浏览器支持，jQuery使用JavaScript的原生getElementsByClassName()函数来实现.

3.元素选择器

  1. $("element")

搜索指定元素标签名的所有节点，这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持。

4.全选择器

  1. $(*)

如果要获取文档中所有的元素，通过document.getElementsByTagName()中传递"*"同样可以获取到,不难发现，id、class、tag同样也可以。但是在不同的浏览器中，可能存在函数兼容性问题。

5.层级选择器

  1. //子选择器
  2. //$('div > p') 选择所有div元素里面的子元素P
  3. $('div > p').css("border", "1px groove red");
  4. //后代选择器
  5. //$('div  p') 选择所有div元素里面的p元素
  6. $('div p').css("border", "1px groove red");

层级选择器用于处理以下几种关系： 子元素 后代元素 兄弟元素 相邻元素。具体如下图所示：

选择器练习题

当不能直接通过基本选择器与层级选择器找到需要的元素时，则可以通过jQuery开发出来的筛选选择器找到相应元素。筛选选择器的用法与CSS中的伪元素相似，选择器用冒号“：”开头。

6.基本筛选选择器

  1. //找到第一个div
  2. $(".div:first").css("color", "#CD00CD");
  3. //:even 选择所引值为偶数的元素，从 0 开始计数
  4. $(".div:even").css("border", "3px groove red");

基本筛选选择器针对的是元素DOM节点，具体如下图所示：

7.内容筛选选择器

  1. //查找所有class='div'中DOM元素中包含"contains"的元素节点
  2. //并且设置颜色
  3. $(".div:contains(':contains')").css("color", "#CD00CD");
  4.                //查找所有class='div'中DOM元素中包含"span"的元素节点
  5. //并且设置颜色
  6. $(".div:has(span)").css("color", "blue");

内容筛选选择器针对内容进行过滤，规则体现在其包含的子元素或者文本内容上。其中，contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素如下图所示：

8.可见性筛选选择器

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

  • CSS display的值是none。
  • type="hidden"的表单元素。
  • 宽度和高度都显式设置为0。
  • 一个祖先元素是隐藏的，该元素是不会在页面上显示
  • CSS visibility的值是hidden
  • CSS opacity的指是0
  1. $('#div1:visible')

jQuery根据元素的状态扩展了可见性筛选选择器:visible与:hidden,如下图所示：

如果元素中占据文档中一定的空间,元素被认为是可见的。
可见元素的宽度或高度，是大于零。
元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

9.属性筛选选择器

  1. //查找所有div中，属性name=p1的div元素
  2. $('div[name=p1]').css("border", "3px groove red"); 
  3. //查找所有div中，有属性name中的值包含一个test字符串的div元素
  4. $('div[name*="test"]').css("border", "3px groove #00FF00");

基于属性定位某个元素，如下图所示：

10.子元素筛选选择器

  1. //查找class="first-div"下的第一个a元素
  2. //针对所有父级下的第一个
  3. $('.first-div a:first-child').css("color", "#CD00CD");
  4. //查找class="last-div"下的第二个a元素
  5. $('.last-div a:nth-child(2)').css("color", "#CD00CD");

子元素筛选选择器描述表：

注意事项:
1. :first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1).
2. :nth-child(n)从1开始计数，eq(n)从0开始计数。

11.表单元素选择器

  1. //匹配所有input元素中类型为text的input元素
  2. $('input:text').css("background", "#A2CD5A");
  3. //匹配所有input元素中的复选按钮,并选中
  4. $('input:checkbox').attr('checked','true');

表单选择器具体方法如下：

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

12.表单对象属性筛选选择器

  1. //查找所有input所有不可用的（被禁用的元素）input元素。
  2. $('input:disabled').css("border", "2px groove blue");
  3. //查找所有input所有勾选的元素(单选框,复选框)
  4. //移除input的checked属性
  5. $('input:checked').removeAttr('checked');

表单对象属性筛选选择器如下：

注意事项：
1. 复选框和单选框用：selected选择器。
2. 兼容性问题，:checked可能会被误选到<opiont>元素上,因此建议使用input:checked确保指挥选择<input>元素

筛选选择器习题

特殊选择器this

  1. $('#test2').click(function(){
  2.     //通过包装成jQuery对象改变颜色
  3.     $(this).css('color','blue');
  4. })

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

综合案例

三、jQuery的属性与样式

1.元素属性的获取与删除 .attr()与.removeAttr()

.attr()有4个表达式

  • attr(传入属性名)：获取属性的值
  • attr(属性名, 属性值)：设置属性的值
  • attr(属性名,函数值)：设置属性的函数值
  • attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

.removeAttr()删除方法

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

注意事项：

dom中概念的区分：Attribute与Property
Atrribute为dom节点自带的特性，通俗理解，html代码中能看到的，他的值只能是字符串；property是DOM中默认的属性，它们都会在初始化的时候在DOM对象上创建。

  • property能够从attribute中得到同步；
  • attribute不会同步property上的值；

2. 元素文本内容，html结构的修改.html()与.text()

.html()方法

  • .html(): 获取集合中第一个匹配元素的HTML内容
  • .html(htmlString): 设置所有匹配的元素的HTML内容
  • .html(function(inde,oldhtml)): 用来返回设置HTML内容的一个函数

这个方法是通过DOM的innerHTML属性来处理的，针对的是整个HTML内容。

.text()方法

  • .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
  • .text( textString ) 用于设置所有匹配元素内容的文本
  • .text( function(index, text) ) 用来返回设置文本内容的一个函数;index为第几个匹配的元素，text为其中内容

3.表单元素值的处理.val()

.val()方法

  • .val()无参数，获取匹配的元素集合中第一个元素的当前值
  • .val( value )，设置匹配的元素集合中所有元素的值
  • .val( function ) ，一个用来返回设置值的函数

注意事项

处理select元素时，无选中时，返回null；当select有multiple属性时，并且至少有一个被选中，那么返回一个包含选中选项值的数组
val()只能用于表单元素上

通过回调函数，.html();.text();.val()三个函数都可以动态的改变多个元素的内容。

4.样式的增加.addClass(),删除.removeClass(）和切换.toggleClass()

.addClass(className)方法

  1. .addClass(className)：为所有匹配的元素增加一个或多个样式名称
  2. .addClass(function(index,cuurrentClass)):这个函数返回一个或更多用空格隔开的要增加的样式名

.removeClass()方法

  1. .removeClass( [className ])：每个匹配元素移除的一个或多个用空格隔开的样式名
  2. .removeClass( function(index, class) ) ： 一个函数，返回一个或多个将要被移除的样式名

当传入参数为空时，删除所有样式类

.toggleClass():针对互斥操作的切换操作，如果存在（不存在）就删除（添加）一个类

  1. .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
  2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
  3. .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
  4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

5.样式操作.css()

.css():获取元素样式属性的计算值或者设置元素的CSS属性
获取：

  1. .css( propertyName)：获取匹配元素集合中的第一个元素的样式属性的计算值
  2. .css( propertyNames )：传递一组数组，返回一个对象结果

设置：

  1. .css(propertyName, value )：设置CSS
  2. .css( propertyName,function)：可以传入一个回调函数，返回取到对应的值进行处理
  3. .css( properties )：可以传一个对象，同时设置多个样式

.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则；
如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式；
通过.css方法设置的样式属性优先级要高于.addClass方法。

6.元素的数据存储

允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注