Jquery浅析
jquery
通过jquery改变标签字体颜色
$('#b1').css('color','black')
选择标签 指定css样式
jquery和js对象之间值转化
var d1Ele = document.getElementById('b1')
d1Ele
<div id="b1">
lalallalalallal
</div>
// js拿到的是原生的js对象
$('#b1')
k.fn.init [div#b1]
// 拿到的是jquery对象
var dEle = $('#b1')[0];
dEle
<div id="b1">
lalallalalallal
</div>
// jquery对象转js对象
$(dEle)
k.fn.init [div#b1]
// 原生js对象转jquery
// 注：js对象不能调用jquery对象的方法，反之亦然
Jquery基本选择器
- id选择器
$('#d1')
- 类选择器
$('.c1')
- 标签选择器
$('p')
- 组合选择器
$('#d1,.c1,p') // 用逗号隔开
Jquery层级选择器
- 后代选择器 下面的所有
$('#d1 span')
- 儿子选择器 下面的一个缩进级别的
$('#d1>span')
- 毗邻选择器 相邻
$('#d1+span')
- 弟弟选择器 同级别的
$('#d1~span')
基本筛选器
- 找全部
$('ul li')
- 找第一个
$('ul li:first')
- 找最后一个
$('ul li:last')
- 按照索引去找
$('ul li:eq(2)')
- 按照每个标签的偶数去寻找
$('ul li:even(2)')
- 按照每个标签的基数去寻找
$('ul li:odd')
- 索引大于多少的
$('ul li:gt(3)')
- 索引小于多少的
$('ul li:lt(3)')
- 不要哪一个索引
$('ul li:not(3)')
- 指定标签中有哪些标签之类的取值
$('div').has('a')
操作类属性
- 删除
$('.c1').removeClass('bg_green')
- 有则删,无则加
$('.c1').toggleClass('bg_green')
模太框
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<style>
.cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(128, 128, 128, 0.3);
z-index: 999;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
margin-top: -100px;
margin-left: -200px;
z-index: 1000;
background-color: white;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button id="show">出来吧</button>
<div class="cover hide"></div>
<div class="modal hide">
<button id="cancel">消失吧</button>
</div>
<script>
let b1Ele = $('#show')[0];
let $cEle = $('.cover');
let $mEle = $('.modal');
let b2Ele = $('#cancel')[0];
b1Ele.onclick = function () {
$cEle.removeClass('hide'); // 删除
$mEle.removeClass('hide')
};
b2Ele.onclick = function () {
$cEle.addClass('hide'); // 添加
$mEle.addClass('hide')
}
</script>
表单筛选器
$('input[type='text']');
$(':text') // 专门用来获取input这样的
$(':checked') // 会将option默认的selected属性标签也找到
$('input:checked'); // 这个时候加上标签名就会做精确度区分
筛选器方法
# 避免$('input:first')太麻烦
$('input').first() // 找第一个元素
$("#id").next() // 找下一个这个元素
$("#id").nextAll() // 找同级所有的
$("#id").nextUntil("#i2") // 知道找到什么为止，且不包含
$("#id").prev() // 上一个
$("#id").prevAll() // 上面所有的
$("#id").prevUntil("#i2") // 知道找到什么为止，且不包含
$("#id").parent() // 找到自己的父标签
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
设置多个css样式：
$('#p1').css({'color':'red','width':'width','height':'400px'})
// 设置多个css样式需要使用自定义对象建值对形式
位置操作：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
尺寸：
height():高度
width():宽度
innerHeight(): 文本+padding
innerWidth():
outerHeight(): 文本+padding+border
outerWidth():
文本操作
- HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
- 文本值：
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
- 值：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
设置值：
$(':text').val() // 获取当前输入框的值
$(':text').val('嘿嘿嘿')； // 设置值
属性操作
- 返回第一个匹配元素的属性值
$('#d1').attr('id')
- 为所有匹配元素设置一个属性值
$('#d1').attr('name','lmd')
- 为所有匹配元素设置多个属性值
$('#d1').attr({'name2':'lmd','name1':'lmd'})
动态获取属性如用户选择
$('#12').prop('checked') // checked获取标签的属性
$('#12').removeProp() // 移除属性
attr对checkbox和radio进行赋值操作时注意：
// 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。
<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
- 添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
- 添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
- 添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
- 添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
- 移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。
- 替换
replaceWith()
replaceAll()
克隆事件
click:是绑定事件的名字
$('button').on('click',function()){
alert(123)
}
this:相当于self 是一个的对象
$('button').on('click',function()){
$(this).clone()
}
$('button').on('click',function () {
$(this).clone().insertAfter(this);
})
克隆标签:默认情况下只克隆标签的文本和样式不克隆事件
clone加上true是克隆保留事件，克隆事件且标签如果存在的情况下会从当前位置移动走，然后添加到被选元素之后
$('button').on('click',function () {
$(this).clone(true).insertAfter(this);
})
绑定事件的两种方式：
// 第一种
$('div').click(function(){
事件代码
})
// 第二种
$('div').on('事件名',function(){
事件代码
})
取消标签自带的事件的两种方式：
// 第一种:
return false
// 第二种,func要加上形参:
e.preventDefault();
悬浮事件：
$('p').hover( // 鼠标放上去的执行函数
function () {
alert('How Much?')
},
function () {
alert("欢迎老板下次再来，记得我是4号哟!")
}
)
input实时获取可用于验证用户名是否存在：
$('input').on('input',function () {
console.log(this.value)
});
// focus/blur 其他同理js事件
事件冒泡：
在一个标签内部，这层函数执行完成汇报给上一级如果上一级有事件就会被执行
阻止事件冒泡:
在函数内部加一句取消事件冒泡的代码，需要加上形参e
div>p>span // 三者均绑定点击事件
$("span").click(function (e) {
alert("span");
e.stopPropagation(); // 阻止事件冒泡
});
事件委托
将触发的的事件委托给内部某个标签去执行
无论改标签是初始化还是后期动态添加进去的
前期初始化了后期添加进来就没有事件效果了
<button>按钮</button>
<script src="jQuery-3.3.1.js"></script>
<script>
$('body').on('click','button',function () {
alert(123)
})
</script>
文档加载：
- 第一种
$(document).ready(function(){ // 文件全部读取结束
// 在这里写你的JS代码...
})
- 第二种
$(function(){ // 执行完成在执行这个函数
// 你在这里写你的代码
})
- 第三种
// 直接在body内部最下方书写代码
动画效果：
// 标签记得设置高和宽
$('img').hide(5000) // 隐藏
$('img').show(5000) // 显示
$('img').slideDown(5000) //向上滑动隐藏
$('img').slideUp(5000) // 从底部向上滑入
$('img').fadeIn(5000) // 淡入
$('img').fadeOut(5000)// 渐隐
$('img').fadeTo(5000,0.4) // 淡出到一定到透明度
each循环：
$.each(array,function(index){
console.log(array[index])
})
$.each(array,function(){
console.log(this);
})
// 支持简写
$divEles.each(function(){
console.log(this) // 标签对象
})
$.each($('div'),function(index)){
console.log(index)
}// 类似于for循环从array这个可迭代对象种循环取值交给后面的函数去执行
$('div').each(function){
console.log(this)
}// 类似于for循环从array这个可迭代对象种循环取值交给后面的函数去执行
Data零时仓库标签，可以让任何标签帮你存储数据
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
$("div").data("k");//返回第一个div标签中保存的"k"的值
$("div").removeData("k"); //移除元素上存放k对应的数据
Jquery浅析的更多相关文章
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery 3.0 的 Data 浅析
jQuery 3.0 在6月9日正式发布了,3.0 也被称为下一代的 jQuery .这个版本从14年10月开始,其中发布过一次beta 版(2016/1/14,)和候选版(2016/05/20).一 ...
- （转）【深入浅出jQuery】源码浅析2--奇技淫巧
[深入浅出jQuery]源码浅析2--奇技淫巧 http://www.cnblogs.com/coco1s/p/5303041.html
- 【深入浅出jQuery】源码浅析2--使用技巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- jQuery内部原理和实现方式浅析
这篇文章主要介绍了jQuery内部原理和实现方式浅析,本文试图从整体来阐述一下jQuery的内部实现,需要的朋友可以参考下 这段时间在学习研究jQuery源码,受益于jQuery日益发展强大,研究jQ ...
- 浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法（转载）
在调用一个jquery的ajax方法时我们有时会需要该方法返回一个值或者给某个全局变量赋值,可是我们发现程序执行完后并没有获取到我们想要的值,这时很有可能是因为你用的是ajax的异步调用async:t ...
- jQuery 3.0的domManip浅析
domManip 这个函数的历史由来已久,从 jQuery 1.0 版本开始便存在了,一直到最新的 jQuery 版本.可谓是元老级工具函数. domManip 的主要功能是为了实现 DOM 的插入和 ...
- 浅析angular，react，vue.js jQuery使用区别
前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...
随机推荐
- mysql : 使用不等于过滤null的问题
在写sql时遇到查询结果不对的情况,经查阅,发现是因为查询条件过滤null的问题:从网上找到如下资料: 在写SQL 条件语句是经常用到 不等于‘!=’的筛选条件,此时要注意此条件会将字段为null的数 ...
- Vue/React如何优雅的一劳永逸的注册路由及组件
原文链接: 本人掘金文章 假如图片看不清晰可前往掘金原文预览 官方文档: 组建注册 路由注册 未优化版: 在Vue官方文档 中,我们通过 Vue.component('MyComponentNam ...
- jQuery学习总结05-事件
1.事件的发生 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 线程局部变量ThreadLocal实现原理
ThreadLocal,即线程局部变量,用来为每一个使用它的线程维护一个独立的变量副本.这种变量只在线程的生命周期内有效.并且与锁机制那种以时间换取空间的做法不同,ThreadLocal没有任何锁机制 ...
- pg_ctl - 启动，停止和重启 PostgreSQL 服务器
SYNOPSIS pg_ctl start [ -w ] [ -s ] [ -D datadir] [ -l filename] [ -o options] [ -p path] pg_ctl sto ...
- intel vtune 介绍、安装和使用
intel vtune 介绍 https://software.intel.com/en-us/vtune intel vtune 安装包下载地址 https://software.intel.com ...
- linux命令中chmod 777 以及drwxr-xr-x分别代表什么意思
最近跟一个运维人员学了点新东西,感觉以前没怎么注意,但现在感觉很有用,特来记录一下. linux使用==ll==命令列出列表的时候,前面总是有一堆drwxr-xr-x ,这些代表什么意思从来还没有去在 ...
- json和dict 在requests中请求
上面的问题,在这么晚的夜里解决了 data 接受的是json格式数据, json 接受dict格式点的数据, 这个文章中也讲到了https://www.cnblogs.com/beile/p/1086 ...
- bzoj4811 [Ynoi2017]由乃的OJ 树链剖分+贪心+二进制
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4811 题解 我现在为什么都写一题,调一天啊,马上真的退役不花一分钱了. 考虑这道题的弱化版 N ...
- BZOJ 1911 特别行动队 （斜率优化）
$ BZOJ~1911~*~ $ 特别行动队: (斜率优化) $ solution: $ 感觉这道题目还是比较常规的,首先我们很容易想到DP,因为题目里面说了选出的人都是连续的,这意味着我们可以从前往 ...