前端之jQuery - 技术栈

jQuery

jQuery操作HTML元素

增加元素

append（在内部进行尾插）

javascript 复制代码

let newImg = $("<img src='///'>");
$("img").append(newImg);

appendTo

javascript 复制代码

let newImg = $("<img src='///'>");
newImg.appendTo($("img"));
//下列方法使用方式相同

perpend（在内部进行头插）
perpendTo
after（选中元素的平级进行尾插）
insertAfter
befor（选中元素的平级进行头插）
insertBefore

删除元素

remove（将选中的元素及其子元素全部删除）
empty（将选中的元素及其子元素全部清空）

修改元素

修改文本
- text（有参代表修改文本内容，无参代表获取元素文本内容）
- html（有参修改内部内容，包括带有html标签的内容，无参代表获取元素html内容）
- val（有参代表向input输入框添加内容，无参代表获取input输入内容）
  html 复制代码
```
<input name="username" id="username"/>

<script>
$(function(){
    let username = $("#username").val();//只针对value属性，一般来说，只有input标签有value属性
})
</script>
```
修改属性
- attr（一个参数代表取值，两个参数代表修改属性值）
增加属性
- addClass（向选中的元素添加class属性）
删除属性
- removeClass（删除选中元素的calss属性）
  
  在增加calss和删除class之间切换：toggleClass()
修改样式
- css（一个参数代表取值，两个参数代表修改属性值）

查找元素

基本筛选：first(),last(),eq(index)
- 选择第一个$("div:first")/$("div").fisrt()
- 选择最后一个$("div:last")/$("div").last()
- 选择指定下标$("div:eq(1)")/$("div").eq(1)
- 选择大于指定下标$("div:gt(1)")
- 选择小于指定下标$("div:lt(1)")
- 选择下标为奇数$("div:even")
- 选择下标为偶数$("div:odd")
子代选择
- 属于其父元素的第一个子元素的所有元素 $("p:first-child")
- 属于其父元素的第一个元素的所有
  
  元素 $("p:first-of-type")
- 属于其父元素的最后一个子元素的所有元素$("p:last-child")
- 属于其父元素的最后一个元素的所有
  
  元素$("p:last-of-type")
- 属于其父元素的第二个子元素的所有元素$("p:nth-child(2)")
- 属于其父元素的第二个子元素的所有元素，从最后一个子元素开始计数 $("p:nth-last-child(2)")
- 属于其父元素的第二个元素的所有
  
  元素 $("p:nth-of-type(2)")
- 属于其父元素的第二个元素的所有
  
  元素，从最后一个子元素开始计数 $("p:nth-last-of-type(2)")
- 属于其父元素的唯一子元素的所有元素$("p:only-child")
- 属于其父元素的特定类型的唯一子元素的所有元素$("p:only-of-type")
加type和不加type的区别：
- 加上type：指定了父元素中只能是某个类型的标签，比如$("p:first-of-type")，指定了是父元素中的p标签
- 不加type：直接从父元素中的子元素开始，不管什么类型
内容选择：
- 包含指定内容 $("div:contains('John')")
- 不包含指定内容$("div:empty('John')")
- 选择隐藏的元素$("div:hidden")
属性选择
- 选择带有href属性的元素$("[href]")
- 选择带有href属性并且值等于a.html的元素$("[href='a.html']")
- 选择带有href属性并且值不等于a.html的元素$("[href!='a.html']")
- 选择带有href属性并且值以abc结尾的元素$("[href$='abc']")
- 选择带有href属性并且值以abc开头的元素$("[href^='abc']")
- 选择带有href属性并且值等于或包含abc结尾的元素$("[href|='abc']")
- 选择带有href属性并且值包含***++单词++ ***abc的元素$("[href~='abc']")
- 选择带有href属性并且值包含++字符串++ abc的元素$("[href~='abc']")
表单组件选择（都是在form中才能这样写）
- 所有input标签$(":input")
- 所有带有 type="text" 的 input 元素$(":text")
- 所有带有 type="password" 的 input 元素$(":password")
- 所有带有 type="radio" 的 input 元素$(":radio")
- 所有带有 type="checkbox" 的 input 元素$(":checkbox")
- 所有带有 type="submit" 的 input 元素$(":submit")
- 所有带有 type="reset" 的 input 元素$(":reset")
- 所有带有 type="button" 的 input 元素$(":button")
- 所有带有 type="image" 的 input 元素$(":image")
- 所有带有 type="file" 的 input 元素$(":file")
- 获取所有++启用++ 的元素$(":enbale")
- 获取所有++禁用++ 的元素$(":enbale")
- 所有选定的下拉列表元素$(":select")
- 所有选中的单/复选框选项素$(":checked")
遍历：
- 查找父级标签
  - parent() 返回被选元素的直接父元素
  - parents() 返回被选元素的所有父元素，直到根节点<html>
  - parentsUntil(param) 返回被选元素与param元素之间的父元素
- 查找同级标签
  - siblings(param) 如果有参数，查找标签为param的同胞元素；如果没有参数，查找所有的同胞元素
  - next() 返回被选元素的直接下一个同胞元素，prev() 与之相反
  - nextAll() 返回被选元素后的所有同胞元素，prevAll() 与之相反
  - nextUntil(param) 返回被选元素到param元素之间的所有同胞元素，prevUntil（param）与之相反
- 查找子孙标签
  - children(selector) 返回被选标签的所有(满足selector条件的)直接子元素
  - find(param) 返回标签为param的所有子元素

jQuery效果

隐藏与显示

show(speed, callback) 显示
hide(speed, callback) 隐藏
toggle(speed, callback) 在隐藏于显示之间切换

淡入淡出

fadeIn(speed, callback) 淡入效果
fadeOut(speed, callback) 淡出效果
fadeToggle(speed, callback) 在淡入淡出效果之间切换
fadeTo(speed, callback) 将选中的元素设置为介于0~1之间的透明度

滑动

slideDown(speed,callback) 向下滑动
slideUp（speed, callback）向上滑动
slideToggle（speed, callback）向上滑动与向下滑动切换

动画

animate的param参数可以有多个属性，包括width、height、opacity等

animate({params},speed,callback)

回调函数callback

Callback 回调函数在当前动画 100% 完成之后执行

可以是显示的function(params){}，也可以是箭头函数(params)=>{}

jQuery事件

冒泡事件

事件向上传递

阻止冒泡事件：

javascript 复制代码

//假设在一个p标签中嵌套了一个span标签

$(function(){
    $("p").click(()=>{
     alert("p标签被点击了");
  })
    
  $("span").click((event)=>{
    event.stopPropagation();
    alert("span标签被点击了");//p标签的点击事件不会触发
  });
})

鼠标事件

click 点击事件
dblclick 双击事件
mousrenter 鼠标进入
mouseleave 鼠标离开
mousedown 鼠标点击（鼠标上任意键点击）
mouseup 鼠标放开（鼠标上任意键点击后放开）

hover 覆盖（事mouseenter和mouseleave事件的组合）

javascript 复制代码

//hover覆盖
$("#man").hover(
	function(){
        console.log("鼠标移入");
    },
    function(){
        console.log("鼠标移出");
    }
)

toggle切换

javascript 复制代码

//	在版本 1.9 中被移除。 添加 click 事件之间要切换的两个或多个函数

焦点事件

foucs 获取焦点事件（当输入光标闪烁）
blur 失去焦点事件（当输入完成，输入光标消失：可以用作表单提交前的信息验证）

多事件绑定

on 可以将单个事件或者多个事件绑定到元素（bind方法在3.0移除）

javascript 复制代码

//为p标签绑定点击事件（单个事件）
$("p").on("click", function(){
  $(this).hide();
});

//为p标签绑定多个事件
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});

多个事件功能一致

javascript 复制代码

//
$("p").on("click mouseenter mouseleave", function(){
    console.log("不同事件，小相同的功能");
});

触发绑定的事件

trigger 自动触发绑定到被选元素的所有事件

javascript 复制代码

//表单中有账号名、密码和确认密码
//验证账号和密码
$("#username").blur(()=>{
    let username = $(this).val();
    if(username.trim() === null ){
        alert("账号不能为空");
        submit=false;
    }
})

$("#password").blur(()=>{
    let password = $(this).val();
    if(password.trim() === null ){
        alert("密码不能为空");
        submit=false;
    }
})

$("#repassword").blur(()=>{
    let password = $(this).val();
    let repassword = $("#repassword").val();
    if(password.trim() === null ){
        alert("确认密码不能为空");
        submit=false;
    }else if(password.trim()!=repassword.trim()){
        alert("两次密码不一致");
        submit=false;
    }
})

//在表单提交前自动验证表单数据
//全局flag是否可以注册
boolen submit=true;

$("#form").submit(()=>{
    submit = true;
	$("#username").trigger("blur");    
    $("#password").trigger("blur");    
    $("#repassword").trigger("blur");
    return bool;
})

jQuery与AJAX

get与post

请求：

get方法只有两个参数（url, callback）,post方法有三个参数（url, data, callback）

get和post方法接收到服务器的数据都在回调函数callback中，callback有两个参数（data, status）,一个是来自服务器的字符串，另一个是状态

方法：

引入jquery.js
选择get请求或者post请求
编写请求和响应后的逻辑

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="common-js/jquery1.10.js"></script>
</head>
<body>
<p id="name"></p>
<p id="age"></p>
</body>
<script>
    $(function (){
      $.get("AJax?username=周珍珍&age=12&sex=女", (response, state)=>{
          let student = JSON.parse(response);
          $("p#name").text(student.name);
          $("p#age").text(student.age);
      })
    })
</script>
</html>