jQuery
1、jQuery基本用法
j即js，Query 即查询，jQuery封装了js常用的功能代码，写更少的代码，写更多的东西。
2、jQuery常用方法
学些jQuery就是学习方法的调用。
- 当dom在sript标签下方使，script对dom无修饰，可加jQuery方法。
<!-- 1、准备jQUery文件，在script的sr属性中引用 -->
<script src="../jQuery.js"></script>
<!-- jQuery要新写一个script标签 -->
<script>
// 库，就是js文件，js文件提供了的很多方法直接调用库提供的方法
// jQuery是js的一个常用库
// console.log(document.getElementById('box'))
// console($('#box')) // 伪代码
$('#box').css('color','red')
//等待dom运行完，在执行$(document).ready(function()代码
// $(document).ready(function(){ // 第一种方法
// $('#box').css('color','red')
// })
// $(function() { // 第二种方式，推荐是用此种方式，代码简洁易维护
// $('#box').css('color','red')
// })
$(function() {
$('div').css('color','red')
$('span').css('background','skyblue')
})
</script>现有DOM，就是现有html结构，有结构之后才能有效果
- $就是jQuery。
- jQuery本质就是使用$符号对dom对象进行了包裹
- 注意：jQuery对象不能使用js中的方法，dom对象不能使用jQuery提供的方法
1、dom对象转化为jQuery对象
// dom对象转化成jQuery对象，需要使用$()包裹
$(document.getElementById('box')).css('color','orange''3)2、jQuery对象转化为dom对象
// jQuery是对js进行封装，但是没有封装很多方法，需要调用js方法
// 转化方式1,jQuery对象获取的元素是伪数组，伪数组和数组基本一致，但是不能使用数组方法
console.dir($('div'))
//使用索引，此方法比较简洁
$('div')[0].style.color='red'
// 第二个方式，调用get（）方法，传入索引
$('div').get(0).style.color='blue'- jQuery 选择器
// // ID选择器，需要在id前加上#
// $('#box').css('color','red')
// // 类选择器，也叫class选择器
// $('.box').css('color','pink')
// $('div').css('background','grey')- 层级选择器
$(function(){
// $('ul>li').css('color','red')
// css很多属性都具有继承性
// $('ul li').css('color','red')
})- 隐式对象
- jQuery筛选选择器
// 获取第一个和最后一个
$('li:first').css('color','red')
$('li:last').css('color','red')
// 根据索引选择
$('li:eq(2)').css('color','red')
//奇偶选择
$('.two li:odd').css('background','sktblue')
$('.two li:even').css('background','pink')- 筛选方法
// 查找某一个节点
console.dir($('.baba').find('.girl'))
//eq. 根据索引查找对应的节点,eq 需要标识选中的是哪一个节点才可以
console.dir($('.baba div').eq(1))- 排他思想
<script>
$(function(){
$('button').click(function(){
// 排他思想，需要先给自己设置，然后需要取消兄弟节点的方法或者属性
$(this).css('background','orange')
$(this).siblings().css('background','')
})
})
</script>3、jQuery案例
- 淘宝服饰精品案例：
代码如下
<script>
$(function(){
// 1、需要给li绑定鼠标经过滑动时间
$('ul li').mouseover(function(){
// 2、获取到鼠标经过的那个li的索引
var index=$(this).index()
// 3、通过eq（index）找到对应的图片，让图片展示
$('#content div').eq(index).show()
// 4、找到对应图片的兄弟节点，让兄弟节点隐藏
$('#content div').eq(index).siblings().hide()
})
})
</script>- 案例，css盒子
/* style代码
<style>
.box{
width: 300px;
height: 300px;
background: pink;
color: white;
}
</style>
*/
<script>
$(function(){
// 1、调用css方法，如果值传递第一个参数（css属性），发挥盒子对应属性值
console.log($('div').css('color'))
// 2、调用css方法，可以给对应的元素设置css样式,覆盖
$('div').css('color','orange')
// 3、调用 css 方法， 给元素同时添加多个样式
$('.box1').css({
'width' :'100px',
'height': '100px',
'background': 'skyblue'
})
})
</script>- 对上面案例升级。点击添加，添加其box类，显示背景和文字颜色，点击移除移除box类名
代码：省略了style代码
<button class="add">添加类名</button>
<button class="remove">移除类名</button>
<button class="toggle">切换类名</button>
<div >盒子</div>
<script src="../../jQuery.js"></script>
<script>
$(function(){
$('.add').click(function(){
// 通过addclass添加类名
$('div').addClass('box')
})
$('.remove').click(function(){
// 通过removeclass移除类名
$('div').removeClass('box')
})
$('.toggle').click(function(){
// 使用toggleclass切换类名
// 先看有没有这个box类名，如果没有就添加，有就移除
$('div').toggleClass('box')
})
})
</script>- 综合性例子–> tab栏切换
展示效果如下：（点击每一个选项时，实现红色背景的移动和对应下边的索引展示）
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script src="../../jQuery.js"></script>
<script>
$(function(){
$('.tab_list li').click(function(){
// 1、点击哪个 li 就给谁添加 current 类
$(this).addClass('current').siblings().removeClass('current')
// 2、获取索引
var index=$(this).index()
// 3、使用索引，让 li 元素 和对应的内容实现一一对应
$('.tab_con div').eq(index).show().siblings().hide()
})
})
</script>
</body>
</html>- 内容文档值
<script>
$(function(){
// 1、html() 放发如果不传递任何参数，作用是用来获取对应元素的节点值
console.log($('div').html())
// 2、html() 如果带参数，是用来给对应的元素设置内容，设置的内容会覆盖之前的内容
// 3、设置的内容不光是字符串，还可以是html标签
$('div').html('亚索')
// 3、 text() 用来获取元素的文本内容，不包含html标签
console.log($('div').text())
// 4、 text() 带参数是用来给对应的元素设置内容，覆盖之前内容
$('div').text('亚索')
// 5、val() 方法主要对表单进行处理,表单 input/button/form
// val 不带任何参数，获取表单内容
console.log($('input').val())
// 6、val（）参数如果代餐是，则设置value值，并覆盖之前值
$('input').val('是的是的')
})
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
