1、jQuery准备知识
http://jquery.com/ 官方网站
https://code.jquery.com/ jQuery版本下载
<script src="./js/jquery-1.12.4.min.js"></script>
// 导入jQuery库
(document).ready(function()…)//监听html加载完毕完整写法
(function(){ … }) // 简写法
2、获取标签元素
var divs = $(“div”);
// 用标签选择器获取
var box = $(“.box”);
// 用类选择器获取
var $div1 = $("#div1”);
// 用id选择器获取
var $p1 = $(".div2 .p1”);
// 用层级选择器获取
var input1 = $("input[name = 'psw']”)
// 用属性选择器获取
alert(input1) // 不管有没有找到元素,返回的都是一个对象
alert(input1.length) // 可以用length来判断有没有找到元素
3、选择过滤
var divs = $(“div”);
// 用标签选择器获取
var div01 = divs.han(“p”)
// 在divs中找到找到子级包含P元素的元素
var divs = $("div").not(".box2");
//$(“div”)的元素,过滤掉.box2的元素
var div4 = $("div").eq(4);
//选中指定索引的元素 从0开始
4、选择器转移
var $li05 = $(".li05”);
var $li04 = $li05.prev();
// 获取上一个元素(都是同一级别的吗)
var $preall = $li05.prevAll();
//前面所有的元素
var $li06 = $li05.next();
// 下一个元素
var $li678 = $li05.nextAll();
// 之后的所有元素
var $box1 = $p1.parent();
// 获取父级元素
var child = $box1.children();
//获取所有子级元素(第一级子集)
var a1 = $box1.children(".a1”);
// 获取子集中的.a1的子元素
var $li03Others = $li03.siblings();
//获取其它所有的同级元素
var $a2 = $box1.find(".a2");
//查找子级的元素 这是所有的子级
5、jQuery操作样式
var box = $(".box”);
// 获取元素
var width = $box.css("width”);
// 获取元素的样式 200px
var bgco = $box.css("backgroundColor”);
// 获取元素的背景色 rgb(255, 215, 0)
$(".box").css("color", "red”);
// 设置一种样式
$(".box").css({ color: "blue", "fontSize": "30px" ,backgroundColor:"gold"});
// 设置多种样式
var lis = $(".list li”);
// 获取多个元素
$lis.css({ color: "red", "fontSize": "25px" });
//可以统一设置样式
var color = $lis.css("color”);
//获取样式获取的是第一个元素的
6、 添加类样式
box1.addClass("big red bgGold");
//添加类选择器,类选择器可以是已经定义好了样式
$box2.removeClass("bgGold big");
//移除类选择器
$box3.toggleClass("big red”);
// 切换类样式 如果有就移除 没有就添加
7、添加事件的处理方式
给button添加点击事件
$(".btn").click(function () {
// onClick事件处理
});
给list所有元素添加了事件
$(".list li").click(function () { // 为所有元素都添加了事件
$(this).css({ "fontSize": "30px" }); // $(this) 指向点击的那个li
console.log($(this).index()); // .index()是获取元素 在父级里的索引下标
});
8、jQuery中的特殊效果
$box1.fadeIn(2000, function () { ... });
// 渐变显示,参1是渐变持续时间,参2是动画结束后的监听函数
$box1.fadeOut(2000, function () { … });
// 渐变消失
$box1.fadeToggle(2000, function () {};
// 上述两个动画切换
$box1.show(2000,function () { … });
// 从父级的左上角开始显示
$box1.hide(2000,function () { ... });
// 往父级左上角消失
$box1.toggle(2000,function () { … });
// 显示消失切换
$box1.slideDown(2000);
// 卷下显示
$box1.slideUp(2000);
// 卷上消失
$box1.slideToggle(2000);
// 上述两个动画切换
$box1.stop();
// stop是停止上一个动画,和其他方法连用,如:$box1.stop().toggle(2000,function () {}