DOM操作笔记

Original 2019-04-11 17:36:19 220
abstract:jQuery获取/操作CSS的方法改变单个css属性$('选择器').css('属性名称','属性值')---$('body').css('background-color','#ccc')---驼峰写法效果一样---$('body').css('backgroundColor&

jQuery获取/操作CSS的方法

改变单个css属性

$('选择器').css('属性名称','属性值')

---$('body').css('background-color','#ccc')

---驼峰写法效果一样

---$('body').css('backgroundColor','#ccc')

111.png

--------------------------------------------------------------------------------------------------------------------

改变多个css属性

$('选择器').css({'属性名称1':'属性值1','属性名称2':'属性值2','属性名称3':'属性值3'})

$('p').css({'color':'red','fontSize':'40px;','fontWeight':'bold'})

222.png

--------------------------------------------------------------------------------------------------------------------

获取单个css属性值

$('选择器').css('属性名')

$('div').css('width')

333.png

--------------------------------------------------------------------------------------------------------------------

获取多个css属性值

$('选择器1,选择器2,选择器3').css('属性名')

--------------------------------------------------------------------------------------------------------------------

jQuery操作属性的方法

$('选择器').addClass('类名 类名') 该方法向被选中的元素添加一个或多个类

444.png

$('选择器').removeClass('类名 类名') 该方法向被选中的元素移除一个或多个类

555.png

$('选择器').attr('属性名') 该方法设置或返回被选中元素的属性值

$('选择器').attr('属性名','属性值')

666.png

$('选择器').removeAttr('属性名') 该方法从被选中的元素中移除属性

777.png

888.png

$('选择器').hasClass('属性值') 该方法检查被选中的元素是否包含指定的class,是为true,否为false

999.png

$('选择器1,选择器2,选择器3').toggleClass('类名') 该方法对被选中元素进行添加/删除类的切换操作

10.png

--------------------------------------------------------------------------------------------------------------------

设置内容:

该方法返回或者设置被选中的元素的文本内容

$('选择器').text() 返回

11.png

$('选择器').text('设置的内容') 设置

12.png

该方法返回或者设置被选中的元素的内容(类似innerHTML可以包括html标签)

$('选择器').html() 返回内容

13.png

$('选择器').html('

标签内容

') 设置成其他标签

14.png

该方法返回或者设置被选元素的值

$('选择器').val() 返回内容

15.png

$('选择器').val('修改内容') 设置成其内容

16.png

--------------------------------------------------------------------------------------------------------------------

jQuery的事件函数

jQuery的事件方法

ready() 当我们的DOM已经加载,页面已经加载完,触发的事件==js的onload

语法:

$(document).ready(function(){

})

*不能与一起使用

blur() 当元素失去焦点 ==onblur

语法:

$('选择器').blur(函数(){

})

17.png

focus() 当元素获得焦点 ==onfocus

语法:

$('选择器').focus(函数(){

})

18.png

change() 当元素值发生改变的时候

语法:

$('选择器').change(函数(){

})

19.png

click() 点击事件

语法:

$('选择器').click(函数(){

})

20.png21.png

dblclick() 双击事件

语法:

$('选择器').dblclick(函数(){

})

22.png

mouseover() 当鼠标指针位于元素上方时会发生mouseover事件

语法:

$('选择器').mouseover(函数(){

})

23.png

mouseenter() 当鼠标指针穿过元素时会发生mouseenter事件,感觉和上面的事件差不多效果

语法:

$('选择器').mouseenter(函数(){

})

25.png

mousemove() 当鼠标指针在指定的元素中移动时,就会发生该事件,同上两个效果差不多

语法:

$('选择器').mousemove(函数(){

})

26.png

mouseleave() 当鼠标指针离开元素时

语法:

$('选择器').mouseleave(函数(){

})

27.png

mouseout() 当鼠标指针从元素上移开时

语法:

$('选择器').mouseout(函数(){

})

28.png

mousedown() 当鼠标指针移动到元素上方并按下鼠标按键时

语法:

$('选择器').mousedown(函数(){

})

29.png

mouseup() 当在元素上松开鼠标按键时

语法:

$('选择器').mouseup(函数(){

})

30.png

resize() 当调整当前浏览器窗口大小时

语法:

$(window).resize(函数(){

})

31.png

pageX() 属性是鼠标指针的位置,相对于文档的左边缘 event.pageX event:必须 参数来自事件绑定函数

pageY() 属性是鼠标指针的位置,相对于文档的上边缘 event.pageY event:必须 参数来自事件绑定函数

32.png

jQuery的事件切换

hover(over,out)

over:鼠标移上元素上要触发的一个函数

out:鼠标移出元素上要触发的一个函数

语法:

$('选择器').hover(函数(){

},函数(){

})

33.png

toggle() 如果元素是可见的,就切换为隐藏,否则相反

34.png

35.png



Correcting teacher:天蓬老师Correction time:2019-04-12 09:22:09
Teacher's summary:这类互斥的切换操作, 应该场景很多的, 之前要通过一些函数来进行, 现在只需要一个方法就可以了, 的确方便多了

Release Notes

Popular Entries