前后端交互——前端知识点总结

• 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(){})

  前端跳转方式:

• 声明式跳转:
  <a href="地址" target="窗口打开的方式">文本</a> 
    target的值：_self->本窗口打开（默认），_blank->新窗口打开，自定值->指定窗口打开
    
    编程式跳转:
    location.href="地址"

  前端框架标签iframe

•   <iframe src="默认嵌套页面的地址" name="设置窗口的名称"></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"])

  注意：作为数组的方式来获取属性，是可以支持变量的，而用对象的方式来获取属性，只会把属性作为真实的属性，而不会作为变量