第一种方式
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
第二种方式
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法,转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
(2)DOM => jQuery
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
前言
本篇博文是记录jQuery的基础知识,根据慕课网的教程整理而成。还有,为了优化大家的阅读体验,强烈建议先安装Chrome浏览器的插件——GayHub。下载安装地址
jQuery样式篇
第一个例子
不多说,这是我们踏入编程界输出的第一句话,下面贴上代码(默认导入jQuery源文件):
【代码解析】 $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。
jQuery对象与DOM对象
jQuery对象与DOM对象是不一样的,大概就是:jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。具体有以下区别: (1)通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。 (2)通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容性问题,我们通过jQuery提供的API进行开发,代码也会更加精短。
jQuery对象与DOM对象之间的转换
(1)jQuery => DOM
(2)DOM => jQuery
jQuery选择器
(1)ID选择器:
$( "#id" )
(2)类选择器:$( ".class" )
(3)元素选择器:$( "element" )
(4)全选择器:$( "*" )
(5)层级选择器(6)基本筛选选择器
(7)内容筛选选择器
(8)可见性筛选选择器
(9)属性筛选选择器
(10)子元素筛选选择器
(11)表单元素选择器
(12)表单对象属性筛选选择器
(13)特殊选择器this
jQuery中attr()和removeAttr()
(1)jQuery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr()
(2)removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性(attribute)
jQuery中html()和text()
(1)html()方法:获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容,具体有3种用法
//多种写法设置颜色 $('.fourth').css("background-color","red"); $('.fifth').css("backgroundColor","yellow");
//获取到指定元素的宽度,在回调返回宽度值 //通过处理这个value,重新设置新的宽度 $('.sixth').css("width",function(index,value){ value = value.split('px'); return (Number(value[0])+50)+value[1]; })
//合并设置,通过对象传设置多个样式 $('.seventh').css({ "font-size":"15px", "border":"1px solid red" })
var $body = $('body'); $body.on('click', function () { //通过jQuery生成div元素节点 var div = $("
$("#bt1").on('click', function () { //在匹配test1元素集合中的每个元素前面插入p元素 $(".test1").before('
before,在匹配元素之前增加
', '多参数
') }) $("#bt2").on('click', function () { //在匹配test1元素集合中的每个元素后面插入p元素 $(".test2").after('after,在匹配元素之后增加
', '多参数
') })慕课网
//通过empty处理 $('.hello').empty()
//结果:
慕课网
被移除慕课网
//通过remove处理 $('.hello').remove() //结果:
慕课网
第一段
第二段
第三段
p元素
$('p').wrap('') //最后结果p元素
p元素
p元素
### DOM包裹wrapAll()方法 (1)wrap是针对单个dom元素处理,如果要将集合中的元素用其他元素包裹起来,也就是给他们增加一个父元素,针对这样的处理,JQuery提供了一个wrapAll方法 (2).wrapAll( wrappingElement ):给集合中匹配的元素增加一个外面包裹HTML结构 ```p元素
p元素
$('p').wrapAll('') //最后结果p元素
p元素
p元素
p元素
$('p').wrapAll(function() { return 'p元素
p元素
p元素
p元素
p元素
p元素
新的p元素
``` - 传递选择器 `$('li').add('p')` - 传递dom元素 `$('li').add(document.getElementsByTagName('p')[0])` - 动态创建P标签加入到合集 `$('li').add('新的p元素
').appendTo(目标位置)` ### jQuery遍历之each() (1).each() 方法就是一个for循环的迭代器,它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时,会传递当前循环次数作为参数(从0开始计数 ``` $("button:first").click(function () { //遍历所有的li //修改每个li内的字体颜色 $("li").each(function (index, element) { $(this).css('color', 'red') }) }) $("button:last").click(function () { //遍历所有的li //修改偶数li内的字体颜色 $("li").each(function (index, element) { if (index % 2) { $(this).css('color', 'blue') } }) }) 备注:index 索引;element是对应的li节点 li;this 指向的是li。 ``` (2)三个重点 - each是一个for循环的包装迭代器 - each通过回调的方式处理,并且会有2个固定的实参,索引与元素 - each回调方法中的this指向当前迭代的dom元素 # jQuery事件篇 ### jQuery鼠标事件之click与dbclick事件 (1)click方法用于监听用户单击操作: ```on事件委托
事件委托,通过事件对象区别触发元素
自定义事件trigger
测试一
测试一
通过toggle切换显示与隐藏
slideDown
测试一
测试二
slideUp
测试一
测试二
slideToggle
fadeOut
测试文字淡入效果
慕课网,专注分享
淡出的隐藏效果: ``` ### jQuery中淡入动画fadeIn (1)fadeOut是淡出效果,相反的还有淡入效果fadeIn,方法使用上两者都是一致的,只是结果相反 (2)注意 - 淡入的动画原理:操作元素的不透明度从0%逐渐增加到100% - 如果元素本身是可见的,不对其作任何改变。如果元素是隐藏的,则使其可见 ### jQuery中淡入淡出切换fadeToggle (1)fadeToggle()函数用于切换所有匹配的元素,并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式 (2)fadeToggle切换fadeOut与fadeIn效果,所谓"切换",即如果元素当前是可见的,则将其隐藏(淡出);如果元素当前是隐藏的,则使其显示(淡入)。 ### jQuery中淡入效果fadeTo (1)淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性,但是他们都有个共同的特点,变化的区间要么是0,要么是1 (2)jQuery提供了fadeTo方法,可以设置透明度的数值 ```fadeTo
测试文字透明度效果
慕课网,专注分享
透明度的设置效果: ``` ### jQuery中toggle与slideToggle以及fadeToggle的比较 (1)toggle、sildeToggle以及fadeToggle的区别 - toggle:切换显示与隐藏效果 - sildeToggle:切换上下拉卷滚效果 - fadeToggle:切换淡入淡出效果 (2)toggle与slideToggle细节区别 - toggle:动态效果为从右至左。横向动作,toggle通过display来判断切换所有匹配元素的可见性 - slideToggle:动态效果从下至上。竖向动作,slideToggle 通过高度变化来切换所有匹配元素的可见性 (3)fadeToggle方法 - fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换。 - 元素是淡出显示的,fadeToggle() 会使用淡入效果显示它们。 - 元素是淡入显示的,fadeToggle() 会使用淡出效果显示它们。 - 注释:隐藏的元素不会被完全显示(不再影响页面的布局) ### jQuery中动画animate(上) (1)有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了,操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 ``` $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) ``` (2).animate()方法允许我们在任意的数值的CSS属性上创建动画。 ```animate(上)
慕课网,专注分享
stop
慕课网,专注分享
点击观察动画效果: ``` ### jQuery中each方法的应用 (1)jQuery提供了一个通用的jQuery.each方法,用来处理对象和数组的遍历 (2)each就是for循环方法的一个包装,内部就是通过for遍历数组与对象,通过回调函数返回内部迭代的一些参数,第一个参数是当前迭代成员在对象或数组中的索引值(从0开始计数),第二个参数是当前迭代成员(与this的引用相同 ```
each方法
慕课网,专注分享
点击观察结果: ``` ### jQuery中查找数组中的索引inArray (1)jQuery封装了inArray()函数判断元素是否存在数组中。注意了:在ECMAScript5已经有数据的indexOf方法支持了,但是jQuery保持了版本向下兼容,所以封装了一个inArray方法 (2)jQuery.inArray()函数用于在数组中搜索指定的值,并返回其索引值。如果数组中不存在该值,则返回 -1。 `$.inArray(5,[1,2,3,4,5,6,7]) //返回对应的索引:4` ### jQuery中去空格神器trim方法 (1)jQuery.trim()函数用于去除字符串两端的空白字符,这个函数很简单,没有多余的参数用法 ``` $("#exec1").click(function () { alert("值的长度:" + $("#results1").val().length) }); $("#exec2").click(function () { alert("值的长度:" + $.trim($("#results2").val()).length) }); ``` (2)注意: - 移除字符串开始和结尾处的所有换行符,空格(包括连续的空格)和制表符(tab) - 如果这些空白字符在字符串中间时,它们将被保留,不会被移除 ### jQuery中DOM元素的获取get方法 (1)jQuery是一个合集对象,如果需要单独操作合集中的的某一个元素,可以通过.get()方法获取到,比如第二个a元素的查找: `$(a).get(1)` (2)注意 - get方法是获取的dom对象,也就是通过document.getElementById获取的对象 - get方法是从0开始索引 (3)get方法还可以从后往前索引,传递一个负索引值,注意的负值的索引起始值是-1,同样是找到第二个元素,可以传递`$(a).get(-2) ` ### jQuery中DOM元素的获取index方法 (1)get方法是通过已知的索引在合集中找到对应的元素。如果反过来,已知元素如何在合集中找到对应的索引呢?.index()方法,从匹配的元素中搜索给定元素的索引值,从0开始计数。 (2)要点 - 如果不传递任何参数给 .index() 方法,则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置 - 如果在一组元素上调用 .index() ,并且参数是一个DOM元素或jQuery对象, .index() 返回值就是传入的元素相对于原先集合的位置 - 如果参数是一个选择器, .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素,则 .index() 返回 -1 ```index方法
你好!请问是用md编辑的文章吗?
@LoverFancy 咦,貌似github自带编辑器就是遵循md语法规则的啊