本文介绍了JQuery的基本概念、作用及如何使用。它简化了JavaScript中的DOM操作，提供了丰富的选择器和链式写法，并封装了Ajax。内容包括获取与设置元素内容、样式、属性，创建与操作节点，以及各种动画效果。此外，还提到了前端框架Bootstrap和JSON数据格式。
JQuery
JQuery是一个轻量级的javascript函数库，封装了很多javascript中的内容。JQuery的本质依然是javascript。
作用
JQuery的宗旨：“write less,do more”，意味写更少的代码，做更多的事情。
-
用于获取文档中的元素，对元素进行操作
-
更强大的选择器
-
支持链式写法
-
封装了ajax，更方便使用
…
使用
1、下载jquery.js文件
- 官网下载：
- 通过右键另存为下载
- 使用Hbuilder自带的创建
- 新建项目，在js文件下右键新建.js文件，选择jquery，修改名称
jquery对象和js对象(dom对象)
在js中，使用document.getElementXXX获取到的是dom对象。
dom对象只能使用.style、.innerText等属性修改样式或内容，不能使用jquery对象中的属性或函数。
在jquery中，使用jquery选择器获取到的是jquery对象。
jquery对象只能使用jquery中的属性或函数，不能使用dom对象中的属性或函数。
通常在jquery对象命名时，使用$符号作为前缀，方便区分jquery对象和dom对象。
两者之间的转换
jquery对象转换为dom对象
- jquery对象[0]
- jquery对象.get(0)
dom对象装换为jquery
$(dom对象)
<html>
<body>
<h1 id="test">
</h1>
</body>
<script>
$(function){
//通过js方式获取的对象称为dom对象
var test = document.getElementById("test");
test.innerText = "修改文本";
//通过jquery选择器获取的对象称为jquery对象，只能使用jquery对象操作节点的属性和方法
$("test").text("修改文本");
//将jquery转换为dom
$("test")[0].innerText("修改文本");
//将dom对象转换为jquery
$(test).text("修改文本");
}
</script>
</html>
$符号冲突问题
在页面中引入jquery.js后，$符号相当于"jquery"这个单词，有特殊的含义。
如果一个页面中会引入多个js函数库，并且这些函数都会用到 符号时，就会造成 符号时，就会造成 符号时，就会造成符号冲突。
jquery提供了一个**noConflict()**函数用于释放对$的使用权
//直接调用该方法，释放对$的使用权，之后只能使用默认的"jQuery"
$.noConflict();
//$("#md");这时会无效
jQuery("#md")//只能这样使用
//调用该方法，是用变量接收，释放对$的使用权，用指定的变量名代替$
var jq = $.noConflict();
jq("#md");
jQuery中的选择器
基本选择器
| 基本选择器 | |
|---|---|
| $(“#id名”) | id选择器，根据id名获取某个节点 |
| $(“.class名”) | class选择器，根据class名获取某些节点 |
| $(“标签名”) | 元素选择器，根据标签名获取某些节点 |
| $(“#id名,.class名,标签名”) | 群组选择器，根据指定的选择器获取所有满足的节点 |
| $(“a.test”) | 获取class名为test的a标签 |
| $(“a#test”) | 获取id名为test的a标签 |
| $(“*”) | 获取所有节点 |
层次选择器
| 层次选择器 | |
|---|---|
| $(“#test *”) | 得到id为test节点中的所有子节点 |
| $(“#test div”) | 得到id为test节点中的所有div子节点 |
| $(“#test>*”) | 得到id为test节点中的第一层所有子节点 |
| $(“#test>.test”) | 得到id为test节点中的第一层class为test的子节点 |
| $(“#test+p”) | 得到id为test节点后紧邻的第一个p节点 |
| $(“#test~p”) | 得到id为test节点后同级的p节点 |
注意
-
$(“p .test”)表示得到p标签下的class为test的标签。有空格
<p> <div class="test"> </div> <p class="test"> </p> </p> -
$(“p.test”)表示得到class为test的p标签。无空格
<p> <div class="test"></div> <p class="test"></p>//只能得到这一个 </p>
过滤选择器
普通过滤
$(“选择器:特定单词”)
| 普通过滤 | |
|---|---|
| $(“tr:odd”) | 奇数索引。得到索引为1,3,5…的tr标签，按自然顺序为偶数 |
| $(“tr:even”) | 偶数索引。得到索引为0,2,4…的tr标签，按自然顺序为奇数 |
| $(“tr:first”) | 得到所有tr标签中的第一个 |
| $(“tr:last”) | 得到所有tr标签中的最后一个 |
| $(“tr:eq(索引)”) | 得到指定索引的tr节点 |
| $(“tr:gt(索引)”) | 得到大于指定索引的tr节点 |
| $(“tr:lt(索引)”) | 得到小于指定索引的tr节点 |
| $(“li:nth-child(3n+1)”) | 得到指定的函数的子节点 |
| $(“#test p:first-child”) | 得到id为test下的p子节点中第一个 |
| $(“#test p:last-child”) | 得到id为test下的p子节点中最后一个 |
| $(“div:not(.test)”) | 得到class不为test的div |
| $(“div:not(:eq(3))”) | 得到索引不为3的div |
表单元素过滤
| 表单元素过滤 | |
|---|---|
| $(“:input”) | 得到所有表单元素，包含input、select、textarea |
| $(“:text”) | 得到文本框 |
| $(“:password”) | 得到密码框 |
| $(“:radio”) | 得到单选按钮 |
| $(“:checkbox”) | 得到复选框 |
| $(“:checked”) | 得到被选中的表单元素，包含radio、checkbox、select |
| $(“:checkbox:checked”) | 得到被选中的复选框 |
| $(“:selected”) | 得到被选中的下拉菜单选项 |
| $(“:submit”) | 得到重置/提交按钮 |
属性过滤选择器
| 属性过滤 | |
|---|---|
| $(“a[href]”) | 得到所有包含href属性的a标签 |
| $(“a:not([href])”) | 得到所有不包含href属性的a标签 |
| $(“div[属性=值]”) | 得到指定属性和值的div |
| $(“div[属性!=值]”) | 得到指定属性不等于指定值的div |
| $(“div[属性^=值]”) | 得到指定开头的指定属性的div |
| ( " d i v [ 属性 ("div[属性 ("div[属性=值]") | 得到指定值结尾的指定属性的div |
| $(“div[属性*=值]”) | 得到包含指定值的指定属性的div |
| $(“div[属性1 =值][属性2=值]”) | 得到包含指定值的属性1且包含指定值的属性2的div |
内容(文本)过滤选择器
| 内容(文本)过滤选择器 | |
|---|---|
| $(“p:contains(文字)”) | 得到带有指定文字的p标签 |
| $(“p:not(:contains(文字))”) | 得到不带有指定文字的p标签 |
| $(“p:empty”) | 得到没有文字的p标签 |
操作节点
获取、设置节点内容
| 函数 | |
|---|---|
| 节点.text() | 获取节点中的文本，相当于js中的var text = x.innerText |
| 节点.text(“内容”) | 设置节点中的文本，相当于js中的x.innerText=“内容” |
| 节点html() | 获取节点中的内容。相当于js中的var text = x.innerHTML |
| 节点.html(“内容”) | 设置节点中的内容。相当于js中的x.innerHTML=“内容” |
| 节点.val() | 获取节点中的value属性值。相当于js中var val = x.value() |
| 节点.val(“内容”) | 获取节点中的value属性值。相当于js中x.value()=“内容” |
获取、设置节点样式
| 函数名 | |
|---|---|
| 节点.css(“样式名”) | 获取某个节点的某个样式值 |
| 节点.css(“样式名”,“值”) | 设置某个节点的某个样式 |
| 节点.css({样式名:“值”,样式名:“值”…}) | 同时设置节点的多个样式 |
| 节点.css(“样式名”,“值”).css(“样式名”,“值”) | 同时设置节点的多个样式 |
获取、设置节点属性
| 函数名 | |
|---|---|
| 节点.attr(“属性名”) | 获取某个属性的值 |
| 节点.attr(“属性名”,“值”) | 设置某个属性的值 |
| 节点.removeAttr(“属性名”) | 移除指定属性 |
| 节点.addClass(“class名”) | 给某个节点追加class值 |
| 节点.removeClass(“class名”) | 移除某个节点的class值 |
| 节点.toggleClass(“class名”) | 添加或移除class值。如果没有则添加，有则删除。 |
| 节点.hasClass(“class名”) | 判断是否存在某个class值 |
创建节点
$(“完整节点”)
//js写法
var h1 = document.createElement("h1");
h1.innerText("创建出的h1");
//jquery写法
var $h1 = $("<h1>创建出的h1</h1>")
//以上两种方式创建出的节点都是处于游离态，需要添加到已有的某个节点上
添加节点
| 添加子节点 | |
|---|---|
| 父节点.append(子节点) | 将子节点添加到父节点中的最后 |
| 子节点.appendTo(父节点) | 将子节点添加到父节点中的最后 |
| 父节点.prepend(子节点) | 将子节点添加到父节点中的最前 |
| 子节点.prependTo(父节点) | 将子节点添加到父节点中的最前 |
| 添加兄弟节点 | |
|---|---|
| 原始节点.before(新节点) | 将新节点添加到原始节点之前 |
| 新节点.insertBefore(原始节点) | 将新节点添加到原始节点之前 |
| 原始节点.after(新节点) | 将新节点添加到原始节点之后 |
| 新节点.insertAfter(原始节点) | 将新节点添加到原始节点之后 |
移除节点
| 移除节点 | |
|---|---|
| 某节点.remove() | 移除某节点 |
| 某节点.empty() | 移除某节点中的子节点 |
复制节点
| 复制节点 | |
|---|---|
| 某节点.clone() | 复制某节点，复制节点不复制节点的事件 |
| 某节点.clone(true) | 复制某节点，复制节点复制节点的事件 |
修饰节点
| 替换节点 | |
|---|---|
| 旧节点.replaceWith(新节点) | 用新节点替换旧节点 |
| 新节点.replaceAll(旧节点) | 用新节点替换旧节点 |
| 包裹节点 | |
|---|---|
| 原节点.wrap(指定节点) | 使用指定节点包裹原节点,如果原节点是集合会逐一包裹 |
| .wrapAll(指定节点) | 使用指定节点包裹原节点,如果原节点是集合会整个包裹 |
| 父节点.wrapInner(指定节点) | 使用指定节点对父节点中的所有子节点进行整个包裹 |
通过节点获取节点
| 函数名 | |
|---|---|
| 某节点.next() | 得到某节点的下一个节点 |
| 某节点.prev() | 得到某节点的上一个节点 |
| 某节点.nextAll(参数) | 得到某节点之后的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到后续同级所有a标签 |
| 某节点.prevAll(参数) | 得到某节点之前的所有或指定节点。参数为标签名的字符串，如nextAll(“a”)表示得到之前同级所有a标签 |
| 某节点.siblings(参数) | 得到某节点同级或所有指定节点 |
| 父节点.children(参数) | 得到某父节点的所有或指定子节点 |
| 节点集合.first(参数) | 得到节点集合中的第一个子节点 |
| 节点集合.last(参数) | 得到节点集合中的最后一个子节点 |
| 子节点.parent() | 得到某节点的父节点 |
| 某节点.index() | 得到节点所在集合的索引 |
预设动画
| 函数名 | |
|---|---|
| show() | 同时将宽度和高度从0变为原始值，最终display为block |
| hide() | 同时将宽度和高度从原始值变为0，最终display为none |
| toggle() | 切换show/hide |
| fadeIn() | 将不透明度改为从0变为1，淡入效果，最终display为block |
| fadeOut() | 将不透明度改为从1变为0，淡出效果，最终display为none |
| fadeToggle() | 切换fadeIn/fadeOut |
| slideUp() | 将高度从原始值变为0，最终display为none |
| slideDown() | 将高度从0变为原始值，最终display为block |
| slideToggle() | 切换slideUp/slideDown |
| 以上所有函数都可以给两个参数，参数一为动画执行所需毫秒，参数二为动画执行后的回调函数，在动画执行后执行 |
$("#md").click(function(){
//希望在动画执行后执行，不能这样写
// $("#md").hide(2000);
// alert("消失了")
//可以这么写
$(this).fadeOut(2000,function(){
alert("消失了");
})
})
自定义动画
启用自定义动画
- 使用animate()函数，该函数有四个参数分别为：样式组、所花费时间、动画函数、回调函数。
- animate()函数支持链式写法
- 样式只支持数值型样式。如：尺寸、位置等，字符串类型样式不支持，如颜色等。
节点.animate({
样式:"值";
样式:"值";
},2000,linear,function(){
//动画执行结束后执行
}).animate(...)
停止动画
停止当前动画
节点.stop()
停止所有动画
节点.stop(true)
事件
-
js中的事件绑定方式为：
//dom节点.on事件 = function(){} document.getElementById("md").onclick=function(){ } -
jquery中的事件绑定方式为：
//jquery节点.事件(function(){}); $("#md").click(function(){ }) 或 //jquery节点.bind("事件名".function(){}) $("#md").bind("click",function(){ })
| 事件函数 | |
|---|---|
| click() | 单机 |
| hover() | 鼠标悬停/离开。该事件可以传入两个函数，分别表示悬停时触发第一个函数，离开时触发第二个函数。如果只有一个函数，悬停离开均触发这一个函数。 |
| focus() | 获得焦点 |
| blur() | 失去焦点 |
| change() | 改变。适用于各种能发生变化的节点。如文本框、单选、复选、下拉等。 |
| mouseup/down/over/move/enter/leave/out() | 鼠标相关 |
| submit() | 表单提交 |
| … | 将js中的事件名去掉on变为函数 |
前端框架
设计者提供给用户该框架的css文件和js文件。
用户只需导入css文件和js文件后，通过对应的class呈现相应的样式和效果。
任何前端框架都有对应的开发文档API，只需参考其使用说明即可。
BootStrap
有Twiiter推出的一套前端框架。其最大的特点是"栅格化系统"。
使用
1、下载核心文件
官网https://v3.bootcss.com/
2、解压后导入项目
3、新建页面引入3个文件
- bootstrap.min.css文件
- jquery.js文件
- bootatrap.min.js文件
引入js时，一定要先引入jquery，再引入bootstrap.min.js。因为bootstrap依赖于jquery
Layui
由国内开发者设计的一款基于jquery的前端框架
官网现已下架，但layui依然可以使用。
镜像网站
使用
1、下载layui核心文件
2、解压后导入项目
3、在界面中加入两个文件
- layui.css
- layui.js
JSON
JavaScript Object Notation JS对象简谱
是一种数据交换格式，可以理解为保存数据、交换数据的一种格式。
JSON数据通常以键值对的形式保存。
键：值
键的类型为字符串，值的类型可以是普通类型、对象或数组。
值的数据类型
| 值的数据类型 | 符号 | 示例 |
|---|---|---|
| 字符串 | “” | “name”:“王海”; |
| 数值 | 直接写数字 | “age”:20 |
| 逻辑值 | true/false | “married”:“false” |
| 空 | null | “car”:null |
| 对象 | {} | “pet”:{“petName”:“小花”,“petAge”:2,} |
| 数组 | [] | “family”:[{“relation”:“父亲”,“name”:“xxx”},{“relation”:“母亲”,“name”:“xxx”}] |
举例
使用json格式保存一个人的信息
属性：姓名、年龄、性别、宠物、婚姻状况、房产、家庭成员
{
"name":"张琪",
"age":20,
"sex":"男",
"pet":{
"petName":"$",
"petType":"猫"
},
"married":false,
"house":null,
"family":[
{
"name":"张老大",
"relation":"大哥"
},
{
"name":"张小迪",
"relation":"小弟"
}
]
}
在HTML中读取文件
- $.getJSON(“json文件路径”,回调函数)
- $.ajax(url:“访问的资源路径”,success:function(){访问成功后的回调函数})
169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
