JQuery 学习笔记

羊柳树

已于 2023-05-18 09:40:44 修改

阅读量153

点赞数

文章标签：前端

于 2023-03-09 18:45:02 首次发布

本文链接：https://blog.csdn.net/Aydn115/article/details/129428690

版权

一、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”