DOM操作的简化——JQuery （jQuery实现手风琴案例）

今天来给大家介绍一下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，让我们的代码更加简洁。

 

感谢大家支持，我会不停更新。