jQuery的介绍与使用方式
- jQuery 的介绍
- 入口函数
- $是什么
- dom元素和jQuery对象
- 基础选择器
- 子代后代选择器
- 过滤选择器
- 筛选选择器
- 全选择器
- mouseover和mouseenter mouseout和mouseleave
- jQuery操作类
- 获取设置文本
- 获取设置样式
- 案例1- tab栏切换
- 案例2-手风琴下滑栏
jQuery 的介绍
jQuery是一个快速，小型且功能丰富的JavaScript库。
(jQuery其实就是别人封装好的一个外部js库)借助易于
使用的API（可在多种浏览器中使用），使HTML文档
的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。
兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
使用方法：
去官网http://jquery.com/download/下载jQuery的包，然后放到项目中存放js代码的目录下，最后在需要用jQuery的HTML中用
官网上可以下载所有的jQuery文件
不同版本
1.x 已经不更新了 支持老浏览器 包括IE6 IE8 opera老的版本
2.x 已经不更新了 不支持以前的老浏览器
3.x 正在更新中 不支持老浏览器
每个版本有压缩和未压缩的
压缩版的 适用于生产环境 实际开发过程
未压缩的 适用于开发测试
入口函数
入口函数的第一种写法
$(document).ready(function(){})入口函数的第二种写法 是第一种的简化版 用的比较多
$(function(){})jQuery的入口函数与原生的入口函数的区别
a. 原生js的入口函数只能写一个 如果写了多个 那么后面的就会将前面的覆盖掉那么前面的代码都不会执行，jquery的入口函数可以写多个
b.执行时机，原生js的入口函数 是需要等到页面上所有的资源（dom树 外部的css文件 图片。。。 ）都加载完毕之后，jQuery的入口函数 只需要页面的dom树加载完毕就可以执行
需要给div盒子加边框
window.onload=function(){
var btn=document.getElementById("btn");
var divList=document.querySelectorAll("div");
btn.onclick=function(){
for(var i=0;i<divList.length;i++){
divList[i].style.border="1px red solid";
}
}
}
// window.οnlοad=function(){
// console.log("我是第二个入口函数") //会覆盖前面的入口函数
// }用JavaScript操作获取到DOM对象，再进行操作，而jQuery获取到的是jQuery对象。
$(function(){
$("#btn").click(function(){
$("div").css("border","1px red solid");
})
})$是什么
$ 如果没有引入jQuery文件 那么就会报错，那么说明$ 一定是jQuery文件里面来的
给window对象添加一个jQuery方法和 $ 方法 对应的值是一个函数
window.jQuery=window.$=jQuery;script标签引入外部js的一个特点
如果引入外部的js文件 那么在引入之后 就直接执行这个js文件里面的代码，那么对于jQuery也一样 jQuery文件是一个自执行函数 当引入jQuery文件的时候 就会自动执行
引入jQuery文件之后 就直接把$ 和jQuery方法作为属性给了window
入口函数 可以使用$ 也可以使用jquery
jQuery(function(){ })$ 既然是一个函数 那么它也可以传入多种参数
如果传入的参数是一个匿名函数 那么$就是一个入口函数
如果传入的参数是一个字符串 那么$就是一个选择器获取元素
如果传入的参数是一个dom元素 那么$就是把这个dom元素转换成jQuery对象
dom元素和jQuery对象
使用DOM元素（原生js的方法）
原生js选择器获取到的是dom对象 document。getELementByClassName
原生的DOM元素只能调用dom的属性或者方法 不能调用jQuery的方法
var one=document.getElementById("one");
console.log(one);使用jQuery对象
使用jQuery选择器获取到的是jQuery对象
只能调用jQuery的方法 不能调用原生的
jQuery对象是一个伪数组 不能调用数组里面的方法
var $one=$(one);//获取到的是jQuery对象 保存jQuery对象 变量命名的时候最好使用$开头
console.log($one);
console.log($one.__proto__===Array.prototype);//false
console.log(Object.prototype.toString.call($one));DOM和jQuery对象的相互转换
dom元素转换成jQuery对象： 直接把dom作为参数传递给$ 方法
var $divOne=$(one);把jQuery对象转换成dom元素 直接使用下标取值 获取到的就是dom元素
$divs=$("div");
var divOne=$divs[0];调用jQuery的get方法 参数传索引
var divTwo=$divs.get(1);基础选择器
基础选择器和css里面的选择器一模一样
id选择器 $("#id名")
类选择器 $(".类名")
标签选择器 $(“标签名”)
交集选择器 $(“div.two”) 要选择元素是div 而且类名要是two
并集选择器 $(".one,.two") 这个是只要有类名为one 或者two 的都可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<ul>
<li id="one">我是大当家</li>
</ul>
<!-- 东山头 -->
<ul id="east">
<li class="two">我是二把手</li>
<li>哨兵</li>
<li>土匪蛋子</li>
<li>土匪蛋子</li>
<li>土匪蛋子</li>
<li>土匪蛋子</li>
<li>土匪蛋子</li>
<li class="doctor">医生</li>
<li class="hf">伙夫</li>
</ul>
<!-- 西山头 -->
<ul id="wast">
<li class="two">我是二把手</li>
<li>哨兵</li>
<li class="nj">土匪蛋子</li>
<li>土匪蛋子</li>
<li class="nj">土匪蛋子</li>
<li>土匪蛋子</li>
<li>土匪蛋子</li>
<li class="doctor">医生</li>
<li class="hf">伙夫</li>
</ul>
</div>
<div>
<p class="nj">老百姓</p>
<p>老百姓</p>
<p>老百姓</p>
<p class="nj">老百姓</p>
<p>老百姓</p>
<p>老百姓</p>
<p>老百姓</p>
<p>老百姓</p>
</div>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//大当家要求把自己的字体变大 变成40px
$("#one").css("font-size","40px");
//二当家字体变成30px
$(".two").css("font-size","30px");
//土匪背景颜色变成绿色
$("ul li").css("background-color","green");
//医生 伙夫背景橙色
$(".doctor,.hf").css("background-color","orange");
//不干扰老百姓的情况下找出内奸(nj)设置背景色为红色
$("li.nj").css("background-color","red");
})
</script>
</html>子代后代选择器
子代选择器
$(“父元素>子元素”)
后代选择器
$(“父元素 后代元素”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="father">
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<p>标签</p>
</div>
<div></div>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<span>span</span>
</div>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
子代选择器
$("父元素>子元素")
后代选择器
$("父元素 后代元素")
*/
$(function(){
//需求1 找到类名为father的盒子下的所有子代div标签
console.log($(".father>div"));
//需求2 找到类名为father的盒子下的所有子代div标签和p标签
// console.log($(".father>div,p"));//获取到.father下的所有的子代div标签 和页面上 所有的p标签
// console.log($(".father>(div,p)"));//报错 jQuery里没有这种写法
console.log($(".father>div,.father>p"));
//需求3 找到.father盒子下所有的后代div
console.log($(".father div"));
})
</script>
</html>过滤选择器
过滤选择器前面都会加一个冒号
:odd 找到索引号为奇数行的元素
:even 找到索引号为偶数行的元素
:eq(index) 找到传入的索引号对应的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("li:odd").css("backgroundColor","pink");
$("li:even").css("backgroundColor","yellowgreen");
//把首行和最后一行背景色变成金色
$("li:eq(0)").css("backgroundColor","gold")
$("li:eq(9)").css("backgroundColor","gold")
//声明一个变量来保存原来的颜色
var bgColor=null;
//给li元素注册鼠标移入事件
$("li").mouseover(function(){
//当鼠标移入某一行 那行就变色
//在颜色修改之前获取到
bgColor=$(this).css("backgroundColor");
$(this).css("backgroundColor","red");
})
//给li注册鼠标移出事件
$("li").mouseout(function(){
$(this).css("backgroundColor",bgColor);
})
})
</script>
</html>筛选选择器
children(选择器) 子类选择器
$(“父元素”).children(“子元素选择器”)
find(选择器)后代选择器
$(“父元素”).find(“子元素选择器”)
siblings(选择器) 兄弟选择器 （找的是兄弟节点 不包括自己）
$(“兄弟元素”).siblings(“兄弟元素”)
parent() 父元素选择器
$(“选择器”).parent()
next() 下一个兄弟元素
$(“选择器”).next()
prev() 上一个兄弟元素
$(“选择器”).prev()
eq(index) 找对应索引的元素 $(“元素名:eq(索引)”)
$(“元素名”).eq(索引)
全选择器
全选择器 $( “*” )
顾名思义，全选择器就是选择所有的标签。
mouseover和mouseenter mouseout和mouseleave
mouseover 是鼠标移动到目标元素及其子元素上时才会触发
mouseenter 是鼠标移入到目标元素上时 才会触发
mouseout是鼠标移出目标元素及其子元素外时才会触发
mouseleave是鼠标移出目标元素外时 才会触发
jQuery操作类
添加类
设置单个类
jQuery对象.addClass(“类名”)
和classList添加类的区别
classList添加类 是传多个参数 每个类使用双引号包起来 每个类之间使用逗号隔开
移出类
jQuery对象.removeClass(“类名”)
参数什么都不传 那么就表示移出全部的类 包括原本设置的默认样式，开发中很少这么用
判断类
判断元素是否拥有某个类 如果有就返回true 否则返回false
jQuery对象.hasClass(“类名”)
切换类
jQuery对象.toggleClass(“类名”)
一次性操作多个类，把全部的类放在一个字符串里 每个类之间使用空格隔开，如果不加空格 那么就是默认是一个类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
margin-top: 30px;
}
.bgc{
background-color: #0f0;
}
.w300{
width: 300px;
}
.h300{
height: 300px;
}
.font30{
font-size: 30px;
}
.color{
color: #ff0;
}
</style>
</head>
<body>
<input type="button" value="添加类" id="add">
<input type="button"value="移出类" id="remove">
<input type="button"value="判断类" id="has">
<input type="button"value="切换类" id="toggle">
<div id="box" class="color">盒子</div>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
//1.添加类
$("#add").click(function(){
//设置单个类
// $("#box").addClass("bgc");
//一次性添加多个类 把全部的类放在一个字符串里 每个类之间使用空格隔开
$("#box").addClass("font30 w300 h300 bgc");
});
//2.移出类
$("#remove").click(function(){
// $("#box").removeClass("w300 h300");
$("#box").removeClass();
});
//3.判断类
$("#has").click(function(){
//判断元素是否拥有某个类 如果有就返回true 否则返回false
console.log($("#box").hasClass("bgc"));
})
//4.切换类
$("#toggle").click(function(){
$("#box").toggleClass("font30")
});
})
</script>
</html>获取设置文本
text() 获取和设置文本的方法
获取文本
可以获取到元素自身的文本 也可以获取到后代元素中的文本
jQuery里面封装了迭代的方法 隐式迭代
//获取.div1的文本
var text=$(".div1").text();
console.log(text);
//获取div里全部的文本
console.log($("div").text());设置文本
只需要给text(参数) 加了参数后 就是给元素设置文本
会覆盖元素原本的文本 包括子元素
如果新设置的文本包括了标签 那么它是不会解析的 当做文本内容来解析
$("#box").text("<a>新设置的text</a>");获取设置样式
css()用来获取或者设置样式
获取标签的样式
jQuery对象.css(“属性名”)
//获取div1的标签的样式
console.log($(".div1").css("height"));在所有的IE浏览器中 获取样式 要写准确的样式 例如获取上边框的宽度 颜色
console.log($(".div1").css("border-top-color"))设置样式
使用css方法设置单样式
jQuery对象.css(“属性名”,“属性值”)
$(".div1").css("width","300");使用css设置多样式
jQuery对象.css({ "属性名”：“属性值” })
css(属性名与属性值所创建的对象)
$(".div1").css({
width:"300px",
"height":300,
// background-color:"red"
backgroundColor:"green",
border:"10px solid gold"
})案例1- tab栏切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.wrapper{
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab{
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li{
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span{
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products{
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main{
float: left;
display: none;
}
.products .main.selected{
display: block;
}
.tab li.active{
border-color: red;
border-bottom: 0;
}
img{
width: 1002px;
height: 476px;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际品牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品<span>◆</span></li>
</ul>
<div class="products">
<div class="main selected">
<a href="#"><img src="img/1.jpg" ></a>
</div>
<div class="main">
<a href="#"><img src="img/2.jpg" ></a>
</div>
<div class="main">
<a href="#"><img src="img/3.jpg" ></a>
</div>
<div class="main">
<a href="#"><img src="img/4.jpg" ></a>
</div>
</div>
</div>
</body>
<script src="./js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$(".tab .tab-item").mouseenter(function(){
//鼠标移入对应的li元素 就会给当前的li元素添加一个active类
$(this).addClass("active").siblings("li").removeClass("active");
//获取当前移入的这个li元素的索引
var index=$(this).index();
//console.log(index);
//根据索引 找到对应的div 让其添加selected类 让其他的div移出selected类
$(".main").eq(index).addClass("selected").siblings("div").removeClass("selected");
})
})
</script>
</html>案例2-手风琴下滑栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parentWrap{
width: 400px;
list-style: none;
margin: 100px auto;
text-align: center;
}
.menuGroup{
border: 1px solid #999;
background-color: #e0ecff;
cursor: pointer;
}
.groupTitle{
display: block;
height: 40px;
line-height: 40px;
font-size: 20px;
font-weight: bold;
border-bottom:1px solid #999 ;
}
.menuGroup>div{
height: 300px;
background-color: #eee;
display: none;
}
</style>
</head>
<body>
<ul class="parentWrap">
<li class="menuGroup">
<span class="groupTitle">朋友圈</span>
<div>朋友圈内容</div>
</li>
<li class="menuGroup">
<span class="groupTitle">QQ空间</span>
<div>QQ空间内容</div>
</li>
<li class="menuGroup">
<span class="groupTitle">微博</span>
<div>微博内容</div>
</li>
<li class="menuGroup">
<span class="groupTitle">论坛</span>
<div>论坛内容</div>
</li>
</ul>
</body>
<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//需求 点击上方span标签题 那么下面对应的div显示 而且其他兄弟li元素下的div隐藏
$(function(){
$(".menuGroup").click(function(){
// var a=$(this).children("div").show();
// console.log(a);
// $(this).siblings("li").children("div").hide();
// var b=$(this).siblings("li");
// console.log(b);
// var c=$(this).siblings("li").children("div");
// console.log(c);
$(this).children("div").show().parent().siblings("li").children("div").hide();
})
})
</script>
</html>
