jquery的使用，前端基础学习会用到的知识点

87 阅读 0 评论 58 点赞

我是靠谱客的博主感性飞鸟，最近开发中收集的这篇文章主要介绍jquery的使用，前端基础学习会用到的知识点，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前端知识点

jquery使用，引用jquery底层文件，掌握jquery语法：

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

$(selector).action()//jquery核心语法

文档就绪函数$(document).ready(function()) 简化写法$(function())，等待html渲染完毕之后再执行js代码，保证执行js代码中需要寻找的html元素已经存在
垂直居中的原理及代码实现，原理：（窗口的高度-主体的高度）/2就是主体的上外边距，jquery实现代码，$(window).height()是获取窗口的高度

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(“<div>值</div>>”)来设置值

获取或设置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"])
```
注意：作为数组的方式来获取属性，是可以支持变量的，而用对象的方式来获取属性，只会把属性作为真实的属性，而不会作为变量