前端小知识点

最新推荐文章于 2023-02-18 10:58:10 发布

lOADIN!

最新推荐文章于 2023-02-18 10:58:10 发布

阅读量66

点赞数

分类专栏：前端文章标签：前端 javascript jquery

本文链接：https://blog.csdn.net/qq_51114151/article/details/123335709

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

jquery使用，引用jquery底层文件，掌握jquery语法：$(selector).action()//jquery核心语法

文档就绪函数$(document).ready(function()) 简化写法$(function())，等待html渲染完毕之后再执行js代码，保证执行js代码中需要寻找的html元素已经存在

垂直居中的原理及代码实现，原理：（窗口的高度-主体的高度）/2就是主体的上外边距，jquery实现代码，$(window).height()是获取窗口的高度
css中的8种基本类型的选择器（selector），元素选择器、属性选择器、ID选择器、class选择器、包含选择器、子选择器、兄弟选择器、选择器组合
layer弹框组件的使用，引入layer组件包，常用的弹框警告框layer.alert(),提示框layer.msg(),询问框layer.confirm()
json格式//json格式创建js对象var obj = { name:"gs", age:28, sex:"男"}//json格式创建js数组var arr = [4,6,7,8,9]
json对象与json字符串之间的转化//把json字符串转成json对象var jsonstr = "{'name':'gs','age':'28'}"var jsonobj = JSON.parse(jsonstr)//把json对象转成json字符串var jsonobj = { name:"gs", age:28}var jsonstr = JSON.stringify(jsonobj)
ajax+jquery发起请求，用法：$.ajax({ url:"",//请求地址 type:"",//请求地址 data:{},//数据域 success:function(){//请求成功的回调函数 }, error:function(){//请求失败的回调函数 }})
绑定事件的方式//第一种$(selector).click(function(){})//第二种$(selector).on("click",function(){})//第三种，针对未来元素$(selector).on("click","未来元素",function(){})
前端跳转方式
声明式跳转文本 target的值：_self->本窗口打开（默认），_blank->新窗口打开，自定值->指定窗口打开
编程式跳转location.href="地址"

前端框架标签iframe
分页前端实现思路：
分页初始化
分页页码切换数据及切换当前页效果
分页上下页、收尾页切换，考虑极端值
批量删除实现思路：
获取选中的复选框，:checked(UI状态选择器)
全选逻辑 prop(“checked”)可以实时获取和设置复选框、单选框等的选中状态$(selector).prop("checked")//获取选中状态 $(selector).prop("checked",true|false)//设置选中及未选中状态
考虑反选逻辑，思路：只有有一个单个复选框没有选中，全选就不选中
前端页面间数据传递使用cookie
原生js操作cookie需要字符串裁剪，比较玛法，为了方便要引入jquery的cookie插件文件，可以简化cookie的存取操作$.cookie("名称")//取cookie中的值 $.cookie("名称","值")//在cookie中存值
js的||运算符的高级用法var id = 表达式 || 默认值 //如果表达式为假，则赋默认值，否则赋表达式的值
js中函数没有重载，而是顺序执行，产生函数覆盖，原因是js中的函数名是唯一标识，参数列表不是
trim()作用是去除字符串中的开头和结尾的空格
table中单元格列合并使用colspan属性,行合并使用rowspan属性

请求方式的区别
get请求：
只要能编写url的地方，都可以发起get请求
请求参数会显示在浏览器地址栏中
参数传递形如：地址?参数名1=参数值1&参数名2=参数值2...
一般查询数据使用get请求
post请求
只用通过form表单以及ajax来发起请求
请求参数不会显示在浏览器地址栏中
参数传递，需要form表单的控件域或者ajax的data域中
修改数据（添加、修改、删除）使用post请求
获取或设置html元素内容的值
表单控件元素（input、select、textarea）
使用val()来获取值，使用val("值")来设置值
普通元素（div、td、li等）
使用text()来获取纯文本值，使用text(“值”)来设置值
使用html()来获取带着html元素的值，使用html(“
值
>”)来设置值
获取或设置html元素属性的值$(selector).attr("属性名") //获取指定属性的值 $(selector).attr("属性名","属性值") //为指定属性设置值
empty()方法是把元素中的内容清空
append()方法是在元素内部最后的位置追加子元素
回调函数，可以根据业务需求保证执行顺序，举例：//本意是想先让元素消失，再弹框，但是第一行代码只要执行了，第二行就马上执行，只不过第一行代码执行的慢，所以感觉是第二行代码先执行的 $(selector).hide(3000) alert("弹框") //使用回调函数可以保证先让元素消失，再弹框的执行顺序 $(selector).hide(3000,function(){ alert("弹框") })
访问js对象属性的方式
可以把对象当做对象，那么获取属性可以使用对象.属性的方式来获取
可以把对象当做数组，那么获取属性可以使用对象["属性"]的方式来获取var obj = {name:"gs"} //第一种 console.log(obj.name) //第二种 console.log(obj["name"]) 注意：作为数组的方式来获取属性，是可以支持变量的，而用对象的方式来获取属性，只会把属性作为真实的属性，而不会作为变量