jquery获得
官网 jquery.com
cdn https://www.bootcdn.cn/jquery/
jQuery引入
<!--[if lt IE 9]>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!--<![endif]-->
jQuery的使用
- ready表示页面中DOM加载完毕后触发
- load 事件页面中所有的一-切加载完毕后触发
jquery 入口
$(document).ready(function(){
})
$(function(){
})
jQuery的特点
- 轻量、开源、免费、易于学习
- 兼容性处理
- 强大的选择器
- 链式操作
- 便捷的DOM操作
- 可靠的事件机制
- 封装了简单易用的Ajax操作
- 丰富的插件
jQuery dom对象
- 使用jQuery选择器 获取的对象,不是原生的DOM对象,称之为jQuery dom对象
- jQuery dom对象本质上是由原生dom对象组成的集合
- 原生dom转为jguery dom $(原生dom对象)
- jquery dom转为原生dom 使用[]指定下标
全局对象
- 全局对象jQuery别名是$
- $的参数如果是dom对象，把该对象转为jquery dom
- $的参数如果是字符串，作为jQuery的选择器
- $的参数如果是字符串,并以<开头,创建一个新的元素
jQuery选择器
https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
1.基本选择器
- ID选择器 #IDName
- CLASS选择器 .className
- 标签名选择器tagName
- 组合选择器
- *全局选择器
- selector,selector,selectorN；将每一个选择器匹配到的元素合并后一起返回。
selector:确定查询的选择器
2.层级选择器
- 选择器 选择器 ul li 后代元素
- 选择器>选择器 ul>li子元素
- 选择器+选择器 紧邻的兄弟元素（相邻兄弟选择器+）
- 选择器~选择器 后面所有的兄弟元素（通用兄弟选择器~）
3.筛选选择器
:first $("p:first") 第一个 <p> 元素
:last $("p:last") 最后一个 <p> 元素
:even $("tr:even") 所有偶数 <tr> 元素
:odd $("tr:odd") 所有奇数 <tr> 元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header $(":header") 所有标题元素 <h1> - <h6>
:animated 所有动画元素
:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素
:empty $(":empty") 无子（元素）节点的所有元素
:hidden $("p:hidden") 所有隐藏的 <p> 元素
:visible $("table:visible") 所有可见的表格\
4.内容选择器
5.可见性选择器
6.属性选择器
7.子元素选择器
8.表单选择器
9.表单对象选择器
10.混淆选择器
$( “div” ).find( “.” + $.escapeSelector( “.box” ) );
jQuery属性与样式
1.属性
- attr(name|pro|key,val|fn) 操作所有属性
- removeAttr(name) 删除属性
- prop(n|p|k,v|f) 操作html元素内置属性
- removeProp(name) 并不能删除html元素内置属性
2.css类
- addClass(class|fn)
- removeClass([class|fn])
- toggleClass(class|fn[,sw])
3.html代码/文本/值
- html([val|fn])
- text([val|fn])
- val([val|fn|arr])
jquery 样式操作
1、css操作
- css(attr[,value]) 查看或设置
2、位置操作
- $(".box2").offset().left
- $(".box2").offset().top 返回在页面中的位置
- $(".box2").position().left
- $(".box2").position().top 返回相对已定位父元素的位置
- scrollLeft() scrollTop() 获取匹配元素相对滚动条左侧/上侧的偏移。
$("#leftBtn").click(function () {
$(".box1").scrollLeft($(".box1").scrollLeft() + 100);
})
3、尺寸
- width() / height() 内容尺寸
- innerWidth() / innerHeight() 内容尺寸+padding
- outerWidth() / outerHeight() 盒子的尺寸
筛选
1.过滤
- eq() 将匹配元素集合缩减为位于指定索引的新元素。返回jQuery对象，
- first() 将匹配元素集合缩减为集合中的第一个元素。
- last() 将匹配元素集合缩减为集合中的最后一个元素。
- hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。
- filter() 将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
https://www.w3school.com.cn/jquery/traversing_filter.asp - is(expr|obj|ele|fn) 用于判断，最后返回的时true或false 判断jq中的dom是否满足某个条件
if ($(this).next("ul").is(":visible")) {
$(this).next("ul").slideUp();
} else {
$(this).next("ul").slideDown();
}
- has(expr|ele) 将匹配元素集合缩减为包含特定元素的后代的集合。
- not(expr|ele|fn) 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
- slice(start,[end])
2.查找
- children() 可以不用参数，找到子元素（直接子元素）
- find() 必须要有参数，找到子元素（一路向下直到最后一个后代）
- parent() 获取父元素
- parents() 获取所有父元素
- parentsUntil([e|e][,f]) 获取祖先元素的集合（从父元素到选择器指定的祖先元素）**直到 **
-
- offsetParent() 获取定位了的父元素
- next() 紧邻在后面的兄弟元素
- nextAll() 在后面的蓑鲉兄弟元素
- nextUntil() 获取所有的兄弟元素直到选定的元素
- prev()
- prevAll()
- prevUntil()
- siblings() 所有的兄弟元素 （前后都选中）
- closest() 从所有的祖先元素和本身里面找出第一个满足条件的
3.串联
-
add() 把选中的元素加入到当前集合
-
addBack() 把调用该方法的元素加入到当前集合
将ul加入集合
将body加入集合
-
end() 返回最后一次破坏性操作之前的DOM
破坏性操作是查找和过滤，使得返回的的DOM不再是原来的DOM -
contents() 返回所有子节点的集合
子节点不是子元素 （有元素、文本、注释节点……）
4.jQuery DOM 对象访问
- each(callback) 遍历
- map 遍历，返回新的集合
- length 元素中集合元素的个数
- get([index]) 得到元素中的第几个,如果没有参数返回一个纯数组 把jquery中的dom转成一个纯数组
- index([selector|element]) 返回某个元素在父元素中的索引
- is 判断jquery 的dom是否满足某个条件
工具
1.数组和对象操作
- $.each(object,[callback]) 遍历
//遍历
$(".mylist li").each(function (index, ele) {
//console.log(index, ele)
ele.innerHTML += "nihao"
//$(ele).html("svfvbl")
})
//map
var list = $(".mylist li").map(function (index, ele) {
//console.log(index, ele)
return $(ele).html();
})
console.log(list)
- $.grep(array,fn,[invert])
jquery DOM操作
1.创建对象
- $("<tagName>")
2. 内部插入
- append(content|fn)
- appendTo(content)
- prepend(content|fn)
- prependTo(content)
3.外部插入
- after(content|fn) 添加兄弟元素
- before(content|fn)
- insertAfter(content) 先创建新元素，然后调用insertAfter
- insertBefore(content)
4.包裹
- wrap(html|ele|fn) 每一个都包裹 把所有匹配的元素用其他元素的结构化标记包裹起来。
- unwrap()
- wrapAll(html|ele) 所有都包裹为一个 将所有匹配的元素用单个元素包裹起来
- wrapInner(html|ele|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
5.替换
- replaceWith(content|fn)
- replaceAll(selector)
6.删除
- empty() 删除匹配的元素集合中所有的子节点。
- remove([expr])
- detach([expr])
- 从DOM中删除所有匹配的元素。
- 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
w3c中的例子https://www.w3school.com.cn/tiy/t.asp?f=jquery_manipulation_detach_remove_restore
7.复制
- clone([Even[,deepEven]])
jQuery事件
1.事件绑定
- on(event,fn)标准的绑定方式
- one(event,fn)事件只能绑定一次
- on({}) 同时绑定多个事件
- 把事件名作为方法
2.解除事件绑定
- off()
//解除事件绑定
$("#btn2").click(function () {
$("#btn").off("mouseout");
})
3.事件委派
- on(event,selector,fn)
- 把原来要操作的那个元素，绑定为他的父元素
//事件委派
$("#mylist").on("click", "li", function () {
$(this).toggleClass("current");
})
4.控制事件触发
- trigger
- triggerHandler
- trigger 返回的是jquery 可以连贯操作
- triggerHandler 无法触发元素自带的事件
- trigger会触发集合中所有的元素 triggerHandler只能触发结合中的第一个
$("#btn3").click(function () {
$("#btn").triggerHandler("mousemove"); //不返回jquery 的dom
})
$("#btn4").click(function () {
$(".myinput").trigger("focus");
// $(".myinput").triggerHandler("focus"); //不能实现
})
$("#btn5").click(function () {
//$("ul li").trigger("click");
$("ul li").triggerHandler("click");
})
5.事件列表
- ready 页面中dom加载完毕
- focusin 获取焦点，绑定给父元素
- focusout 失去焦点，绑定给输入框的父元素
- mouseenter 类似于mouseover 鼠标悬停在元素上
- mouseleave 类似于mouseout 鼠标离开元素
- hover： mouseenter和mouseleave的集合
eg：实现鼠标移动到title时显示具体的内容
<div class="detail-box">
<div class="detail-title">
<h3>详细内容</h3>
</div>
<div class="detail-content">
vbfsu kjdgc fbl.idnlr hjdnfkre krgeggrilcsomgjmmmmmmmmmmmmmmmmmmmmmmmmmmml;
</div>
</div>
//通过mouseenter+mouseleave实现
$(".detail-title").mouseenter(function () {
$(this).next(".detail-content").slideDown();
}).mouseleave(function () {
$(this).next(".detail-content").slideUp();
})
// 通过hover事件实现
$(".detail-title").hover(function () {
$(this).next(".detail-content").slideToggle();
})
mouseover和mouseenter的区别
- mouseover 当鼠标从父元素进入子元素是会触发
- mouseenter 只要悬停在该元素上不管有没有在子元素上都只会触发一次
6.事件对象
- pageX 鼠标箭头的x坐标
- pageY 鼠标箭头的y坐标
- target 得到实际触发的元素
- which 得到键盘按键的ASCII
- type 事件类型（事件名称）
- preventDefault() 阻止默认事件
event.preventDefault(); - stopPropagation() 阻止冒泡事件（让他不再祖先元素上触发）
event.stopPropagation(); - return false 既可以阻止冒泡有可以阻止默认操作
$(document).click(function (event) {
console.log("鼠标位置:x-" + event.pageX + "y-" + event.pageY);
//.target得到实际触发的元素
console.log(event.target);
})
$(document).keypress(function (event) {
console.log(event.type + ":" + event.which) //事件类型 ：键盘的ASCII
})
jQuery动画
1. 基本效果
- hide() 隐藏
- 参数
$("#box").hide("slow",function(){
alert('我隐藏了') //回调函数
});
//fast normal slow 3000(三秒完成)
- show() 显示
- toggle() 隐藏与显示
- 基本效果的CSS属性变化:透明度变化,元素大小相关的样式(padding, border, width/height),外边距
2. 滑动效果
- slideDown()
$("#box").slideUp("slow",function(){
alert('我隐藏了') //回调函数
});
- slideUp()
- slideToggle()
- 垂直方向上的变化height / padding-top / margin-top
3. 淡入淡出效果
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
$("#box").fadeTo(2000,0.5,function(){
//参数：时间，透明度，回调函数
});
- 透明度发生变化
4. 自定义动画
animate({}，speed，fn)1.8*
$("#btn01").click(function(){
$("#box").animate({
"width":"toggle", //实现宽度的切换
"padding":"toggle"
},2000,function(){
})
})
stop([c],[j]) 使动画停止
delay(d,[q]) 的动画延迟
finish([queue]) 使动画立刻完成
5. 动画设置
- jQuery.fx.off 关闭页面中所有的动画
- jQuery.fx.interval 获得 动画帧数
//关闭页面中所有的动画
// jQuery.fx.off = true;
console.log("jquery 动画帧数"+$.fx.interval)
6. 动画队列
动画会加入到队列中去，但是其他并不会（会立即执行）
7.动画与css3动画
- 兼容性，CSS3的动画和过渡需要IE9+，jQuery可以使用1.* 版本的
- CSS3的动画或者过渡必须给元素指定具体的CSS属性值
jQuery Ajax
1. 快速请求方法
- get()
$.get(url,callback[,dataType])
- post
$.post(url[,data],callback[,dataType])
2. ajax方法
- ajax()
$.ajax({
url: //请求的地址,
type: //请求的方式get，post,
async: //是否异步,
data: //发送的数据，对象或者字符串（序列化）,
dataType: //响应的内容格式,
success: //响应成功的回调函数,
error: //响应失败的回调函数,
})
3. 表单方法
serialize() 把表单中有name属性的表单控件的值拼接成一个字符串(序列化表单）
console.log($("#myForm").serialize());
jquery工具方法
1. 数组对象方法
- $.each(array,fn) 遍历数组或类数组
- $.grep(array,fn) 过滤数组
- $.map(array,fn) 从数组中获取信息，返回新的数组
- $.makeArray(likeArray) 把类数组转换为纯数组
- $.inArray(val，array) 判断一个元素在数组中的位置.如果不存在就返回-1
console.log($.inArray(4,list)); // 4这个元素在数组中的位置；如果不存在就返回-1
- $.merge(array,array) 合并数组
- 合并两个数组，返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()
- toArray() 把jQuery集合中所有DOM元素恢复成一个数组。
2. 函数方法
- $.proxy() 可以改变函数中this的指向
function testFn(){
console.log(this);
}
testFn();
var newFn = $.proxy(testFn,{name:"lili"});
newFn();
3. 类型判断
- $.type() 判断类型
- $.isFunction() 判断是否是方法
- $.isEmptyObject() 判断是否为空
- $.isPlainObject() 判断是否是纯的对象（构造函数是否是object）
- $.isWindow() 判断是否是window对象
- $.isNumeric(value) 确定它的参数是否是一个数字。
4. 字符串
- $.trim() 去除两端的空格
- $.param() 把对象序列化字符串
$("#btn00").click(function(){
console.log($.param($("input")))
})
5. jQuery版本
- jQuery.fn.jquery
jQuery插件
1. jQuery插件的网站
- http://plugins.jquery.com/ 官网
- http://www.jq22.com/ jQuery插件库
- http:/www.htmleaf.com/ jQuery之家
- http://www.jq-school.com/ jQuery-school
2. 经典jQuery插件
① select2下拉框搜索插件
$("#mySelect01").select2({
width:150
});
$('#mySelect2').select2({
ajax: {
url: '/example/api',
processResults: function (data) {
// Transforms the top-level key of the response object from 'items' to 'results'
return {
results: data.items
};
}
}
});
②datetimepicker时间日期插件
//语言设置
$.datetimepicker.setLocale("zh");
//使用
$("#datetimepicker1").datetimepicker({
datepicker:false,
timepicker:false,
format:'Y-m-d',
value:,
})
③fullpage全屏滚动插件
<div id="nav">
<a href="#firstPage">首页</a>
<a href="#secondPage" >介绍</a>
<a href="#thirdPage">功能</a>
<a href="#forthPage" >演示</a>
</div>
<div id="fullPage">
<div class="section"></div>
<div class="section">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="section"></div>
<div class="section"></div>
</div>
自定义的导航一定要写在包裹外面
<script src="./jquery.js"></script>
<script src="./plugins/fullPage/fullpage.min.js"></script>
<script>
$(document).ready(function(){
$('#fullPage').fullpage({
//options here
navigation: true,
sectionsColor : ['#ccc','pink',"orange","blue","red"],
navigationTooltips: ['firstSlide', 'secondSlide'],
anchors:['firstPage', 'secondPage','thirdPage','forthPage'],//锚点设置
});
})
</script>
④lazyload图片懒加载
$(".img-wrapper img").lazyload()
⑤layer弹框插件
layer.alert()
layer.confirm()
layer.msg()
layer.load()
layer.tips()
layer.close()
layer.open({
type:,
title:,
content:,
})
$("#myForm").validator({
fields: {
email: "required;email;",
pwd: {
rule: "length(6~18)",
msg: "密码必须6-18位",
ok: "密码可用",
tip: "请输入密码"
},
repwd: {
rule: "match(pwd)",
msg: "两次密码不一致",
},
}
});
⑦easing
$("#box").slideUp(500, "easeInBack", function () {
console.log("toggle");
})
3. 自定义jquery插件
- jQuery.fn.extend()
$.fn.extend({
changeRed: function () {
$(this).css("color", "red");
}
})
$.fn.changeRed = function () {
$(this).css("color", "red");
}
- jQuery.extend()
4.jqueryUI
5 jQueryMobile
针对移动端
6 Sizzle
返回纯数组
7 Zepto
- 官网
- 与jquery区别 : https://www.zhihu.com/question/25379207
jquery的替代方案（比jquery小很多）
jquery中的动画不能用
需要试用css3的选择器
// eg:
$("ul li:eq(3)"）.css() //不可以
$("ul li").eq(3).css() //可以
496
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
