共计 4100 个字符，预计需要花费 11 分钟才能阅读完成。
目录
jQuery 简介
jQuery 语法
jQuery 加载模式
jQurey 选择器
元素选择
文本内容插入
获取输入框的值
设置属性
CSS 样式的操作
设置 class 属性
class 切换
节点操作
事件的绑定
事件简写
事件对象
显示隐藏动画
上卷下拉动画
淡入淡出动画
jQuery 简介
jQuery 是一个轻量级的 ” 写的少，做的多 ” 的 JavaScript 库。
使用之前需要先安装 jQuery 库文件
jQuery 语法
$(selector).action()
jQuery 加载模式
Title
原生 DOM 对象和 jQuery 对象互换
Title
jQurey 选择器
1.id 选择器
$(“#test”)
2.class 选择器
$(“.test”）
3. 标签选择器
$(”h1“)
4. 子元素
$(“div div p”)
$(“#d1”).find(“#d2”).find(“p”)
5. 兄弟元素
$(“h5”).next()
$(“h5”).nextAll()
元素选择
1. 第一个元素
$(‘li’).first()
2. 最后一个元素
$(‘li’).last()
3. 索引元素
$(‘li’).eq(2)
文本内容插入
// 原生 js Jquery
//innerText text()
//innerHTML html()
$(‘div’).html(‘Hello‘);
获取输入框的值
var value=$(‘input’).val();
alert(value)
设置属性
$(‘#myh’).attr(‘sb2′,’456’);
CSS 样式的操作
$(‘div’).css(‘width’,’100px’).css(‘height’,’100px’).css(‘background-color’,’red’);
$(‘div’).css({“color”:”white”,”border”:”1px solid yellow”});
设置 class 属性
.bg{
background-color:red;
}
.bb{
font-size:50px;
}$(‘h1’).attr(‘class’,’bg’) // 设置 class 属性可以用这个方法
$(‘h1’).addClass(‘bg bb’);
$(‘h1’).removeClass(‘bb’);
class 切换
Title
节点操作
22222222222222222222
// 把一个元素，移动到另一个元素里面的后面
var obj=$(' 后面
');
$(obj).appendTo('#d1');
var obj2=$(' 前面
');
$(obj2).prependTo('#d1');
var obj=$("1111111111
");
// 给这个元素后面添加一个兄弟元素
$('#d1').after(obj);
// 给这个元素前面添加一个兄弟元素
var obj2=$(" 前面
");
$('#d1').before(obj2);
// 把 h3 移动到 p 标签的后面，这是兄弟关系的一段
$('h3').insertAfter('p');
// 给每一个 h1 套一个父标签 div
$('h1').wrap('');
//$('h1').unwrap(); 去掉父标签
// 把所有的 h2 看做一个整体，套一个父标签 div
$('h2').wrapAll('');
//$('h2').unwrap(); 去掉父标签
// 给内部的子标签套一个父标签
$('#d1').wrapInner('');事件的绑定
Title
事件简写
Title
事件对象
Title
一个按钮
显示隐藏动画
Title
上卷下拉动画
淡入淡出动画
原文地址: 前端小记——jQuery
