今天来给大家介绍一下jquery,jquery使得我们在dom操作有了更简单更高效率的代码执行。jquery的用法基本上是在dom操作上进行的简单语法。大家先看一下思维导图,大致了解一下jquery的操作,然后我再给大家具体的介绍一下用法。一.代码风格
$(funciton(){})匿名函数的执行 $('.div')获取元素 $('.div').css('color','red')给div添加内联样式
二.onload与ready
1.window.onload:全部资源加载完毕 只能执行一次,会被后面代码覆盖(类似dom0),且不能简写
2.$(document).ready(function(){}):DOM模块加载完毕 可以执行多次 类似DOM2 可以简写为$(function(){});效率更高
3.dom与jq可以相互进行转换 var dOk=document.queryselector('.ok')
console.log($(dOk))将DOM转化为jq
console.log($('.ok')[0])将jq转换为Dom
三.选择器
jq支持所有的css选择器
还有新引进的选择器 $('.ok').find('div')等价于$('.ok div');
$('.ok').children('div')等价于$('.ok>div');
所有偶数:.even() 所有奇数:.odd()
根据下标进行选择:eq(n) 等价于nth-of-type
四.属性 attr
attr('color')获取颜色属性 attr('color','red')将颜色设置为红色 attr({})可设置多个属性
removeAttr('color')移除属性 addClass('open')添加类名 remove('open')移除类名 toggleClass('open') 添加或删除class position()相对于父级 获取left值与top值 offset()相对于窗口 获取left和top值 一般position().left即可获得
这里引进两个概念 破坏性操作和非破坏性操作
破坏性操作:改变this的指向 非破坏性操作:不改变this的指向
五.dom操作
div.html()获取div中的内容,可以识别标签 div.text()获取div中的文本内容,不能识别标签
inp.val()获取表单中的value值 div.append(p)把p添加到div中 =p.appendTo(div)
a.empty()清空a的所有子元素 a.remove()删除a
绑定事件:$('div').click(function(){})
jq可以同时添加多个事件 $('div').on({a:fn1,b:fn2})
六.动画
show()显示 hide()隐藏 toggle()显示或隐藏 slideDown()展开 slideUp()收起 slideToggle()展开或收起
任意动画 d.animate({'
left:'300px'
},300)
七.案例时间
这个案例用jq来实现一下手风琴效果。这里就不给大家展示css部分与html部分。直接上jq部分
获取每个li标签并添加点击事件 通过$(this)来判断我们点击的是哪一个并为他添加类名open,而其他的兄弟结点需要移除open类名。然后就对body进行修改背景图。我们来对比一下在dom操作的js部分操作
这样一对比,显而易见我们的jq更加方便,通俗易懂。效果图都是一样的,相信大家对比完之后,一定会爱上jq,让我们的代码更加简洁。
感谢大家支持,我会不停更新。