JQuery
一 初识JQuery
-
入口函数
$(function(){ }) $(document).ready(function(){ })
JQuery 是一个过时的库，大量的应用场景已经被取代，
1 解决兼容性问题：随着各大浏览器趋于标准化，浏览器兼容问题已经越来越不明显
2 简化DOM操作:随着MVVM(Vue,React)框架普及，项目不会再大量直接操作DOM
3 动画方法：被css3取代；
二 $的作用
- $其实就是一个函数名，是JQuery的缩写
- $ === JQuery $是JQuery的顶级对象
- $可以作为选择器，获取DOM对象对应的JQuery对象
- $可以将一个dom对象，转换成一个JQuery对象
- 事件中的this 指向DOM 对象，所以需要使用$(this)做转换
- 什么时候用JQuery，什么时候使用js？ 其实本质上JQuery就是js ，只是我们可以使用
let div = document.querySelector("div");
$(div)//转换为JQuery 对象
$("span")[0] //转换为 DOM 对象[index ]是索引
$('button').click(function(){
console.log(this.value);//jquery 对象this指向的是dom
//通过$ 可以将DOM转换成jquery 不过他们指向的都是 一样的结果 // 尽量使用jq的时候就使用jq对象
console.log($(this).val());
})
三 选择器
选择器
$(".类")
$("#id")
$("标签")
$("div>a")
$("ul li")
$("div ,p,span")
筛选选择器
$("li:first") //第一个li元素
$("li:last") //最后一个li元素
$("li:eq(2)") //获取索引为2 的li元素
$("li:odd") //获取索引为奇数的 元素
$("li:event") //获取索引为偶数的 元素
筛选方法
parent()//返回直接父级元素
parents()//返回所有的父级(括号内可以指定哪个父级元素)
children()//返回子级(括号内可以指定哪个元素)
find()//返回所有子级 包含子级子级(括号内可以指定哪个元素)
siblings()//除了本身，所有的兄弟元素
eq(index)//第0个开始， 选择第 index 个元素
四 css 样式
css("属性名")//查询属性
css("属性名","属性值")//修改属性
css({
属性名:"属性值",
属性名:"属性值",
属性名:"属性值",
})//修改多个css 属性
addClass('类')//添加类名
removeClass('类')//删除类名
toggleClass('类')//切换类名
hasClass("类")//是否有这个类名，返回布尔值
五 JQuery 常用的方法
-
index();获取元素索引
-
text();获取和设置文本节点
-
css();获取和设置css 样式
-
val();获取和设置 value 属性
-
attr();获取和设置属性值
-
addClass();添加 css
-
removeClass();删除css
-
toggleClass();切换css
-
siblings();获取同级其他元素
-
find(‘选择器’);获取子级
-
parent();获取父级
<style>
.cor{
background-color: rgba(97, 214, 216, 0.884);
}
img{
width: 200px;
height: 200px;
}
div{
width: 200px;
height: 200px;
border: 1px solid rgb(101, 216, 176);
}
</style>
</head>
<body>
<button>我是1</button>
<button>我是12</button>
<button>我是13</button>
<img src="/images/1.png" alt="">
<ul>
<li>第1张</li>
<li>第2张</li>
<li>第3张</li>
<li>第4张</li>
</ul>
<div class="box_b">
<button>点击修改but修改父级</button>
</div>
<div class="box_c">
<button>点击div修改子级</button>
</div>
<input type="text" name="" id="" value="我是旧的内容">
<script src="/jq/jquery.min.js"></script>
<script>
$('button').click(function(){
//1. index();获取元素索引
//console.log($(this).index());
// 2. text();获取文本节点
//console.log($(this).text());
//设置文本节点
//$(this).text('新文本内容');
// 3. css();获取和设置css 样式
//console.log($(this).css('height'));
// $(this).css('height',"200px");
})
$('input').click(function(){
//4. val();获取和设置 value 属性
//console.log($(this).val());
//$(this).val("我是新内容")
// 5. attr();获取和设置属性值
//console.log($(this).attr('value'));
})
let arr = ["/images/1.png","/images/2.png","/images/3.png","/images/4.png"];
$('li').click(function(){
// 5. attr();获取和设置属性值
// let index = $(this).index();
$("img").attr('src',arr[$(this).index()])
// 7. removeClass();删除css
// $('li').removeClass('cor')
// $(this).toggleClass('cor');
// 6. addClass();添加 css
$(this).addClass('cor');
// 9. siblings();获取同级其他元素
$(this).siblings().removeClass('cor')
})
$('.box_c').click(function(){
// 10. find('选择器');获取子级
$(this).find('button').css('background-color','blue')
})
$('.box_b button').click(function(){
// 11. parent();获取父级
$(this).parent().css('background-color','red')
})
</script>
六 JQuery DOM
- append();添加节点
- remove();删除节点
<input type="text" name="" id="">
<button>提交 </button>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
</ul>
<script src="/jq/jquery.min.js"></script>
<script>
$('button').click(function(){
let value = $('input').val();
let li = ` <li>${value}</li>`;
$('ul').append(li);
})
$('ul').on('click','li',function(){
$(this).remove();
})
</script>
JQuery 事件
- click();点击
- mouseenter();鼠标移入
- mouseleave();鼠标移出
- mousemove();鼠标移动
- on();事件委托
- $(window).scroll(function(){}) 页面滚事件
//同个对象绑定事件可以 用链式
$('div').mouseleave(function(){
console.log('移出');
}).mouseenter(function(){
console.log('移入');
}).mousemove(function(e){
let x = e.pageX;
let y = e.pageY;
console.log(`x${x}，y${y}`);
})
//同一个事件对象 可以以对象形式书写
$(".box").on({
click:function(){},
mouseleave:function(){},
mouseenter:function(){},
mousemove:function(){}
})
//事件委托
$("ul").on("click","li",function(){})
触发一次事件 one
$("div").one("click",function(){})
事件自动触发
$("div").trigger("click")//自动触发事件
$("div").triggerHandler("click")//自动触发事件 并阻止默认行为
$("div").click()//自动触发事件
解除事件
$("div").off()//解除元素所有事件
$("div").off("click")//解除元素点击事件
$("ul").off("click","li")//解除事件委托事件
hover
事件切换，hover//就是鼠标经过和离开的符合写法
$(".box").hover(function(){},function(){})
$(".box").hover(function(){
console.log("进来");
},function(){
console.log("离开");
})
如果只写一个事件切换hover 就是鼠标经过离开都会触发事件 配合切换类的方法使用效果比较好
$(".box").hover(function(){
$(this).fadeToggle()
})
属性操作
prop("属性名","属性值") //获取原有属性 // 一个值是访问属性，两个值修改属性
attr("属性名","属性值") //获取自定义属性 // 一个值是访问属性，两个值修改属性
data("属性名","属性值") //获取data属性 //临时储存
内容本操作
html();//不写是获取
text();
val();
html("新值"); //写了是新文本值
text("新值");
val("新值");
toFixed(n)//保留 n位小数
元素操作
遍历元素
$(".box").each(function(index,documentElement){
//index 索引
// documentElement DOM 对象 注意转换为 jquery对象 $(documentElement)
})
遍历数组 对象
$.each("obj",function(i,de){
})
//i属性 de属性值
var obj = {
name:"张三",
age:28,
sex:"男"
}
//i index de数组内容
var arr = [1,2,5,"数组","对象"]
$.each(arr,function(i,de){
console.log(i);
console.log(de);
//console.log($(de));
})
创建元素
$("标签")
var li = $("<li>创建了一个li</li>");
添加元素
$("ul").append(li);//内部最后一个前面
$("ul").prepend(li);//内部第一个元素前
$("ul").after(li);//元素自身前面
$("ul").before(li)//元素自身后面
删除元素
$("ul").remove();//删除了ul
$("ul").empty();//清空内容 ，但是ul 还在
$("ul").html("");//清空内容 ，但是ul 还在
七 尺寸
//没有参数获取元素宽/高 ，有参数设置宽高
width();
height();
$(".box").innerWidth/Height();//获取 元素宽/高 包含 padding
$(".box").outerWidth/Height();//获取 元素宽/高 包含 padding border
$(".box").outerWidth/Height(true);//获取 元素宽/高 包含 padding margin border
八 位置/偏移
-
offset() 获取相对文档的偏移
$(".box").offset()//获取 $(".box").offset().top() $(".box").offset({ top: left： })//设置偏移 -
获取带有定位的偏移，父级没定位，相对于文档
$(".box").position(); -
滚动卷去的尺寸
scrollTop（）/scrollLeft（）
九 JQuery 动画方法
-
show();显示元素
-
hide();隐藏元素
-
fadeln();淡入
-
fadeOut();淡出
-
fadeToggle();切换淡 入 出
-
fedeTo(时间/毫秒，透明度)
-
slideDown();向下淡出滑动
-
sildeUp();向上淡出滑动
-
slideToggle();切换上下淡出
-
animate({
top：200，属性：属性值
}，时间);自定义动画 //开定位
-
stop() 停止动画
-
页面滚动动画（返回首页）
$(window).scroll(function(){//可以换成其他事件源触发返回首页
$("body,html").stop().animate({
scrollTop:0
})
})
1826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
