jquery总结jquery的命名方式都遵循驼峰命名jquery的好处解决很多兼容性问题，有了jquery就不用去管兼

jquery的命名方式都遵循驼峰命名

jquery的好处

解决很多兼容性问题，有了jquery就不用去管兼容问题了，体积小，操作比原生简单。插件丰富开源免费特点：链式编程

window.onload只能写一次，重复写后面会覆盖前面 页面加载完才出发

jquery用 $(document).ready()代替可以**写多个** 简写是$ (function) dom元素加载完就出发

jquery和dom对象互相转换

为什么要转换，因为jquery没有将所有的js代码都进行封装，所以有些还是要用原生js来写。这时候就需要转换

var bt1=$("#btn")[0];//jquery转换成dom对象前面加$后面加[0]

var dv1=$(" #dv");   dom对象转jquery前面加$

$("#btn")[0]和$("#btn").get(0)都可以转dom对象，
$(" #dv");转jquery对象

常用jquery选择器

$("#btn"),$ ("div"), $(".calss")，$ ("*") 组合选择器 $(li.cls) 多条件$ (span,li,div)

常见方法

.html(),类似于innerHTML
.text(),类似于innerText
.val()，类似于value
.css() ，类似于style
()中写字符串,一个参数,就是要设置的值,什么也不写,返
回的是这个属性的值
.css()写的是键值对
$(“div ~ span”)获取当前元素后面所有元素

:even偶数 选择器
:odd奇数 选择器
索引选择器
eq（）
gt（）
lt（）
siblings("")选择兄弟其他的元素
next（）兄弟下
nextAll（）所有兄弟下 返回的是集合 
prev（）兄弟上
prevAil（）所有兄弟上 返回的是集合
addClass()参数是类样式名字，添加不会覆盖原有样式
removeClass("cls")不写参数删除所有类样式，写就删除指定的
hide（）参数可以输字符串和slow，normal，fast
show（）第二参数可以是函数

append追加元素类似appendclide

prepend 最开始添加，类似insertbefore

after 在指定元素之后添加元素

before 在指定元素之前添加元素。

attr（）设置属性值 js里attribute设置属性值

prop也一样

其他动画方法

slideup 滑入
slideDown 滑出
sliedToggle 切换滑入滑出
fadeIn 淡入
fadeOut 淡出
fadeToggle 切换淡入淡出
fadeTo  可以设置透明度,参数 1: 时间 , 参数 2: 到达透明度

动画animate

.animate()

第一个参数:键值对,(数值的属性可以改,颜色不能改)

第二个参数:动画的时间

第三个参数:回调函数

$("#im").animate({"left":"10px","top":"500px","width": "50px", "height": "50px"},2000,function () {}

stop()可以停止动画。

位置操作

$("div").offset({"left":100,"top":100}) 会脱离文档流变成relative 
offset().left或者.top

offset（）.left.top

scrollLeft()和scrollTop 设置可以在括号中添加值即可

$(document).scrollTop() 用法和之前的offset()方法类似,获取的是数字

事件绑定

bind可以多个事件一次绑定

$("#btn").bind({"click":function (）{},
"mouseover":function () {},
"mouseout":function () {}
});

但用得多的还是用on来绑定事件，手机开发中也是使用on的方式绑定事件

参数 1: 绑定事件的类型参数 2: 绑定事件的元素参数 3: 执行事件的函数

$("div").on("click","p",function () {
alert(" 哎呀");
})

事件解绑

$("#btn1").off("click mouseover");
$("div").off(); 全部解绑
推荐:用什么方式绑定事件就要用对应的解绑事件解除绑定
$("#btn").bind("click",function(){});
$("#btn").unbind("click");
$("#dv").delegate("p","click",function(){});
$("#dv").undelegate("p","click");

链式编程

只有返回的是对象才能进行链式编程 .html(‘val’).text(‘val’).css()链式编程，隐式迭代。比如说.html()没写参数是获取值，就不能链式编程。

链式编程原理:内部返回了return this当前对象有些方法设置了值才能返回当前对象，如果没有设置值，是获取属性对应的值,而不是当前对象

迭代each

//  参数：表示每次遍历都要执行的函数
$("li").each(function (index, ele) {
// index  表示：当前这个元素的索引号 从 0 开始的 0 - 10
var op = (index + 1) / 10;
$(ele).css("opacity", op);
});

多库共存

同一个页面不仅引入了jQuery的外部文件,也引入了其他的库文件。如果此时其他的库文件中也使用了 $符号。那么就使用:$ .noConflict()解决其他语言中:这个方式叫解决命名空间的冲突。

// 让 jQuery 释放对 $ 的控制权
$.noConflict();
var $=" 哈哈哈";
console.log($);
jQuery(function () {
jQuery("#btn").click(function () {
alert(" 正常的执行");
});
});

jquery尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

jquery的ajax

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中

$(selector).load(URL,data,callback);

或者 $().ajax

jquery的 $.get()$ .post() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(URL,callback);

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);

jqueryUI

1.引入jQueryUI的样式文件

2.引入jQuery

3.引入jQueryUI的js文件

4.使用jQueryUI功能

jquery总结