JQuery--样式
1、$(document).ready
$(document).ready(function() { $("div").html("您好!"); });
$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。
2、DOM对象
var p = document.getElementById('imooc'); p.innerHTML = '您好!通过慕课网学习jQuery才是最佳的途径'; p.style.color = 'red';
通过原生DOM模型提供的document.getElementById(“imooc”) 方法获取的DOM元素就是一个DOM对象。
3、JQuery对象
var $p = $('#imooc'); $p.html('您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');
通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。
3、JQuery对象转化为DOM对象
HTML: <div>元素一</div> <div>元素二</div> <div>元素三</div> JS: var $div = $('div') //jQuery对象 var div = $div[0] //转化成DOM对象 div.style.color = 'red' //操作dom对象的属性 JQuery: var $div = $('div') //jQuery对象 var div = $div.get(0) //通过get方法,转化成DOM对象 div.style.color = 'red' //操作dom对象的属性
4、DOM对象转化为JQuery对象
HTML: <div>元素一</div> <div>元素二</div> <div>元素三</div> JS: var div = document.getElementsByTagName('div'); //dom对象 var $div = $(div); //jQuery对象 var $first = $div.first(); //找到第一个div元素 $first.css('color', 'red'); //给第一个元素设置颜色
通过$(dom)方法将普通的dom对象加工成jQuery对象。
5、选择器
-
$( "#id" )
-
$( ".class" )
-
$( "element" ),eg: $("p")选取所有的<p>元素
-
$( "*" )
-
$( "parent > child" ),层级选择器,只包括儿子
-
$( "ancestor descendant" ),后代选择器,包括儿子、孙子
-
$( "prev + next" ),相邻兄弟选择器,同一父元素下,紧跟 prev 的所有 next 元素
- $( "prev ~ siblings" ),一般兄弟选择器,同一父元素下,匹配 prev 元素后的所有兄弟元素,并匹配过滤 siblings 选择器
6、基本筛选选择器:筛选选择器以 “ : ” 开头。
$(".div:first") $(".div:last") $(".div:even") $(".div:odd") $(".aaron:eq(2)") $(".aaron:gt(3)") $(".aaron:lt(2)") $("input:not(:checked) + p")
...
7、内容筛选选择器
$(".div:contains(':contains')") $(".div:has(span)") $("a:parent") $("a:empty")
8、可见性筛选选择器
$(":visible") //选择所有显示的元素 $(":hidden") //选择所有隐藏的元素
:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等。
隐藏元素的方式:
- CSS display的值是none。
- type="hidden"的表单元素。
- 宽度和高度都显式设置为0。
- 一个祖先元素是隐藏的,该元素是不会在页面上显示
- CSS visibility的值是hidden
- CSS opacity的指是0
注:如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。元素的 visibility: hidden 或 opacity: 0 被认为是可见的,因为他们仍然占用空间布局。
8、属性筛选选择器
$('div[name=p1]') $('div[p2]') $('div[name|="-"]') $('div[name~="a"]') $('div[name^=imooc]') $('div[name$=imooc]') $('div[name*="test"]') $('div[testattr!="true"]')
...
属性选择器让你可以基于属性来定位一个元素。可以只指定该元素的某个属性,这样所有使用该属性而不管它的值,这个元素都将被定位,也可以更加明确并定位在这些属性上使用特定值的元素,这就是属性选择器展示它们的威力的地方。
9、子元素筛选选择器
- :first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
- :last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素
- 如果子元素只有一个的话,:first-child与:last-child是同一个
- :only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配
- jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的
- nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算
$('.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)')
...
10、表单元素选择器
无论是提交还是传递数据,表单元素在动态交互页面的作用是非常重要的。jQuery中专门加入了表单选择器,从而能够极其方便地获取到某个类型的表单元素
$(':input') $('input:text') $('input:password') $('input:radio') $('input:checkbox') $('input:submit') $('input:image') $('input:button') $('input:file') ...
注:除了input筛选选择器,几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')
11、表单对象属性筛选选择器
$('input:enabled') $('input:disabled') $('input:checked') $('option:selected')
除了表单元素选择器外,表单对象属性筛选选择器也是专门针对表单元素的选择器,可以附加在其他选择器的后面,主要功能是对所选择的表单元素进行筛选。
注:
- 选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器
- 在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素
12、特殊选择器this
this是JavaScript中的关键字,指的是当前的上下文对象,简单的说就是方法/属性的所有者:
var imooc = { name:"慕课网", getName:function(){ //this,就是imooc对象 return this.name; } } imooc.getName(); //慕课网
同样的在DOM中this就是指向了这个html元素对象,因为this就是DOM元素本身的一个引用:
p.addEventListener('click',function(){ //this === p //以下两者的修改都是等价的 this.style.color = "red"; p.style.color = "red"; },false);
将这个例子换成JQuery的表示方法:
$('p').click(function(){ //把p元素转化成jQuery的对象 var $this= $(this) $this.css('color','red') })
通过把$()方法传入当前的元素对象的引用this,把这个this加工成jQuery对象,我们就可以用jQuery提供的快捷方法直接处理样式了。
总结:this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法;$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
13、attr()
jQuery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr():
- attr(传入属性名):获取属性的值
- attr(属性名, 属性值):设置属性的值
- attr(属性名,函数值):设置属性的函数值
- attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … }
14、removeAttr()
.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)
注意:
- attr、removeAttr都是jQuery为了属性操作封装的,直接在一个 jQuery 对象上调用该方法,很容易对属性进行操作,也不需要去特意的理解浏览器的属性名不同的问题;
- dom中有个概念的区分:Attribute和Property翻译出来都是“属性”,《js高级程序设计》书中翻译为“特性”和“属性”。简单理解,Attribute就是dom节点自带的属性,例如:html中常用的id、class、title、align等;
- 而Property是这个DOM元素作为对象,其附加的内容,例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等;
- 获取Attribute就需要用attr,获取Property就需要用prop
15、html()
- .html() 不传入值,就是获取集合中第一个匹配元素的HTML内容
- .html( htmlString ) 设置每一个匹配元素的html内容
- .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
注意:.html()方法内部使用的是DOM的innerHTML属性来处理的,所以在设置与获取上需要注意的一个最重要的问题,这个操作是针对整个HTML内容(不仅仅只是文本内容)。
16、text()
得到匹配元素集合中每个元素的文本内容结合,包括他们的后代,或设置匹配元素集合中每个元素的文本内容为指定的文本内容。,具体有3种用法:
- .text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代
- .text( textString ) 用于设置匹配元素内容的文本
- .text( function(index, text) ) 用来返回设置文本内容的一个函数
注意:.text()结果返回一个字符串,包含所有匹配元素的合并文本
17、val()
- .val()无参数,获取匹配的元素集合中第一个元素的当前值
- .val( value ),设置匹配的元素集合中每个元素的值
- .val( function ) ,一个用来返回设置值的函数
注意:
- 通过.val()处理select元素, 当没有选择项被选中,它返回null
- .val()方法多用来设置表单的字段的值
- 如果select元素有multiple(多选)属性,并且至少一个选择项被选中, .val()方法返回一个数组,这个数组包含每个选中选择项的值
18、addClass():用于动态增加class类名
- .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
- .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名
注意:.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上
19、removeClass():从匹配的元素中删除全部或者指定的class
- .removeClass( [className ] ):每个匹配元素移除的一个或多个用空格隔开的样式名
- .removeClass( function(index, class) ) : 一个函数,返回一个或多个将要被移除的样式名
注意:如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除 。 如果没有样式名作为参数,那么所有的样式类将被移除
20、切换样式 toggleClass()
jQuery提供一个toggleClass方法用于简化这种互斥的逻辑,通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass。
- toggleClass是一个互斥的逻辑,也就是通过判断对应的元素上是否存在指定的Class名,如果有就删除,如果没有就增加
- toggleClass会保留原有的Class名后新增,通过空格隔开
21、css()
通过.css方法设置的样式属性优先级要高于.addClass方法
外部样式:以 .css 文件形式,可以将样式复用于多个页面;
内部样式:在 style 标签中定义,将样式只单独用于一个页面;
内联样式:在标签里定义,只将该样式用于该标签。