首页  思维导图  详情



 



jQuery

2019-03-06 15:31:11   0  举报





仅支持查看

AI智能生成

jQuery

模板推荐

作者其他创作

大纲/内容

事件操作

常用事件

click（）

鼠标单击

mouseout（）

鼠标离开

mouseover（）

鼠标进入

sumbit（）

表单提交

blur（）

元素失去焦点

focus（）

元素获得焦点

hover(function(){},function(){})

鼠标持久悬放(函数1写鼠标移入的代码，函数2写鼠标移出的代码)

事件绑定

方式一：元素.事件名(function(){})

方式二：元素.on("事件名"，function(){})

获取当前触发事件元素

$(this)

事件冒泡

子元素的事件触发，会导致父元素的同一类事件被触发。这种现象，可以称之为“事件冒泡”

阻止方法： event.stopPropagation()

事件委托

 $("父级元素的选择器").on("事件类型","事件发生源的css选择器",function(){<br>    // 针对事件发生的子元素的统一操作<br> });

阻止事件行为

return false

动画

关键字：animate（）

参数一：要改变的样式属性值，写成对象的形式

参数二：动画持续的时间，单位为毫秒，一般不写单位

参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动

参数四：动画回调函数，动画完成后执行的匿名函数

预设动画

对角线动画

$("div").show(400)

显示

$("div").hide(400)

隐藏

$("div").toggle(400)

在隐藏和显示之间进行切换

滑动动画

$("div").slideDown(400)

向下滑动

$("div").slideUp(400)

向上滑动

$("div").slideToggle(400)

上下滑动之间进行切换

透明度动画

$("div").fadeIn(400)

淡入

$("div").fadeOut(400)

淡出

$("div").fadeToggle(400)

淡入和淡出之间进行切换

$("div").fadeTo(400,0.5)

设置元素变化指定透明度

排队机制

在频繁触发动画效果的时候，jQ会自动记录触发的总次数，直到把所有动画执行完毕为止。

解决方法：在动画函数前面加.stop()

DOM操作

创建标签

let div2 = $('<div>这是一个div元素</div>')

删除标签

$('#div1').remove()

插入元素

添加子元素

appendTo()

在现存元素的内部，从后面放入元素

prependTo()

在现存元素的内部，从前面放入元素

添加兄弟元素

insertAfter()

在现存元素的外部，从后面放入元素

insertBefore()

在现存元素的外部，从前面放入元素

获取元素标签

选择器类型

1.id选择器

$("#id")

2. 类选择器

$(".class")

3.层级选择器

$("ul li")

4. 群组选择器

$("h1,div")

选择器筛选

$('div').has('p');

选择包含p元素的所有div元素

$('div').not('.myClass')

选择class不等于myClass的所有div元素

$('div').eq(5)

选择所有div元素中下标为5的div元素

选择器关系

同级关系

prev（）# 前面紧挨的同辈元素

prevAll（） 元素之前所有的同辈元素

next（） 元素后面紧挨的同辈元素

nextAll（） 元素后面所有的同辈元素

silsiblings（） 元素的同级元素

嵌套关系

children（） 元素的所有子元素

parent（） 元素的父元素

parents（） 元素的所有父元素

find（）

html元素内容

获取 html（）内容

$('#div1').html();

设置元素的html内容

$('#div1').html('<span>添加文字</span>')

表单元素

获取表单元素的值

$('#input1').val()

设置表单元素的值

$('#input1').val('admin')

操作元素属性

获取元素属性

$("#img1").attr("src")

$("#fav").prop("checked")   建议使用这个

设置元素的属性值

$('#img1').attr("src","test.jpg")

$('#img1').prop({"src": "test.jpg", "alt": "Test Image" })

操作css样式

获取css样式

$("div").css("width")

设置css样式

$("div").css({"font-size":"30px","color":"red"})

操作类名

$("#div1").addClass("divClass2")

追加单个

$("#div1").removeClass("divClass")

移除单个

$("#div1").removeClass("divClass divClass2")

移除多个

$("#div1").toggleClass("anotherClass")

切换样式名

链式编程

   var 对象 = {<br>    方法名:function(){<br>    // .....<br>    return this; // 实现链式编程的核心 <br> }<br> }

 收藏

立即使用

CSS

 收藏

立即使用

HTML

 收藏

立即使用

jQuery

 收藏

立即使用

javascript

addit

职业：大专

去主页

 Collect

Get Started

JQuery

 Collect

Get Started

Jquery 基础知识点总结

 Collect

Get Started

jQuery

 Collect

Get Started

Jquery





0 条评论

下一页