jquery选择器
-
js中的元素节点与 jQuery 元素是不是同一种元素? 如果不是为什么? 两者如何进行转换？
例子： <span id="etoak">xxxx</span> js: let nodeSp = document.getElementById('etoak') //获得的为span标签 <span id="etoak">xxxx</span> jquery: let $sp = $('#etoak') [<span id="etoak">xxxx</span>] // jq其实将span标签放入数组中进行存放 //nodeSp 和 $sp不相等 //jquery 元素是对 js 元素节点一个轻度的封装,js 元素节点与 jquery 元素 ，不能通用 方法 函数 属性,只能使用jq自己的 方法 函数 属性 nodeSp.innerHTML = xxxxx $sp.html(xxxxx) //两者如何进行转换? js => jQuery $(nodeSp) $(document) $(location) $(history) $(screen) jQuery => js $sp[0] $sp.get(0) -
jq选择器
//1.通过标签名进行选择 $('tagName') //2.通过类名进行选择 $('.class') //3.通过id名进行选择 $('#id') //4.交集选择器 $('tagName.class') $('tagName#id') //5.并集选择器 $('sel1,sel2,sel3.....') //6.后代选择器 $('sel sel2 sel3 .....') //7.子类选择器 $('sel1 > sel2') //8.紧邻兄弟选择器 $('sel1 + sel2') //9.兄弟选择器 $('sel1 ~ sel2') //10.通过属性名选择 $('[属性名]') //11.通过属性名和属性值选择 $('[属性名=属性值]') //12.属性值开头 $('[属性名 ^= 属性值开头]') //13.属性值结尾 $('[属性名 $= 属性值结尾]') //14.包含属性值 $('[属性名 *= 包含属性值']) //15.全选选择器 $('*') -
js使用css渲染样式
sel.css('样式名','样式值') sel.css({ 样式名：样式值， 样式名：样式值， 样式名：样式值， }) //其中样式名需要小驼峰 $('div.container > span').css({ backgroundColor:'hotpink', color:'whitesmoke', })
jquery激发事件
- 首先书写一个ready函数，ready()函数一般书写在 jquery 其他函数的最外侧，其作用为：
1.保证页面载入无误,类似 js 中的 onload，与 onload 不同,ready 可以执行多次,而 onload 只能一次
2:防止外界脚本污染
$(document).ready(function(){
//其余js或者jq代码
})
-
给jq元素绑定多个事件
<body> <button>点我试试!</button> <input type="button" value="添加一行"> <hr> <table border="1px" class="tb"> <tr> <td>默认的一行</td> </tr> </table> <hr> <ul class="myul"> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> <div style="width:150px;height:150px;">测试域</div> </body>//sel.on('事件1 事件2 事件N',function(){ //只要激发一个事件，就会执行函数 //}) $('button:contains(试试)').on('click mouseout',function(){ $(this).attr('disable',true) //$(this):表示已经通过 jquery 选择器获取的元素列表 //attr(属性名,更改后的属性值) }) -
给jq元素绑定特定事件
$(document).dblclick(function(){ console.log('谁双击我了???')//页面空白处双击触发事件 }) $('input[type=button]').click(function(){ $('.tb').append('<tr><td>添加的一行</td></tr>') }) -
鼠标滑过元素滑出元素
<style> .red{ background-color: crimson; } .blue{ background-color: cornflowerblue; } </style>$('div:contains(测试域)').hover( function(){ $(this).removeClass().addClass('red') }, function(){ $(this).removeClass().addClass('blue') }, ) -
jq中的迭代
//forEach循环 $('myul li').each(function(inedx,value){ if(index === 3){ $(this).addClass('red') } })
什么是 JSON
全称 JavaScript Object Notation
是一种轻量级数据交换格式,本质上就是一种特殊格式字符串,是连接前后端的纽带
JSON 格式
-
Map格式
{"key1":value,"key2":value,"key3":value,"key4":value}- “key”:称之为键,只能是字符串,必须使用双引号
- value:称之为值,可以是任意类型,同时也可以还是 JSON,在后端不能是 java.util.Date
-
数组格式
[value1,value2,valueN]- value:称之为值,可以是任意类型,同时也可以还是 JSON,在后端不能是 java.util.Date
前端接受后端发送过来的 JSON
//假设后端发送过来一个 json 数据,以下为 json 的数据格式
{
"name":"胡桃",
"age":18
}
前端接受后端发送的 JSON 数据,可以通过 console.log() 或者 alert()直接进行打印,但仅仅只是打印,无法非常方便取出内部封装的数据
如果要获取内部的数据,则必须使用 JSON 提供的转换器
解析后端发送过来的数据需要使用 JSON.parse(json数据),转换格式如下
-
对于 Map 格式,全部转换为 js 对象字面量
- 原来的键全部转换为 js 对象字面量的属性名,去掉双引号
- 原来的值全部转换为 js 对象字面量的属性值
-
对于数组格式,全部转换为 js 数组,内部的数据根据类型进行转换
//转换前 json 命名为 text { "name":"胡桃", "age":18 } const obj = JSON.parse(text) console.log(obj) //打印结果如下 { name:'胡桃', age:18, }
前端如何发送 JSON 给后端
const obj = {
name:'甘雨',
age:27,
}
//使用 json 提供的转换器将js 对象或者数组其转换为 json 字符串
let text = JSON.stringify(obj)
console.log(text)
//以下为打印结果
{
"name":"甘雨",
"age":27
}
注意事项
- JSON.parse(JSON.stringify())如果使用在一起,则又被称之为万能转换器,肯定是深拷贝,但是对数据有一定要求,否则会改变原数据
- 很多js 前端框架 例如 jquery mock vue 等 都会在接受后端发送的 json 的同时,自动使用 JSON.parse() 为我们转换,也就是说我们拿到的就是 js 对象或者数组了,不需要进行转换
Ajax
同步与异步
通俗理解：
同步：当数据提交的时候，你什么都不能做，必须一直等待，提交成功会自动刷新整个页面，但是耗费资源比较少
异步：当数据提交的时候，你可以做其余的事情，不需要一直等待，提交成功会部分刷新页面，但是耗费的资源比较多
同步
- 用户发出请求之后,必须等待响应的返回,在响应返回之前,用户不能做出任何操作,只能傻等在那里,当响应返回,整个页面会被完全刷新
- 我们平时见到的 连接提交 表单提交 都是向后端发送同步请求
异步
Node 技术 和 异步(Asynchrouse Javascript And Xml:简称 ajax)技术的诞生正式标志着 web2.0 革命的开始,前端技术终于可以和后端技术分庭抗礼,诞生了今天的主流开发思想,前后端分离
- 用户发出请求,不需要等待响应的返回,可以继续自己其它的操作,当响应返回,页面不会完全刷新,仅仅部分修改
- 异步涉及到的技术
- JavaScript 基本语法
- Xml 用来封装传输数据,作为前后端的纽带 桥梁,已经被 json 取代了
- Json 用来封装传输数据,作为前后端的纽带 桥梁,目前为首选技术方式
- html 渲染结构
- css 渲染样式
- 很多框架都支持异步技术,自带完善的异步模块,例如 jQuery Axios
注意
- 异步如果在某一个场合和同步放在一起,则异步根本不执行,直接执行同步
ajax的属性名与属性值
$.ajax({
//设置发送异步的目的地
url:'http://db.etoak.com:9527/testUser/add',
//设置发送格式的类型
type:'post',
//是否使用异步,注意默认 true， 使用如果设置为 false，更改为同步,则响应返回之前,浏览器锁死，用户不能做出任何操作,如果是异步,则代码永远不会跳出回调函数，如果是同步,则会跳出回调函数
async:true,
//设置要发送的数据的类型，此处书写 MIME 类型 此类型是浏览器对数据类型进行识别的一种写法 存在多种写法
contentType:'json',
//设置要发送的数据
data:JSON.stringify({
username,
password,
realname,
email,
phone,
gender,
role,
})
//设置返回的数据类型
dataType:'json',
//一切正常的回调函数,如果设置 dataType 为json,则 response 这个形参就是服务器端返回的数据，这里就是个对象或者数组,底层已经转换完毕了
success(response){
console.log(response)
if (response.flag) {
/* Js写法：location.href = './5-异步登录.html' */
$(location).attr('href', './5-异步登录.html')
}
},
})
异步与同步之结束同步
$('.reg-form').submit(function () {
if (checkUsername() && checkPassword() && checkRealname()) {
$.ajax({
url: 'http://db.etoak.com:9527/testUser/add',
type: 'post',
async: true,
contentType: 'application/json',
data: JSON.stringify({
username,
password,
realname,
email,
phone,
gender,
role,
}),
dataType: 'json',
success(response) {
console.log(response)
if (response.flag) {
/* location.href = './5-异步登录.html' */
$(location).attr('href', './5-异步登录.html')
}
},
})
}
/* 此处返回 false,则停止表单提交这个动作因为表单提交属于同步请求,我们一会要在内部要发送异步请求,同步和异步如果出现在同一个场合则,异步根本不执行,仅仅执行同步 */
/* 目的就是将同步取消掉，让异步去执行 */
return false
})
RESTFul 开发风格
其实就是根据需求,选择不同的发送请求的提交方式
-
post:用来进行新增操作,没有大小限制,可以使用 json 传递数据,也可以通过浏览器传递
-
get:用来进行查询操作,最大 2000 个字符,不能使用 json 传递数据,只能通过浏览器传递 ?key=value
-
delete:用来进行删除操作,最大 2000 个字符,不能使用 json 传递数据,只能通过浏览器传递 ?key=value
-
put:用来进行修改操作,没有大小限制,可以使用 json 传递数据,也可以通过浏览器传递
6131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
