简称："JQ"
jQuery是一个快速、简洁的JavaScript框架(库，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布)
jQuery设计的宗旨是“write Less，Do More”（写的少，干得多）
jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
插件：是封装好的一个独立的功能代码，可供开发人员完成某个功能时直接使用的
库：是将很多功能代码封装到一起的，并不能帮助我们完成一整个项目
框架：可以帮助我们完成一整套的项目开发
一、jQuery起步
官网:jQuery
手册：离线版(.chm或者PDF)
在线版:jQuery插件库-收集最全最新最好的jQuery插件
1. 安装jquery
a. 下载jQuery库文件
从jq22.com网站上边下载
b. 导入jQuery库文件
!-- 第一种方法: 将jquery文件下载到本地再引入 -->
<script src="./jquery-3.5.1.min.js"></script>
<!-- 第二种:使用cdn的方式 在线的juqery文件 要求电脑必须连网 会导致网页加载速度变慢-->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>2. 入口函数
又称作 预加载函数
<script>
// 第一种写法
$(document).ready(function(){
// 在这里写你的代码...
});
// 第二种写法
$(function(){
// 在这里写你的代码...
})
</script>JavaScript中获取html元素的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
jQuery中获取对象的方法
$()
3. jQuery获取DOM元素 $() 来获取对象(DOM元素) 面试题: js的dom对象和jQuery中的Dom对象 如何互相转化 js dom对象 转化为jquery dom对象 ： 只需给js dom对象加上$() jquery dom对象如何转化为js的dom对象： jq对象[下标]
二、选择器
选择器就是帮助我们来选取元素的，比如说在css中的选择器，选择好元素后进行样式的修饰，在Jquery中选择器选好元素后，是需要进行DOM操作的
大部分的css选择器都可以应用到jQuery选择器中
CSS的选择器分类
-
基础选择器
-
*号选择器
-
标签(元素)选择器
-
类选择器 .类名
-
id选择器 #id值
-
-
复合选择器
-
后代选择器 E F 查找的是E元素里边的F元素
-
子集选择器 E>F 查找的是E元素的子集F元素
-
紧邻兄弟选择器
-
同辈兄弟选择器
-
多重选择器
-
-
伪类选择器
-
:hover
-
:active
-
:visited
-
:link
-
:first-child
-
:last-child
-
:nth-child()
-
:not()
-
:nth-of-type()
-
-
伪对象选择器
-
::before
-
::after
-
::first-line
-
::first-letter
-
、样式
css() 为dom对象设置样式
第一种用法： css(属性名称,属性值) 一次只能设置一个样式
<div class="demo">
设置一条样式
</div>
<script>
$('.demo').css('color','blue').css('background-color','red')
</script>第二种用法：css({属性名称:属性值,属性名称:值....})
<div class="demo">
设置一条样式
</div>
<script>
// 写法一
var s = {
color:'blue',
backgroundColor:'cyan',
fontSize:'24px'
}
$('.demo').css(s)
// 写法二
$('.demo').css({
'color':'blue',
'background-color':'cyan',
'font-size':'24px'
})
</script>
四、DOM操作
1.append() 向匹配到的父元素末尾追加子元素
<div class="add">append</div>
<script>
/*
1. 创建dom元素
jQ: $('<a href="http://www.baidu.com">百度</a>')
2. 获取父元素
$('.add')
3. 使用append()追加
父元素对象.append(要追加的子元素)
*/
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').append(obj)
</script>2.appendTo() 把子元素追加到父元素中
<div class="add">append</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
obj.appendTo($('.add'))
</script>3.prepend() 向父元素的开头添加子元素
<div class="add">prepend</div>
<script>
var obj = $('<a href="http://www.baidu.com">taobao</a>')
$('.add').prepend(obj)
//结果： <div class="add"><a href="http://www.baidu.com">taobao</a>prepend</div>
</script>4. prependTo() 元素前置到另一个、指定的元素元素集合中。
<div class="parent">宝剑锋从磨砺出</div>
<span id="child">梅花香自苦寒来</span>
<script>
$(function(){
$('#child').prependTo($('.parent'))
// 效果：<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从磨砺出</div>
})
</script>4.remove() 移出匹配到的元素
<p>苹果01</p>
<p class="two">苹果02</p>
<p>苹果03</p>
<script>
//$('p').remove() // remove()方法不传递参数的情况下 表示删除匹配到的所有元素
$('p').remove('.two') // 移除类名等于two的p标签
</script>五、属性
1.attr() 获取或者设置属性
<div class="demo" title="这是一个测试代码">attr方法 </div>
<script>
// attr() 获取匹配元素属性的值
var res = $('.demo').attr('title')
// attr() 设置匹配元素的属性值
$('.demo').attr('title','this is a test code') // 只修改一个属性值
$('.demo').attr({name:'code',id:'test'}) // 设置多个属性
</script>2.removeAttr() 移除属性 (注意：只接受一个参数 )
<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div>
<script>
$('.demo').removeAttr('id')
</script>3.() 添加类名
<div id="demo"> 白日依山尽</div>
<script>
$(this).addClass('active')
</script>4.removeClass() 移出类名的
<div id="demo" class='active'> 白日依山尽</div>
<script>
$(this).removeClass('active')
</script>5.toggleClass() 当某个类名存在时则删除，不存在时则添加
<div id="demo"> 白日依山尽</div>
<script>
$('#demo').click(function(){
$(this).toggleClass('active')
</script>6.html() 获取或者设置匹配元素的内容(包含标签)
<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
$(function(){
// html() 获取元素的内容 和JavaScript中的innerHTML相同的
var con = $('.content').html()
// console.log(con);
// html() 设置匹配元素的内容
$('.content').html('去<a href="http://jd.com" target="_blank">京东</a>网购')
})
</script>7.text()
<div class="content"><span>作者:王之涣</span><br>白日依山尽</div>
<script>
$(function(){
// text() 获取元素的文本内容不包含标签 和JavaScript中innerText的相同的
var con = $('.content').text()
// console.log(con);
// text() 设置匹配元素的文本内容
$('.content').text('去<a href="http://jd.com" target="_blank">京东</a>网购')
})
</script>注意： text()和html() 最大的区别，text()只处理文本内容，不能识别标签，而html() 方法可以识别标签 text()和html() 方法不能够用于获取或者设置表单标签的值，除了button和textarea这两个标签之外
8.val() 获取或者设置表单标签的值
<input type="text" id="user" value="zhangsan">
<script>
$(function(){
// val() 获取表单标签的值
var res = $('#user').val()
// console.log(res);
// val() 设置匹配元素的value值
$('#user').val('张三')
})
</script>9.prop() 设置或者获取元素的属性值
10.removeProp() 移出属性
attr() 和prop()的应用场景
prop()方法经常用于标签属性值有true和false的时候使用，例如：checked、seleted、readonly、disabled
六、事件
1.鼠标事件
语法:事件对象(dom元素).事件名称(function(){})
a.鼠标单击事件 click()
<style>
.clk{
width: 200px;
height: 180px;
background-color: red;
}
.active{
background-color: blue;
}
</style>
<div class="clk"></div>
<script>
$(function(){
$('.clk').click(function(){
$('.clk').toggleClass('active')
})
})
</script>b.鼠标移出事件 mouseout()
c.鼠标滑过事件 mouseover()
2. 表单事件
聚焦事件(获得焦点事件) focus()
失去焦点事件 blur()
内容改变事件 change()
表单提交事件 submit()
注意: 对象是form标签
3.键盘事件
键盘按下事件 keydown()
键盘弹起事件 keyup()
键盘按压事件 keypress()
键盘码
4. jq中独有的事件方法
事件绑定方法 bind()
事件解绑方法 unbind()
只触发一次事件方法 one()
on()
需要事件委托的元素的事件绑定 一般都是动态创建的dom元素需要事件委托
七、动画效果
1. 显示和隐藏
show() 显示
<button>显示</button>
<button>隐藏</button>
<div class="show">显示</div>
<script>
$(function(){
// 单击显示按钮 div显现
$('button:eq(0)').click(function(){
$('.show').show(2000)
})
})
</script>hide() 隐藏
<button>显示</button>
<button>隐藏</button>
<div class="show">显示</div>
<script>
$(function(){
// 单击隐藏按钮 div消失
$('button:eq(1)').click(function(){
$('.show').hide(2000,function(){
$(this).show(1000)
})
})
})
</script>2. 上拉和下拉
slideUp() 上拉
slideDown() 下拉
slideToggle() 如果元素未显示 下拉 显示的 就是上拉
<button>上拉</button>
<button>下拉</button>
<button>toggle</button>
<div class="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").slideUp(2000)
})
$("button:eq(1)").click(function(){
$(".show").slideDown(2000)
})
$("button:eq(2)").click(function(){
$(".show").slideToggle(2000)
})
})
</script>3 淡入和淡出
fadeIn() 淡入
adeOut 淡出
fadeToggle()
<button>淡入</button>
<button>淡出</button>
<button>toggle</button>
<div class="show">div标签</div>
<script>
$(function(){
$("button:eq(0)").click(function(){
$(".show").fadeIn(2000)
})
$("button:eq(1)").click(function(){
$(".show").fadeOut(2000)
})
$("button:eq(2)").click(function(){
$(".show").fadeToggle(2000)
})
})
</script>4. 自定义动画
animate()
<style>
.show{
width: 240px;
height: 180px;
background-color: red;
}
</style>
<body>
<div class="show">div标签</div>
<script>
$(function(){
$(".show").animate({
"margin-top":'200px',
"margin-left":'300px'
},2000)
})
</script>
1529
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
