jQuery笔记

什么是jQuery？

JavaScript和查询（Query），它是辅助JavaScript开发的js类库

jQuery核心思想

write less，do more（写得更少，做得更多），实现了很多浏览器的兼容问题

 

使用jQuery一定要引入jQuery库

$是jQuery的核心函数，能完成jQuery的很多功能，$()就是调用$这个函数

• 传入参数为[函数]时，表示页面加载完成之后执行这个函数，相当于 window.onload = function () {}
• 传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象
• 传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象

  • $("#id属性值");        id选择器，根据id查询标签对象 ID选择器，根据id查询标签对象

  • $(“标签名");            标签名选择器，根据指定的标签名查询标签对象 标签名选择器，根据指定的标签名查询标签对象

  • S(".class属性值");  类型选择器，可以根据class属性查询标签对象
• 传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回

$(function () {    //表示页面加载完成之后，相当于 window.onload = function () {}
	var $btn = $("#btn");      //表示按id查询标签对象
	$btn.click(function () {    //绑定单击事件
		alert("jQuery的单击事件");
	});
});

　　

jQuery对象的本质：dom对象的数组 + jQuery提供的一系列功能函数

jQuery对象不能使用DOM对象的属性和方法，DOM对象也不能使用jQuery对象的属性和方法

 

jQuery对象和DOM对象的相互转化

 

alert( $(document.getElementById("test"))[0] );

　　

jQuery属性操作

• html()    设置和获取起始标签和结束标签中的内容，和dom属性innerHTML一样
• text()    设置和获取起始标签和结束标签中的文本，和dom属性innerText一样
• val()    设置和获取表单项的value属性值，和dom属性value一样
• attr()    可以设置和获取属性的值，不推荐操作checked、readOnly、 selected、 disabled 等等，attr方法还可以操作非标准的属性，比如自定义属性: abc
• prop    可以设置和获取属性的值,只推荐操作checked、readOnly、 selected、 disabled 等等

 

dom的增、删、改

内部插入

• appendTo()    a.appendTo(b)  把a插入到b子元素末尾，成为最后一个子元素
• prependTo()    a.prependTo(b)  把a插到b所有子元素前面,成为第一个子元素

外部插入

• insertAfter()    a.insertAfter(b)  得到ba
• insertBefore()    a.insertBefore(b)  得到ab

替换

• replaceWith()    a.replaceWith(b)  用b替换掉a
• replaceAl()    a.replacall(b)  用a替换掉所有b

删除

• remove()    a.remove();  删除a标签
• empty()    a.empty();  清空a标签里的内容

 

css样式操作

• addClass()：添加样式
• removeClass()：删除样式
• toggleClass()：有就删除，没有就添加
• offset()：获取和设置元素的坐标

 

jQuery动画

基本动画

• show()：将隐藏的动画显示
• hide()：将显示的动画隐藏
• toggle()：可见就隐藏，不可见就显示

注意：以上动画方法都可以添加参数

1. 第一个参数是动画执行的时长，以毫秒为单位
2. 第二个参数是动画的回调函数（动画完成后自动调用的函数）

淡入淡出动画

• fadeIn()：淡入（慢慢可见）
• fadeOut()：淡出（慢慢消失）
• fadeTo()：在指定时长内慢慢的将透明度修改到指定的值。0透明，1完全不透明
• fadeToggle()：可见就淡出，不可见就淡入

 

jQuery事件操作

• click() ：可以绑定单击事件，已经出发单击事件
• mouseover()：鼠标移入事件
• mouseout()：鼠标移出事件
• bind()：可以给元素一次性绑定一个或多个事件
• one()：使用上和bind一样，但是one方法绑定的事件只会响应一次
• unbind()：解除事件的绑定
• live()：也是用来绑定事件。可以用来绑定选择器匹配的所有元素的事件，哪怕这个元素是后面动态创建出来的也有效

$( function(){} ); 和 window.onload = function(){} 的区别

• jQuery是浏览器内核解析完页面的标签，创建好DOM对象之后马上执行，原生js除了要等浏览器解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成
• 当有多个时，原生js只执行一次，jQuery按顺序依次执行