一、什么是 jQuery ?
1、jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。
jQuery 库包含以下功能:
- HTML 元素选取 HTML
- 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX Utilities
- 提示: 除此之外,jQuery 还提供了大量的插件。
2、jquery的下载与引用
下载地址
- 从 jquery.com 下载 jQuery 库
- 从 CDN 中载入 jQuery,
- 如从 百度、又拍云、新浪 中加载 jQuery如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。
可以直接引用
这里是引用
这里是引用
百度
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
新浪
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
示例:
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<p>我错了</p>
</body>
<script>
$("p").hide()
</script>
为了防止页面未加载完就执行代码通常用以下
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简单写法
$(function(){
// 开始写 jQuery 代码...
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。
$就是jquery,两个是一样的
3、注意区分dom和jQuery对象
dom:
获取方式 var mydiv=document.querySelector(‘div’);
query:
$('div)、是一个伪数组
对象使用时不要弄混淆
dom对象与jQuery的转变
dom转jq:
1、直接转换$('div)
2、已经获取dom
var mydiv=document.querySelector('div)
$(mydiv)、注意不加引号
jq转dom:
$ ( ′ d i v ′ ) [ 0 ] . x x x 或 者 ('div')[0].xxx或者 (′div′)[0].xxx或者(‘div’).get(0).xxx
二、简单操作
1、jQuery选择器
类似js选择器
jq也有许多
1-1、元素选择器
- 元素选择器:$(‘div’)
- id选择器:$(’#id’)
- class选择器:$(’.classname’)
-
伪数组内部会进行隐式迭代
eg:
<body>
<div>我是好人</div>
<div>我是好人</div>
<div>我是好人</div>
<div>我是好人</div>
<ul>
<li>1234</li>
<li>1234</li>
<li>1234</li>
<li>1234</li>
</ul>
</body>
<script>
$('div').css('color','pink')
</script>
获取的div内部就类似进行了for循环
1-2、筛选操作
-
parents() 方法: $(“span”).parents();
-
children() 方法:$(“div”).children("p
-
find() 方法"):$(“div”).find(“span”);(find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。)
<body>
<div class="par">
<div class="son">我是儿子</div>
</div>
</body>
<script>
console.log($('.son').parents('div'));
console.log($('.par').children());
</script>
也有其他:
2、jquery样式操作
修改样式属性
$(“p”).css(“background-color”,“yellow”);
1
$(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
用逗号隔开,记得加引号
-
addClass() - 向被选元素添加一个或多个类
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
<body>
<div class="nav">
<div class="son">
我是这么大
</div>
<button>切换大小</button>
<button>变大</button>
<button>变小</button>
</div>
</body>
<script>
$(function(){
$('button:first').click(function(){
$('.nav').children('div').toggleClass('son1')
})
$('button:last').click(function(){
$('.nav').children('div').removeClass('son1')
})
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
.son{
width: 100px;
height: 100px;
background-color: pink;
}
.son1{
width: 200px;
height: 200px;
background-color: rgb(199, 43, 69);
}
</style>
3、jQuery效果
3-1、显示与隐藏hide() 和 show()
$(selector).hide(speed,[easing],function);
speed:可以是(‘slow、normal、fast)
easing:切换的效果,默认swing,可以用liner
$('button').click(function () {
$('.color-pink').hide(1000,function(){
alert(123)
})
})
toggle()是用来切换显示与隐藏的
3-2、滑动上下拉效果
- slideDown() 下拉
- slideUp() 上拉
- slideToggle()切换
$(function () {
$('button').eq(0).click(function () {
$('.jieshao div').slideDown(1000)
})
$('button').eq(1).click(function () {
$('.jieshao div').slideUp(1000)
});
$('button').eq(2).click(function () {
$('.jieshao div').slideToggle(1000)
})
})
参数与上文隐藏一致
.stop()停止出现混乱,写在动画前边,结束上一次动画
3-3、淡入淡出
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
$(selector).fadeTo(speed,opacity,callback);多了一个透明度0-1之间
透明度经常用于鼠标经过时亮度变强。经过时兄弟的透明度降低,自己亮度增加
3-4、自定义动画
- $(selector).animate({params},speed,callback);
$(function () {
$('button').eq(0).hover(function () {
$('.jieshao div').animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
},1000)
})
})
必需的 params 参数定义形成动画的 CSS 属性。以对象形式
4、jQuery属性操作
-
对于 HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法。
-
对于 HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法。
4-1、获取属性 - attr()与prop()
<body>
<a href="www.baidu.com" index='2'>百度</a>
<button>点我获取链接</button>
</body>
<script>
$(function () {
$('button').click(function () {
alert($('a').prop('href'), $('a').attr('index'))
})
})
</script>
attr(‘属性’),类似原生getAttribute
4-2、设置属性 - attr()与prop()
attr('属性‘,’属性值‘)
$("#runoob").attr("href","http://www.runoob.com/jquery");
多个属性
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
prop()相同
5、jQuery文本属性值
5-1、获取属性值
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容(包括 HTML 标记)
- val() - 设置或返回表单字段的值,多用于输入框
<body>
<div>我是HTML</div>
<span>我i是span</span>
<input type="text" value="22">
</body>
<script>
$(function () {
console.log($('div').html());
console.log($('span').text());
console.log($('input').val());
})
</script>
5-2、修改属性值
直接在括号里写就可以
<script>
$(function () {
$('div').html('修改了');
$('span').text('应该把');
$('input').val(00);
console.log($('div').html());
console.log($('span').text());
console.log($('input').val());
})
</script>
6、jQuery元素操作
6-1、创建元素
$('
- 我是创建的li
- ’)
6-2、添加元素
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容 //生成元素是儿子
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容 //生成元素是同级
var a= $('<li>我是后来创建的</li>'); $('div').append(a) $('div').prepend(a) // $('span').after(a) })
6-3、删除元素
- remove() - 删除被选元素(及其子元素)
$("#div1").remove(); - empty() - 从被选元素中删除子元素:
删除了节点里边的内容,但是节点还在
7、jQuery尺寸、位置操作
7-1、尺寸
- width()方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
- height()方法设置或返回元素的高度(不包括内边距、边框或外边距)。
- innerWidth()方法返回元素的宽度(包括内边距)。
- innerHeight()方法返回元素的宽度(包括内边距)。
- outerWidth()方法返回元素的宽度(包括内边距和边框)
- outerHeight()方法返回元素的高度(包括内边距和边框)。
- outerWidth(true)(包括padding margin 边框)
- outeWidth()方法返回元素的高度(包括内边距和边框)。
console.log($('div').width()) console.log($('div').innerWidth()) console.log($('div').outerWidth(true))
7-2、位置操作
- offset()获取设置元素偏移(相对于文档)
- position()获取相对于定位元素
- scrollTop()/scrollLeft()页面卷去的内容大小
修改的话直接括号里填入就行
$('div').offset() console.log($('div').offset()); console.log($('div').offset().top); $('div').offset({ top:40, left:50 })
通常
$ ( d o c u m e n t ) . s c r o l l T o p ( ) > = (document).scrollTop()>= (document).scrollTop()>=(‘div’).offset().top(盒子距离文档顶部的距离)
{
//执行函数
}