jQuery框架简单使用

• 引入jQuery可以通过下载之后引入或者网络引入：
  

• jQuery框架提供了一个全局对象：jQuery，它还有另外一个别名：$

• 所有的Dom操作都可以通过jQuery来完成。

*在文档就绪之前，无法安全的操纵页面。(window).on(‘load’, function(){…})一旦整个页面（图像或iframe，而不仅仅是DOM）准备就绪，其中包含的代码就会运行。

• attr()，获取或者修改属性值。填写一个参数为要获得的属性值；两个参数为修改属性值，第一个参数为要修改的属性，第二个参数为修改的值；设置多个属性可以使用列表作为参数。

$(‘div’).attr(‘class’) // 获取div的class值
$(‘div’).attr(‘id’, ‘haha') // 设置div的id为haha
$(‘div’).attr({‘class’: 'haha', 'id': 'enen'}) // 设置div的class为haha，id为enen

元素dom操作

创建元素

把要创建的对象直接写入$()就可以创建相应的对象节点。

new_element = $(‘
') // 创建了一个div对象
new_element[0] // 0号位为它的节点
new_element = $('
新的节点
') // 可以直接写入内容
new_element = $('
haha
enen
') // 可以创建一系列的节点

插入元素

• 父元素.append(要添加的子元素)。append方法会把要添加的元素添加到子元素的最后。可一次添加多个项目，用逗号分隔。

$('ul').append('
haha
') // 直接为ul添加内容为haha的列表项
new_element = $('
enen
') // 也可以先创建再添加
$('#container').append(new_element)

• 要添加的子元素.appendTo(父元素)。appendTo方法与append方法正好相反，要添加的子元素在前，父元素为参数。都是添加到自元素的末尾。

$('
haha
').appendTo('ul') // 直接添加内容为haha的列表项到ul
new_element = $('
enen
') // 也可以先创建再添加
new_element.appendTo('ul')

• 父元素.prepend(要添加的子元素)。prepend方法会把要添加的子元素添加到子元素的最前面。可一次添加多个项目，用逗号分隔。

$('ul').prepend('
haha
') // 直接为ul添加内容为haha的列表项
new_element = $('
enen
') // 也可以先创建再添加
$('#container’).prepend(new_element)

• 选择器.before(要插入的节点)。before方法会把要插入的节点插入到指定的节点之前。它们是同级之间插入。

$('ul>li:nth-child(3)').before('
ouou
') // 在ul的第三个li标签之前插入内容为ouou的列表项

• 选择器.after(要插入的节点)。after方法会把要插入的节点插入到指定的节点之后。它们是同级之间插入。

$('ul>li:nth-child(3)’).after('
ouou
') // 在ul的第三个li标签之后插入内容为ouou的列表项

克隆元素

• 要克隆的元素.clone()。clone方法会克隆指定的元素，可以把它赋给一个变量另作他用。

ol = $(‘#item’).clone()
$(‘div’).append(ol)

删除元素

• 要删除的元素.remove()。remove方法会删除指定的元素。元素删除后，如果重新添加回页面，会丢失事件与关联数据。

$(‘ul’).remove()

• 要删除的元素.detach()。detach方法会删除指定的元素。元素删除后会保留事件与关联数据，这点与remove不同。

$(‘ul’).detach()

元素的遍历

父级元素与所有祖先元素的遍历

• 选择器.parent()。parent方法会返回某个元素的父元素的对象。parent()[0]会返回父元素的节点。包含它的子孙元素。

li = $('ul>li:eq(0)')
li.parent() // 返回li的父元素对象
li.parent()[0] // 返回li的父元素节点，包括它的子孙元素

• 选择器.parents()。parents方法会返回某个元素的所有祖先元素的数组对象。通过索引可以访问某个祖先元素的节点，包括它的子孙元素。

li = $('ul>li:eq(0)')
li.parents() // 返回li的祖先元素的数组对象
li.parent()[1] // 返回li的某个祖先元素节点，包括它的子孙元素

• 选择器.closest(选择器)。closest方法会根据它参数里的选择器找到某个节点的祖先元素里离它最近的符合条件的节点对象。

li = $('.li')
li.closest('.news') // 返回li的祖先元素里class为news的最近的节点数组对象
li.closest('.news')[0] // 返回li的祖先元素里class为news的最近的节点

子元素与所有后代元素的遍历

• 选择器.children()。children方法可以填参数也可以不填参数。不填参数会返回某个节点的所有子元素（不含其他后代元素）。参数可以填写选择器，返回符合条件的子元素。

$('.news').children() // 查找class为news的所有子元素
$('.news').children($('#haha')) // 查找class为news的元素的id为haha的子元素

• 选择器.find(选择器)。find方法会返回某个元素符合条件的所有后代元素。

$(‘.news’).find(‘li’) // 查找class为news元素的所有li

兄弟节点的遍历

• 选择器.prev()。prev方法会返回某个节点的前一个兄弟节点对象。

$(‘.news>li:eq(4)’).prev() // 返回选定节点的前一个兄弟节点的数组对象
$(‘.news>li:eq(4)’).prev()[0] // 返回选定节点的前一个兄弟节点

• 选择器.prevAll()。prevAll方法会返回某个节点之前的所有兄弟节点的数组对象。

$(‘.news>li:eq(4)’).prevAll() // 返回选定节点前的所有兄弟节点的数组对象
$(‘.news>li:eq(4)’).prevAll()[3] // 返回选定节点前的所有兄弟节点的某个节点

• 选择器.next()。next方法会返回某个节点的下一个兄弟节点对象。

$(‘.news>li:eq(0)’).next() // 返回选定节点的下一个节点的数组对象
$(‘.news>li:eq(0)’).next()[0] // 返回选定节点的下一个节点

• 选择器.nextAll()。nextAll方法会返回某个节点之后的所有兄弟节点数组对象。

$(‘.news>li:eq(0)’).nextAll() // 返回选定节点之后的所有兄弟节点数组对象。
$(‘.news>li:eq(0)’).nextAll()[2] // 返回选定节点之后的所有兄弟节点数组对象中的某个节点。

• 选择器.siblings()。siblings方法会返回选定节点的所有兄弟节点的数组对象。

$(‘.news>li:eq(3)’).siblings() // 返回选定节点的所有兄弟节点数组对象。
$(‘.news>li:eq(3)’).siblings()[2] // 返回选定节点的所有兄弟节点数组对象中的某个节点。

each方法

each方法可以把选择器选择出来的数组对象进行遍历，它的参数为方法函数。

$(‘.news’).children().each(function(){
    console.log(this)
})

元素样式

通过css获取或者设置样式

css方法可以可以获得或者设置元素的样式。
获得：选择器.css(属性名)
设置：选择器.css(属性名，值)，选择器.css({多个属性键值对})

$(‘#div1’).css(‘width’) // 获取width属性值
$(‘#div1’).css(‘border’, ’10px solid red') // 设置border的属性值
$(’#div1’).css({
    ‘border’: ‘1px solid red’,
    ‘background’: ‘#fff’,
    ‘padding’: ’20px’
})

classList的操作

• 选择器.addClass(值)。addClass方法会给指定的元素添加指定的class值。

$(‘#div1’).addClass(‘haha’) // 给id为div1的元素添加class值haha

• 选择器.removeClass(值)。removeClass方法会删除指定元素的指定class值。

$(‘#div1’).removeClass(‘enen’) // 给id为div1的元素删除class值enen

• 选择器.toggleClass(值)。toggleClass方法在指定元素没有指定的值时会添加上指定的值，指定元素有指定的值时会删除指定的元素。

$(‘#div1’).toggleClass(‘haha’) // id为div1的元素class值中有haha就会把haha删除，没有haha就会添加上haha

• 选择器.hasClass(值)。hasClass方法用于判定指定的元素有没有指定的class值，返回值为布尔值true或者false。

$(‘#div’).hasClass(‘haha’) // 判断id为div1的元素class里有没有haha

元素大小的获取与设置

• 获取、设置元素width和height的大小：
  选择器.width()
  选择器.height()
  设置大小直接填入参数。

$(‘#div1’).width() // 获取元素的width
$(‘#div1’).height() // 获取元素的height
$(‘#div1’).width(‘100px’) // 设置元素的width
$(‘#div1’).height(‘100px’) // 设置元素的height

• 获取元素包含padding的宽高：
  选择器.innerWidth()
  选择器.innerHeight()

$(‘#div1’).innerWidth() // 获得元素包含padding的宽度
$(‘#div1’).innerHeight() // 获得元素包含padding的高度

• 获取元素包含margin、padding、边框线的宽高（默认不包含margin，要包含margin要在参数里填true）：
  选择器.outerWidth()
  选择器.outerHeight()

$(‘#div1’).outerWidth() // 获得元素包含padding、边框的宽度
$(‘#div1’).outerHeight() // 获得元素包含padding、边框的高度
$(‘#div1’).outerWidth(true) // 获得元素包含margin、padding、边框的宽度
$(‘#div1’).outerHeight(true) // 获得元素包含margin、padding、边框的高度

• 获取元素的位置：
  选择器.position()

$(‘#div’).position() // 获取元素的位置

事件处理

• 选择器.on(“事件类型”, “子选择器”, data, function(e){})

$('#container').on('click', {'myname': 'haha'}, function(e){
    console.log('click')
    console.log(e.data) // 获得第二个参数传入的数据
    console.log(e.pageX, e.pageY) // 获得点击的位置

• 选择器.bind(“事件类型”, data, function(e){})

$('#container').bind(‘click', {'myname': 'haha'}, function(e){
    console.log('click')
    console.log(e.data) // 获得第二个参数传入的数据
    console.log(e.pageX, e.pageY) // 获得点击的位置

• on和bind方法的区别在于on方法可以填入参数‘子选择器’，通过子选择器可以实现事件代理。

$('.news').on('click', 'li', function(e){
    e.stopPropagation()
    console.log(arguments)
    console.log($(this).text())
            })

• jQuery中事件机制为冒泡机制。