JQuery 学习笔记

一、JQuery 介绍
jquery 背景
1、提高开发效率
2、兼容更多的浏览器

包含两个部分库和框架

JQuery 的版本
1.x – 兼容IE678
2.x – 放弃了IE678 兼容IE678
3.x – 使用了更多es6的内容

如果带min ,是放到服务器上使用的（生产环境）。
不带min的，是可以阅读的，是我们平时开发的使用。

二、jQuery 初步使用

1、创建html 文件
2、引入jquery-3.1.0.js 文件
（需要注意引入路径，“./” 代表当前文件夹，“…/” 代表上一个文件夹（父文件夹））
3、编辑jquery 代码

3.1-3.4 使用的函数称为入口函数
3.1 jquery使用方式一
$(function(){
alert(“jq 初步使用！”);
})
3.2 jq 第二种使用方式
jQuery(function() {
console.log(123);
}
3.3 jq 第三种使用方式
$(document).ready(function() {
alert(“jq 第三种使用方式！”)
}
3.4 jq 第四种使用方式
jQuery(document).ready(function() {
console.log(678);
})

三、Jquery 选择器

id 、类选择器、标签 等等
格式： $(“#ID选择器的名称”)
默认返回一个对象。
$(“.类选择器的名称”)
默认返回时一个对象或者是数组
$(“标签选择器的名称”)
默认返回时一个对象或者是数组

css 行内样式操作：
获取选择器：$(选择器对象).css(样式名称)
设置选择器：(选择器对象).css(样式名称, 样式属性值)
 
html 标签文本内容设置
获取： jq对象.text() 或者 $(选择器对象).text()
设置： jq对象.text(“需要输出文本内容”) 或者 
      $(选择器对象).text(“需要输出文本内容”)
 
html 内容设置
获取：$(选择器对象).html()
设置：$(选择器对象).html(设置html文本内容)

四、事件注册

// 事件注册第一种方式
// 格式： jq对象.事件类型(function() {})   
// jq对象：就通过各种选择器进行选择得到对象
$("#btn").click(function () {
    alert("我被点击了！");
}
// 事件注册第二种方式
// 格式： jq对象.on("事件类型", function() {})
// 事件类型除了点击click 、blur 光标事件、 键盘、鼠标等等
$(".btn").on("click", function () {
    alert("我也被点击了！");
})

五、jq对象和dom对象转换

// jq 对象的写法
// $(".dv").eq(0).text("我是添加进来的内容");
 
// dom对象转成jq对象
// 格式： jq对象[下标]  ，这样子写就变成js中dom 对象
$($(".dv")[0]).text("我也是添加进来的内容");
 
// js中 dom对象 的写法
document.getElementsByClassName("dv")[1].innerText = "我是第二个添加进来内容"
 
// jq对象转为dom对象
// 格式：$(dom对象)  
$(document.getElementsByClassName("dv")).eq(1).text("我已经是jq对象了！")

六、jq操作class样式

// 通过addClass() 进行样式添加
$("#dv").addClass("aa");
     
// 通过removeClass() 进行样式删除
$("#dv").removeClass("aa");
     
// 通过toggleClass() 进行样式切换
$("#dv").toggleClass("aa");

七、对象的转换：
//JQ对象转换为dom对象
//格式：JQ对象[下标]
jQuery(“div”)[1].style.color=“red”;

//dom对象转换JQ对象
//格式：JQuery(dom对象)
jQuery(document.getElementsByTagName("div")).eq(2).css("fontSize","30px");

八、jq样式操作
//通过css（）给li添加多个样式
Query(“ul li”).css({
height:55,
border:‘1px solid pink’,
fontWeight:600,
listStyle:‘none’
})

//addClass 添加类名的方法，添加样式
jQuery("ul li").addClass("l1");
 
removeClass 删除类名
jQuery("ul li").removeClass("l1");
 
//toggleClass 切换类名
Query("ul li").toggleClass("l2");

九、jq动画
//JQ对象.animate(css属性:值,…},动画所需的毫秒数，回调函数)
jQuery(this).animate({
width:300,height:300,backgroundColor:‘red’
},2000,function(){
console.log(“执行完毕！！”);
})

//fadeOut()  淡出动画
jQuery(".box").eq(2).fadeOut(1500,function(){
console.log("我是回调函数，执行完毕来到这里！btn");
})
 
// fadeIn() 淡入动画
jQuery(".box").eq(2).fadeIn(1500,function(){
console.log("我是回调函数，执行完毕来到这里！btn2");
})

十、动态生成元素
在后面添加元素
//使用html()方法 添加li标签 会覆盖原所有的旧内容。
jQuery(“ul”).html(“

• 第三个li元素
• ”)
  //定义变量形式 var li 添加li标签，不会覆盖旧内容，在旧内容底部添加新的li。
  var li =jQuery(“
• ”);
  li.text(“第三个li标签”);

• //父元素添加某个子元素
  jQuery("ul").append(li);
   
  //子元素添加到某个父元素里面
  li.appendTo(jQuery("ul"));
   
  //通过兄弟元素添加
  jQuery("ul li").eq(jQuery("ul li").length-1).after(li);
   
  在前面添加元素
  //子元素添加到某个父元素里面
  jQuery("<li>第四个li标签</li>").prependTo(jQuery("ul"));
   
  //通过兄弟元素添加
  jQuery("ul li").eq(0).before("<li>第四个li标签</li>");

  十一、es6的模板字符串
  //普通的字符串
  var str =“aaa”+“bbb”+“ccc”;
  alert(str);

  //模板字符串
  var str2 =`aaa
  bbb
  ccc
  ----
  ${str}s
  `
  alert(str2);

  十二、箭头函数
  //常规函数 函数名（）{}
  function fun1(){
  console.log(“常规函数！！”);
  }

  //箭头函数   
  // （参数）=>{函数体}
  var fun2 =  () =>{
  console.log("箭头函数！！");
  }
   
  //常规函数
  var arr = [2,4,6,7,9];
  arr.forEach(function(item,index){
      console.log(item,index);
  })
   
  //箭头函数
  arr.forEach(e=>console.log(e));

  var code = “8115ab11-2038-4649-92c5-875b03405973”