一 、 jQuery简介
- jQuery由美国人John Resig于2006年创建
- jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装
- 设计思想 write less,do more
- jQuery的优势
1.体积小,压缩后只有100KB左右
2.强大的选择器出色的DOM封装
3.可靠的事件处理机制
4.出色的浏览器兼容性
5.使用隐式迭代简化编程
5.丰富的插件支持
二、 如何在页面中引入jQuery
引入jQuery在网上外国官网或者中国官网上可以下载 jQuery 库 或者可以直接引入 网络地址
1.jQuery 网络库地址
- jQuery 官网: http://jquery.com
- 中国版jQuery 网址 :https://www.bootcdn.cn/
2.引入效果
- 本地引入:https://www.bootcdn.cn/jquery/3.5.1/ 在网站上找到3.5.1 版本的jQuery版本(已经是现今最新的版本,)
选中 https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js 后右键单击转到 :在新的页面中右键单击后点击另存为,
会在相应位置生成一个 名字为 jQuery.js 的js文件 。 之后再于项目中引入:
<script src="./js/jquery-3.5.1.js"></script>
- 网络引入:
<script src="https://cdn.ccbootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
三 、 Jquery中预加载和选择器
1.jQuery 中的预加载 $(document).ready()
网页中所有DOM文档结构绘制完毕后即刻执行,可能与DOM元素关联的内容(图片、flash、视频等)并没有加载完
写法:
$(document).ready(function(){//执行内容}) $(doc
ument).ready()$(document).$(document).ready()ready()
简化写法:
$(function(){
//执行代码
}) ;
2. jQuery 选择器
jQuery 中的选择器跟 css中的选择器基本相同,效果基本相同,表达方式有所不同:
名称 | 语法构成 | 描述 | 示例 |
标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
并集选择器 | selector1,selector2,..., selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
全局选择器 | * | 匹配所有元素 | $("*" )选取所有元素 |
后代选择器 | ancestor descendant | 选取ancestor元素里的所有descendant(后代)元素 | $("#menu span" )选取#menu下的<span>元素 |
子选择器 | parent>child | 选取parent元素下的child(子)元素 | $(" #menu>span" )选取#menu的子元素<span> |
相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻<h2>元素之后的同辈元素<dl> |
同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取<h2>元素之后所有的同辈元素<dl> |
属性选择器(开头) | [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
属性选择器(结尾) | [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
属性选择器(包含) | [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']" )选取href属性值中含有txt的元素 |
可见性过滤选择器 | :visible | 选取所有可见的元素 | $(":visible" )选取所有可见的元素 |
可见性过滤选择器 | :hidden | 选取所有隐藏的元素 | $(":hidden" ) 选取所有隐藏的元素 |
四 、 追加和移除样式和属性
(1).为元素增加减少类
1.添加样式
$("selecetor").addClass("newClass");
2.移除样式
$("selector").removeClass("oldClass");
3.切换样式
模拟了addClass()与removeClass()实现样式切换的过程
$("selector").toggleClass('newclass') ;
4.判断是否含有样式
$('selector'). hasClass('newclass');
(2).为元素增加减少内容
1.HTML代码操作
html()可以对HTML代码进行操作,类似于JS中的innerHTML
$("div.left").text("<div class='content'>…</div>");
2.标签内容操作
text()可以获取或设置元素的文本内容
$("div.left").text("<div class='content'>…</div>");
html( ) 和text( )方法的区别
html( ) | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
html(content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
text( ) | 无参数 | 用于获取所有匹配元素的文本内容 |
text (content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
3.val() 有参数是改变他的val属性,无值是获取他的val属性
$('#index').val('') //内容设置为空
(3).设置元素插入删除节点
1.元素内部插入节点:
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"); |
2.元素外部插入同辈节点:
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"); |
3.替换节点: 将前者的节点替换为后者的节点
replaceWith()
| $(".gameList li:eq(2)").replaceWith($newNode1); |
replaceAll() | $($newNode1).replaceAll(".gameList li:eq(2)"); |
4.复制节点
$(selector).clone([includeEvents]) ;
includeEvents的参数为 true 或 false , true 复制事件处理,false 时反之t
(3).设置元素属性
1.attr()用来获取与设置元素属性
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;
2.removeAttr()用来删除元素的属性
$(selector).removeAttr(name) ;