day09

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 () {}