前端小记——jQuery
目录
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
一个按钮