JavaScript学习Day24笔记

Day24笔记

一、jQuery操作内容

$(selector).html()  =>  innerHTML
$(selector).text()  =>  innerText
$(selector).val()  =>  value

二、jQuery操作属性

获取元素属性

$(selector).attr('属性名')
$(selector).prop('属性名')

设置元素属性

$(selector).attr('属性名','属性值')
$(selector).prop('属性名','属性值')

删除元素属性

$(selector).removeAttr('属性名')

attr和prop的区别

prop：property是DOM中的属性，是JavaScript里的对象，是HTML元素本身就带有的固有属性，编辑器里面可以智能提示出来的一些属性，如：src、href、value、class、name、id等。

attr：attribute是HTML标签上的特性，它的值只能是字符串。

<input type="checkbox" id="check1"/>
<input type="checkbox" id="check2" checked="checked"/>

// 用prop获取checkbox,radio,select这类元素时
$('check1').prop('checked')  =>  false
$('check2').prop('checked')  =>  true

// 用attr获取checkbox,radio,select这类元素时
$('check1').attr('checked')  =>  undefined
$('check2').attr('checked')  =>  'checked'

三、jQuery操作样式

获取CSS属性值

$(selector).css('属性')

设置CSS属性值

$(selector).css('属性','属性值')
// 设置多个css属性
$(selector).css({'属性1':'属性值1'},{'属性2':'属性值2'})

设置CLASS类名

$(selector).addClass('类名')

删除CLASS类名

$(selector).removeClass('类名')

切换CLASS类名

// 如果类名不存在，则为该元素添加类名，如果类名已存在，则为该元素删除类名
$(selector).toggleClass('类名')

四、jQuery操作事件

页面载入事件

$(document).ready()  =>  window.onload
// 简写
$(function(){ })

鼠标事件

// 点击事件
$(selector).click()
// 双击事件
$(selector).dbclick()
// 移入事件
$(selector).mouseover()
// 移出事件
$(selector).mouseout()
// 移动事件
$(selector).mousemove()
// 按下事件
$(selector).mousedown()
// 松开事件
$(selector).mouseup()

键盘事件

// 按下键事件（包括数字键、功能键）
$(selector).keydown()
// 按下键事件（只包含数字键）
$(selector).keypress()
// 放开键事件
$(selector).keyup()

表单事件

// 获取焦点事件
$(selector).focus()
// 数去焦点事件
$(selector).blur()
// 改变事件
$(selector).change()
// 选择事件
$(selector).select()

滚动事件

$(selector).scroll(fn)
// scroll()滚动事件常常和scrollTop()和scrollLeft()两个方法结合使用

绑定事件

$(selector).on(type,fn)

解绑事件

$(selector).off(type,fn)

合成事件

// 可以一次性的定义“鼠标移入”和“鼠标移出”这两个事件，这就是合成事件
$(selector).hover(fn1,fn2)

一次事件

// 只会触发一次
$(selector).one(type,fn)

五、jQuery操作DOM节点

创建节点

// 创建一个标签节点
$('<标签>')
// 创建一个标签节点和文本节点
$('<标签>').text('内容')

添加节点

// 给父节点追加一个子节点
$('parent').append( $('child') )
// 将子节点被追加给父节点
$('child').appendTo( $('parent') )
// 给父节点的第一个位置插入子节点
$('parent').prepend( $('child') )
// 将子节点被插入到父节点的第一个位置
$('child').prependTo( $('parent') )
// 在兄弟节点后插入一个节点
$('brother').after( $('ele') )
// 在兄弟节点前插入一个节点
$('brother').before( $('ele') )

删除节点

// 删除该节点及全部子节点
$(selector).remove()
// 删除全部子节点，保留该节点
$(selector).empty()
// 删除该节点的父节点，保留该节点及兄弟节点
$(selector).unwrap()

替换节点

// 使用DOM节点去替换选中的节点
$('<标签>').replaceAll( $(selector) )
$(selector).replaceWith( $('<标签>') )

复制节点

$(selector).clone()
// clone(false)  =>  false默认值，仅仅复制节点，但不复制节点绑定的事件
// clone(true)  =>  复制A节点及子节点，并且复制节点绑定的事件