HTML
CSS
JS
JS-下
jQuery
Node.js + Gulp
jQuery的官网 http://jquery.com/
jQuery就是一个js库，它把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了. 使用jQuery的话，会比使用JavaScript更简单。
jquery的版本:
1.x版本：能够兼容IE678浏览器
2.x版本：不能兼容IE678浏览器
3.x版本：不能兼容IE678浏览器，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
引入jQuery
在html头部中引入jQuery库
1
2
| <script src="js/jquery-3.5.1.min.js"></script>
<script src="js/app.js"></script>
|
之后在自己的app.js中使用jQuery:
1
2
3
| $(document).ready(function(){
// your code
});
|
选择器
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
| ID选择器 |
$(“#id”); |
获取指定ID的元素 |
| 类选择器 |
$(“.class”); |
获取同一类class的元素 |
| 标签选择器 |
$(“div”); |
获取同一类标签的所有元素 |
| 并集选择器 |
$(“div,p,li”); |
使用逗号分隔，只要符合条件之一就可。 |
| 交集选择器 |
$(“div.redClass”); |
获取class为redClass的div元素 |
过滤选择器
| 子代选择器 |
$(“ul>li”); |
使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
| 后代选择器 |
$(“ul li”); |
使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
筛选选择器(方法)
| children(selector) |
$(“ul”).children(“li”) |
相当于$(“ul>li”)，子类选择器 |
| find(selector) |
$(“ul”).find(“li”); |
相当于$(“ul li”),后代选择器 |
| siblings(selector) |
$(“#first”).siblings(“li”); |
查找兄弟节点，不包括自己本身。 |
| parent() |
$(“#first”).parent(); |
查找父亲 |
| eq(index) |
$(“li”).eq(2); |
相当于$(“li:eq(2)”),index从0开始 |
| next() |
$(“li”).next() |
找下一个兄弟 |
| prev() |
$(“li”).prev() |
找上一次兄弟 |
元素设置
样式设置
1
2
3
4
5
| $('li').css('color','red');
$('li').css({
'color':'green',
'font-size':'20px'
});
|
类名设置
1
2
3
4
5
6
7
8
| /*1.添加一个类*/
$('li').addClass('now');
/*2.删除一个类*/
$('li').removeClass('now');
/*3.切换一个类 有就删除没有就添加*/
$('li').toggleClass('now');
/*4.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false*/
$('li').hasClass('now');
|
属性设置
1
2
3
4
5
6
7
8
9
| /*1.获取属性*/
$('li').attr('name');
/*2.设置属性*/
$('li').attr('name','tom');
/*3.设置多个属性*/
$('li').attr({
'name':'tom',
'age':'18'
});
|
动画
基本动画
1
2
3
4
5
6
| /*1.展示动画*/
$('li').show();
/*2.隐藏动画*/
$('li').hide();
/*3.切换展示和隐藏*/
$('li').toggle();
|
滑入滑出
1
2
3
4
5
6
| /*1.滑入动画*/
$('li').slideDown();
/*2.滑出动画*/
$('li').slideUp();
/*3.切换滑入滑出*/
$('li').slideToggle();
|
淡入淡出
1
2
3
4
5
6
7
| /*1.淡入动画*/
$('li').fadeIn();
/*2.淡出动画*/
$('li').fadeOut();
/*3.切换淡入淡出*/
$('li').fadeToggle();
$('li').fadeTo('speed','opacity');
|
节点操作
1
2
3
4
5
6
7
8
9
10
11
12
| $('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>');
$('#box').append($('a'));
prepend();
prependTo();
after();
before();
/*1.清空box里面的元素*/
$('#box').empty();
/*2.删除某个元素*/
$('#box').remove();
|
特殊属性操作
val方法
1
2
3
4
| //设置值
$("#name").val('张三');
//获取值
$("#name").val();
|
html方法与text方法
1
2
3
4
5
6
7
8
9
| //设置内容
$('div').html('<span>这是一段内容</span>');
//获取内容
$('div').html()
//设置内容
$('div').text('<span>这是一段内容</span>');
//获取内容
$('div').text()
|
区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
width方法与height方法
1
2
3
4
5
6
7
8
| //带参数表示设置高度
$('img').height(200);
//不带参数获取高度
$('img').height();
//获取可视区宽度
$(window).width();
//获取可视区高度
$(window).height();
|
事件
1
2
3
4
5
| click(handler) //单击事件
$("p").bind("click", function(){
//事件响应方法
});
$(selector).on( "click", function() {});
|
事件对象
1
2
3
4
| event.keyCode //按下的键盘代码
event.data //存储绑定事件时传递的附加数据
event.stopPropagation() //阻止事件冒泡行为
event.preventDefault() //阻止浏览器默认行为
|
