本文详细介绍了jQuery的基础知识，包括jQuery的引入、加载模式，原生DOM对象与jQuery对象的转换，以及jQuery的选择器、内容操作、属性处理、CSS样式设置、节点操作和事件处理。通过实例展示了如何利用jQuery简化JavaScript编程，如设置和获取元素内容、添加和删除类、以及实现动画效果。
JavaWEB笔记13 jQuery介绍及常用操作
文章目录
一.jQuery简介：
1.jQuery介绍：
jQuery是JS的一个前端库，是对于原生JS进行封装后调用，jQuery极大地简化了JS编程，使用jQuery首先需要将jQuery添加进入html页面：
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
这种引入jQuery的形式为本地引入，需要事先在网上下载对应的jQuery源码文件：jQuery.js，并放到对应的html文件目录下js目录下，另一种方法为引用网络资源有：
官网jquery压缩版引用地址:
3.1.1版本:<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3.0.0版本:<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
2.1.4版本:<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
2.jQuery书写风格：
案例：实现给按钮绑定点击事件：
$('button').click(function(){alert("Hello world");})
类比JS原生dom的方式进行绑定事件：
document.querySelector('button').onclick=function(){alert("Hello JQuery");}
jQuery代码风格：
- 使用 美元符号$ 作为标签对象，并使用选择器进行选中，或将美元符号换成 jQuery，但是没有美元符号方便，一般都使用美元符号
- $(’ ')单引号中间的语法遵循选择器语法
- jQuery使用连缀风格进行修饰：$(‘div’).css(‘color’,‘red’).css(‘font-size’,‘30px’)，并且在jQuery中每修饰一次就返回一次，所以使用连缀进行修饰
二.jQuery加载模式：
jQuery通常放在html页面中的body中，放在上面用原生写使用监听，而jQuery使用read，简写使用$(function(){对应样式修饰})，且写在上面同原生dom一样同样不会时其变色，完整形式如下：$(document).read(function(){内容})
三.原生dom对象和jQuery对象的相互转换：
JS中的原生dom对象只能通过style来修改样式，而不能调用jQuery方法，同样地jQuery也不能混用原生dom对象的相关方法，如果在编程中需要灵活使用则需要使用二者的相互转换：
- 1）原生dom对象转换成jQuery对象：
用美元符号$包裹对应的原生dom对象就会成功转换，示例：
var myh=document.getElementById("myh");
$(myh).css('color','red');
- 2）jQuery对象转换成原生dom对象：
调用get方法进行转换，get对象中的值是0表示一个对象，示例：
var obj=$('#myh');
var domobj=obj.get(0);
domobj.innerHTML="aaaaaaaaa";
- 3）项目开发时一般不建议乱用
四.jQuery三种常用操作：
1.jQuery对于元素的选择：
1） jQuery对于元素的选择使用标签名，类，标签id选择器直接加在$(’’)括号内引号中就可以，对于标签的选择不用写脚标，即便是复数也不用去写（可以一次获取一组标签中的全部）；若需要获取一组标签元素中对应的第几个则需要改指定的脚标：使用eq(第几个)的方法进行单独选取
2）使用jQuery等价方法可以代替选择器的选择：
.find方法可以针对标签嵌套层层向内去找（子选择器）
.children方法可以针对子选择器对应的选择
.next()方法是针对相邻选择器的选择
.nextAll()方法可以选择所有相邻子类
.first和.last可以选择第一个或最后进行选择
而按序号选择则使用它.eq()方法，.eq(0)效果同.first
jQuery遍历：隔行换色案例
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
<h1>1111111111111</h1>
</body>
<script type="text/javascript">
//$('h1').eq(0).css('color','red');测试是否会改变第一个h1标签中文本的颜色
var obj=$('h1');
//通过Jquery提供的方法来进行遍历
//index 当前元素的索引，ele 当前遍历的原生DOM对象
obj.each(function(index,ele){
//alert(a);
//alert(ele);
if(index%2==0){
$(ele).css('color','red')
}else{
$(ele).css('color','yellow')
}
})
</script>
</html>
效果：
2.jQuery设置或获取标签之间的内容：
- 1）设置标签中的内容：
先转义：$('h1').html()相当于innerHTML html()
再解析：$('h1').text()相当于innerText text()
注意例如：<s>abc</s>在 .html方法中会解析成删除线，而在 .text() 方法中则不会解析 - 2）获取标签中的内容：
var text=$('h1').text()
拼接字符串：获取之后使用 + 拼串修改后再传输 - 3）获取输入框的内容：
使用属性选择器：var text=$('input[type=text]').val();
$('input[type=text]').val(new atribute); //获取并修改输入框中的内容
3.jQuery获取或设置元素属性：
获取属性值：var value = $('h1').attr('align');
设置属性值：$('h1').attr('id','haha');
在设置属性值时可以结合逻辑判断将样式加在对应修改后的对应属性上
4.jQuery获取元素的宽高：
jQuery中有对于单独设计的获取宽高更为快捷：
获取高：var h = $('div').height();
获取宽：var w = $('div').width();
上面拿出来不会有单位，只有数值，而使用 var h = $('div').css('height');这种格式会返回数值+单位（如：30px）
五.jQuery中对于CSS的操作样式(设计style)：
jQuery中对于元素的CSS样式设计常用有以下几种方法：
- 1）使用连缀形式可以设置多种属性（常用）
- 2）使用json对象做键值对：
var styles={"height":"200px","width":"10px"}
并将整个json对象传入标签中：$('div').css(styles)，或者不起名字直接在css({ })的大括号书写对应的json控制样式的字符串，这种方法对于同种样式的多个标签较友好
- 3）使用函数来规定：
$('h1').css('属性',function(index,oldValue)){}
在function中可以是针对h1中的所有进行修改，而使用index可以遍历多个；修改对应属性值使用return+新值，其余不变的部分是return+旧值
- 4）单一添加class属性：
$('div').addClass('a')为div块加上类属性a以便于后续对于一类标签进行修饰，多个类添加要使用空格进行隔开，如：'a b c' - 5）切换样式：
$('div').toggleClass('b')结合点击事件放入function可以在每触发function时切换元素样式
六.jQuery节点操作：
这里介绍jQuery中的常用的节点操作：
- 1）创建节点：
原生dom对象有：document.createElement()创建元素
类比原生dom对象，jQuery中创建节点有：
var div=$('<div></div>')
$('body').append(div)
即在body中创建节点
- 2）插入节点：
插入节点需要先有一个参照节点，且往前面追加使用prepend方法，往后使用append方法 - 3）移动元素：
$('h2').appendTo('h1')；把h2移动到指定元素h1内部后面
$('h2').prependTo('h1')；把h2移动到指定元素h1内部前面 - 4）插入元素：
$('div').after('<span>元素</span>')是在div同级节点的后面插入span
$('div').before('<span>元素</span>')是在div同级节点的前面插入span
同样可以将after或before后面括号中的内容可以抽出来单独起名字 - 5）平移元素：
$('div').insertAfter('h1')将div全部移到h1后面，同级别移动
$('div').insertBefore('h1')将div全部移到h1前面，同级别移动 - 6）包裹节点：
$('span').wrap('<div></div>')把每一个span标签外面都包裹一个div
$('span').wrapAll('<div></div>')把所有的span标签看做一个整体外面包裹div
$('span').unwrap()解除包裹或移除父元素
$('span').wrapInner('<div></div>')将span中子元素进行包裹，在子元素整体包一个div标签 - 7）删除节点：
$('div').remove();直接移除自己
$('div').empty();清除旧的子元素
事件的恢复和保留：使用remove进行移除并使用针对于body进行append进行恢复时不会保留相应的事件，而使用detach进行删除时则是会保留的 - 8）修改元素：
使用replaceWith可以将节点元素的类型进行改变
七.jQuery中的事件：
这里介绍jQuery中的常用的对于事件的操作：
- 1）绑定点击事件以及解绑：
bind和unbind在括号中输入click，jQuery新版本中将bind和unbind消除了，关于事件绑定，在3.0版本之后有所改变（下面7）中介绍）；解绑： mouseover进行解绑或者unbind不传参会解绑元素中所有事件，bind和unbind都是根据事件名进行绑定或解绑的，且事件的绑定方式和解绑方式都可以选用连缀进行编辑，在绑定和解绑事件时：不包裹使用原生dom对象，对于编辑自身需使用this - 2）事件的简写：
点击事件的简写可以直接使用.click进行编辑
.hover()可以编辑移上或者移出，后面跟上两个参数，一个移上一个移出，综合成一个方法 - 3）事件对象：
jQuery对事件对象没有进行任何处理，只能调用原生的事件对象，事件对象没有做任何处理，有需要调用window.event可以调用对应的调用事件对象 - 4）让事件自动触发：
使用.trigger进行触发
.triggerHander也可以进行触发，二者有一定的区别 - 5）新版本中推荐的代替bind：
on off one三个在新版本中绑定事件
on是绑定，off是解绑
解绑事件：绑了两个事件解绑其中一个，可以通过名字进行解绑，只写一个‘click’是解绑全部
多个同类型事件想解绑其中一个需要将事件指明
事件执行一次就是one，在后面加上对应的事件
八.jQuery封装动画：
这里介绍几种jQuery封装动画的常用操作：
- 1）显示隐藏动画：
点击按钮隐藏：
$('button').eq(0).click(function(){
$(div).hide();})
显示就是将其中的hide改为show
toggle可以切换，括号中加入时长，会有渐变
- 2）淡入淡出：
淡入fadeIn
淡出fadeOut
切换fadeToggle - 3）下拉和上卷：
下拉slidedown
上卷slideUp
切换slideToggle - 4）复杂自定义动画：
使用animate进行调整，前端做动画会使用第三方动画库
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
