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(){访问成功后的回调函数})