jquery加载完成后方法只执行一次_jQuery的使用

jQuery是一个快速、简洁的JavaScript框架，一个优秀的JavaScript代码库，或者说框架。

jQuery的设计宗旨是“write Less, do more”，倡导写更少的代码，做更多的事情。它封装JavaScript的常用功能代码，提供一种便捷的JavaScript设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。

jQuery现在已经发布到第三个大版本，一般用第一个版本，因为兼容性最好。

快速获取dom

语法：$（“选择器”），按照CSS选择器进行选择即可

返回值：jQuery文档对象，要注意的是jQuery对象跟原生的dom对象不是一个东西，这里面有jQuery封装好的方法。

快速设置文档样式

语法：$（“选择器”）.css（“样式属性”，“样式的值”）

一次设置多个样式：$（“选择器”）.css（属性key：属性value，属性key：属性value）

注意：如果属性key由多个单词并联，那么必须用驼峰命名法，或者加引号来解决。

$

比如像上图fonSize写法。

设置获取文档内容

语法：

$（“选择器”）.html（）---->获取文档的html内容

$（“选择器”）.text（）---->获取文档的text内容

$（“选择器”）.val（）---->获取输入框的value内容

$（“选择器”）.html（“html内容”）---->设置文档的html内容

$（“选择器”）.text（“文本内容”）---->设置文档的text内容

$（“选择器”）.val（“value”）---->设置输入框的value内容

快速将内容插入文档

语法：

$（“选择器”）.append（“<h1>HelloWorld</h1>”）--->将参数里面的html内容追加到选择器对象的最后一个子元素上。

$（“类选择器1”）.appendTo（“类选择器2”）--->将选择器1对象插入到参数 选择器2对象上。

$(".child").insertBefore("ul") ---->在什么前面插入内容

$('.child').insertAfter("ul") ---->//在什么后面插入内容

//往选择器里面插入数据

快速写JS的动画

语法:

$(".parentt").slideToggle(5000) --->//滑动切换

$(".parentt").fadeToggle(5000) --->//淡入淡出切换

$(".parentt").fadeIn(5000,"linear",function(){console.log("动画完成")}) --->淡入进来

$(".parentt").fadeOut(5000) --->淡入出去

$('.parentt').animate({width:"900px"},5000,"linear",function(){console.log("动画已完成")})

PS：5000ms，但是不建议用上面直接使用jQuery的动画方法，因为方法里面还使用了间隔函数，耗费性能比较高，用户打开网页不能有很好的体验。

推荐：添加类名的方式完成动画，性能耗费低，动画效果相对来说更加流畅，用户体验好。

$('.parentt').addClass("animate")

快速html事件

语法：

$（“选择器”）.click（function（e）{点击事件之后要执行的内容}）

$（“选择器”）.on（“事件的名称”，function（e）{事件要执行的内容}）

文档加载完毕即执行事件，仅文档加载完毕，不用等待图片加载，可以将js代码放置到前后都行。

$（document）.ready（function（）{ }） 也可以缩写成：$（function（）{ }）