前端进阶-jQuery详解

RG
425 阅读6分钟

jQuery介绍

  • jQuery由美国人John Resig（约翰·莱西格）于2006年创建
  • jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
  • 它的设计思想是write less,do more

jQuery能做什么?

  • 访问和操作DOM元素
  • 控制页面样式
  • 对页面事件进行处理
  • 扩展新的jQuery插件
  • 与Ajax技术完美结合 jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
    其实，jQuery和JavaScript的之间关系，可以理解为“成语”和“白话文”之间的关系。成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

jQuery的优势

  • 体积小，压缩后只有100KB左右
  • 强大的选择器
  • 出色的DOM封装
  • 可靠的事件处理机制
  • 出色的浏览器兼容性

jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突
在页面中使用传统引入js文件的方式引入即可。

<script src="js/jquery-3.4.1.min.js"></script>

基本的语法介绍

<script> 
    $(selector).action(); 
</script>

说明：

  • 工厂函数 $() ：将DOM对象转化为jQuery对象
  • 选择器 selector：获取需要操作的DOM 元素（没错，用法基本上和css一致 ）
  • 方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”
  • 例如：
<body>
    <p>hello</p> 
</body> 
<script src="js/jquery-3.4.1.min.js"></script> 
<script> 
    alert( $("p").text() ); 
</script>

jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html(); 
// 等同于 
document.getELementById("title").innerHTML;

想混用，要转换

  • DOM对象转jQuery对象
var a = document.getElementById("name"); // a是DOM对象 
var b = $(a); // b是jQuery对象
  • jQuery对象转DOM对象
var a = $("#name"); // a是jQuery对象 
var b = jqObject.get(0); // b是DOM对象

选择器

基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

名称语法构成描述示例
标签选择器element根据给定的标签名匹配元素$("h2" )选取所有h2元素
类选择器.class根据给定的class匹配元素$(" .title")选取所有class为title的元素
ID选择器#id根据给定的id匹配元素$(" #title")选取id为title的元素
并集选择器selector1,selector2,...,selectorN将每一个选择器匹配的元素合并后一起返回$("div,p,.title" )选取所有div、p和拥有class为title的元素
交集选择器element.class或element#id匹配指定class或id的某元素或元素集合$("h2.title")选取所有拥有class为title的h2元素

层次选择器

名称语法构成描述示例
后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$("#menu span" )选取#menu下的元素
子选择器parent>child选取parent元素下的child（子）元素$(" #menu>span" )选取#menu的子元素
相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(" h2+dl " )选取紧邻元素之后的同辈元素
同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(" h2~dl " )选取元素之后所有的同辈元素

属性选择器

名称语法构成描述示例
属性选择器[attribute]选取包含给定属性的元素$(" [href]" )选取含有href属性的元素
[attribute=value]选取等于给定属性是某个特定值的元素$(" [href ='#']" )选取href属性值为“#”的元素
[attribute !=value]选取不等于给定属性是某个特定值的元素$(" [href !='#']" )选取href属性值不为“#”的元素
[attribute^=value]选取给定属性是以某些特定值开始的元素$(" [href^='en']" )选取href属性值以en开头的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素("[href(" [href='.jpg']" )选取href属性值以.jpg结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素$(" [href* ='txt']" )选取href属性值中含有txt的元素
[s1] [s2] [sN]选取满足多个条件的复合属性的元素$("li[id][title=新闻]" )选取含有id和title属性为新闻的<li>元素

过滤选择器

语法构成描述示例
:first选取第一个元素$(" li:first" )选取所有
- 元素中的第一个
- 元素
:last选取最后一个元素$(" li:last" )选取所有
- 元素中的最后一个
- 元素
:even选取索引是偶数的所有元素（index从0开始）$(" li:even" )选取索引是偶数的所有
- 元素
:odd选取索引是奇数的所有元素（index从0开始）$(" li:odd" )选取索引是奇数的所有
- 元素
:eq(index)选取索引等于index的元素（index从0开始）$("li:eq(1)" )选取索引等于1的
- 元素
:gt(index)选取索引大于index的元素（index从0开始）$(" li:gt(1)" )选取索引大于1的
- 元素（注：大于1，不包括1）
:lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)” )选取索引小于1的
- 元素（注：小于1，不包括1）

事件

鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法描述执行时机
click( )触发或将函数绑定到指定元素的click事件单击鼠标时
mouseover( )触发或将函数绑定到指定元素的mouse over事件鼠标移过时
mouseout( )触发或将函数绑定到指定元素的mouse out事件鼠标移出时

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法描述执行时机
keydown( )触发或将函数绑定到指定元素的keydown事件按下键盘时
keyup( )触发或将函数绑定到指定元素的keyup事件释放按键时

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法描述执行时机
focus( )触发或将函数绑定到指定元素的focus事件获得焦点
blur( )触发或将函数绑定到指定元素的blur事件失去焦点

鼠标悬停复合事件

  • hover()方法相当于mouseover与mouseout事件的组合

连续点击复合事件

  • toggle()除了可以模拟鼠标的连续单击事件

事件的动态绑定

对dom元素绑定事件的另一种写法

  • 绑定一个事件
$(".del").on('click', function() { 
    alert('hello'); 
})
  • 绑定多个事件
$(".del").on('click mouseover', function() { 
    alert('hello'); 
})

元素的隐藏和显示

改变元素的宽和高（带动画效果）

  • show( speed )：显示
  • hide( speed )：隐藏
  • toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

改变元素的高（拉伸效果）

  • slideDown( speed ) ：显示
  • slideUp( speed )：隐藏
  • slideToggle( speed )等价于slideDown+slideUp 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

不改变元素的大小（淡入淡出效果）

  • fadeIn( speed ) 显示
  • fadeOut( speed ) 隐藏
  • fadeToggle( speed ) 等价于fadeIn+fadeOut动画
  • fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间） 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒

链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起；
例如：点击一次按钮，让div完成4个指定动作

  1. 背景变粉
  2. 字体变绿
  3. 收缩
  4. 拉伸

DOM和CSS的操作

属性函数

  • attr( "属性" ); 获得元素的属性值
    • attr( "属性" , "新值" ); 修改元素的属性值
    • attr( 样式参数 ) ：样式参数可以写成json格式
  • val() ; 获得表单元素中的value值
    • val("x") 修改表单元素中的value值
  • html(); 获得元素中的内容（标签+文本）
    • html("x") 修改元素中的内容（标签+文本）
  • text(); 获得元素中的文本
    • text("x") 修改元素中的文本

样式函数

  • css( "属性"); 获得该属性值
  • css( "属性","值"); 设置属性的值
  • css( { json} ); 设置多个属性的值
  • width(); 获得元素的宽度
  • width( number ); 修改元素的宽度
  • height(); 获得元素的高度
  • height( number ); 修改元素的高度

类样式函数

  • addClass(); 为元素添加类样式
  • removeClass(); 将元素的类样式移除
  • toggleClass(); 样式的切换（有->无，无->有）

节点操作

  • 创建节点
    • 工厂函数$()用于获取或创建节点
  • 插入节点
    • 插入子节点
语法功能
append(content)$(A).append(B)表示将B追加到A中，如：$("ul").append($newNode1);
appendTo(content)$(A).appendTo(B)表示把A追加到B中，如：$newNode1.appendTo("ul");
prepend(content)$(A). prepend(B)表示将B前置插入到A中，如：$("ul"). prepend($newNode1);
prependTo(content)$(A). prependTo(B)表示将A前置插入到B中，如：$newNode1.prependTo ("ul");

  • 插入同辈节点 | 语法 | 功能 | | --- | --- | | after(content) | $(A).after (B)表示将B插入到A之后，如：$("ul").after(newNode1); | | insertAfter(content) | \(A). insertAfter(B)表示将A插入到B之后，如：$newNode1.insertAfter("ul"); | | before(content) | $(A). before (B)表示将B插入至A之前，如：$("ul").before($newNode1); | | insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前，如：$newNode1.insertBefore("ul"); |

  • 替换节点

    • replaceWith()
    • replaceAll()

  • 复制节点

    • clone()

  • 删除节点

    • remove()删除整个节点
    • empty()清空节点内容

遍历节点

祖先元素

用于向上遍历 DOM 树的方法

  • parent()返回被选元素的直接父元素，仅仅是上一级（找爸爸）
  • parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

同辈元素

  • next() 获取紧邻匹配元素之后的元素
  • prev() 获取紧邻匹配元素之前的元素
  • siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

后代元素

后代是子、孙、曾孙等等

  • children( [selector] ) 方法返回被选元素的所有直接子元素，“孩子”
  • find( 选择器 ) 方法返回被选元素的后代元素，一路向下直到最后一个后代。

元素的过滤

  • first()：过滤第一个元素
  • last()：过滤最后一个元素
  • eq(index)：过滤到下标为index的元素
  • not()：除了什么之外的元素
  • is()：返回布尔，判断是不是这种元素
avatar
文章
阅读
粉丝

友情链接：