jq学习笔记

作者: 背着梦的幸存者 | 来源:发表于2022-08-21 23:25 被阅读0次

jq2.0以上的版本不兼容IE8及已下的版本的浏览器

jq的使用

<script src="./jquery-3.6.0.min.js"></script>
    <script>
        //入口
        $(document).ready(function(){})
        //入口简写
        $(function(){})
    </script>

ready和onload事件的区别

ready表示页面中dom加载完毕后触发
onload表示页面中的一切加载完才触发(dom元素,图片...)

特点

轻量开源免费兼容性处理
强大的选择器
便捷的dom操作
链式调用
可靠的事件机制
封装了简单易用的ajax操作
丰富的插件

jquery dom对象

使用jq选择器获取的不是原生dom对象,称之为jquery dom对象
jqdom对象本质上是由原生dom对象组成的集合
原生dom转jqdom $(原生dom)
jqdom转原生dom jqdom[0]

全局对象

jQuery $
$的参数如果是原生dom对象,把该对象转为jqdom
$的参数如果是字符串,为jq的选择器
$的参数如果是字符串,并且以<开头,创建一个新的元素

jq选择器

1.基本选择器

//id选择器
$('#firstList').css('border','2px solid red');
//class
$('.item').css('border','1px solid green');
//标签
$('li')
//全局
$('*')
//组合
$('li.item').css('background-color','yellow');
//多个选择器
$('li,p').css('width','200px');

2.层级选择器

选择器选择器后代元素(所有层级)
选择器>选择器后代子元素(第一层级)
选择器+选择器紧邻的兄弟元素(必须是同一个父元素)
选择器1~选择器2 匹配选择器 1之后的所有的同辈的选择器2的元素

3.筛选选择器

:first
:last
:eq(index) 指定index
:gt(index) 大于
:lt(index) 小于
:odd 奇数
:even 偶数
:not(选择器) 排除
:lang(语言)
:header h1-h6的标签
:focus 获取焦点的元素
:root 获取根元素(html)
:target 获取锚点指向的元素(url #元素)

4.内容选择器

:contains(text) 包含指定的文本的元素
:has(选择器) 包含满足条件的元素的父元素
:empty 没有内容没有文本的元素
:parent 和empty相反

5.可见性选择器

:hidden 不可见的元素
:visible 可见的元素

6.属性选择器

[attrName] 有指定属性的元素
[attrName=value] 有指定属性值的元素
[attrName!=value] 有指定属性不等于指定值的元素
[attrName^=value] 有指定属性以指定值开头的元素
[attrName$=value] 有指定属性以指定值结尾的元素
[attrName*=value] 有指定属性包含指定值的元素
[selector1][selector1][selector1] 符合属性选择器,需要同时满足多个条件

7.子元素选择器

:first-child 是所有兄弟元素里面的第一个
:last-child 是所有兄弟元素里面的最后一个
:nth-child(index) index从1开始所有兄弟元素的正数第几个
:nth-last-child(index) index从1开始所有兄弟元素的倒数第几个
:only-child 唯一的子元素,没有兄弟元素
:first-of-type 所有兄弟元素里面同标签的第一个
:last-of-type 所有兄弟元素里面同标签的最后一个
:nth-of-type(index) 所有兄弟元素里面同标签的正数第几个
:nth-last-of-type(index) 所有兄弟元素里面同标签的倒数第几个
:only-of-type 唯一的子元素(同标签),没有兄弟元素

8.表单选择器

:input 所有的表单组件(input textarea select radio...)
:text / :password / :radio / :checkbox / :file /:reset 根据input的type值取
:submit 所有具有提交功能的按钮 button input:submit
:button 所有的button元素以及input:button的元素

9.表单对象选择器

:disabled 选中有disable属性的元素
:enabled disabled的反义词
:checked 选中有checked属性的元素
:selected 选中有selected属性的元素,比如select的option

10.混淆选择器

$.escapeSelector(特殊字符的选择器) 例如$ ('#'+$.escapeSelector('#item'))

jq属性操作

1.属性

.attr(attrName) 操作所有的属性(自定义和内置的) 一个参数是获取两个参数是修改或者新增
.prop() 操作html内置的属性一个参数是获取两个参数是修改或者新增
.removeAttr(attrName) 可删除所有属性
.removeProp(attrName) 并不能删除内置属性

注意: 若选中的是元素集合,设置可全部都生效,若获取,只能获取到第一个元素.

2.css类

.addClass() 添加一个class值
.removeClass() 删除一个class值
.toggleClass() 切换一个class值
.hasClass() 判断是否有某个class值返回true/false

3.html代码/文本/值

.html() 一个参数获取,两个参数设置.设置或获取 html代码 innerHTML
.text() 一个参数获取,两个参数设置.设置或获取文本 innerText
.val() 无参数是获取一个参数是设置表单控件的值

jq样式操作

1.css操作

.css() 获取或者设置css属性也可以直接传对象

console.log($('#box').css('border'));
$('#box').css('width','500px');
$('#box').css({
                'width':'400px',
                'height':'100px'
            });

2.位置

.offset 设置/获取元素在页面中的坐标

console.log($('.box').offset());
$('.box').offset({left:100,top:100})

.position 元素在第一个定位的祖先元素内坐标(只读)
.scrollTop 获取/设置相对滚动条顶部的偏移
.scrollLeft 获取/设置相对滚动条左部的偏移

3.尺寸

.width() height() 获取/设置元素内容的尺寸
.innerWidth() innerHeight() 获取/设置内容尺寸+padding
.outerWidth() outerHeight() 获取/设置盒子的尺寸内容+padding+border+margin

jq筛选操作

1.过滤操作

.first()
.last()
.eq(index|-index) 0,1..-2,-1
.not(expr|ele|fn) 去除指定元素 expr一个选择器字符串 ele一个dom元素 fn回调函数
.filter(fn(index){return...}) 只要满足条件的元素
.slice(index,index) 截取指定索引的元素 index,index-1 从0开始数
.has() 获取有指定子元素的父元素 $('li').has('ul')含有ul的li
.hasClass(class)

2.查找

.children(可选参数selector) 可选参数获取子元素
.find(selector) 获取后代元素
.parent(可选参数selector) 获取父元素
.parents(可选参数selector) 获取所有的祖先元素
.parentsUntil(可选参数selector) 查找当前元素的所有父辈元素,直到遇到匹配的元素为止
.offsetParent() 获取第一个定位的祖先元素
.next(可选参数selector) 紧邻在后面的兄弟元素
.nextAll(可选参数selector) 后面所有的兄弟元素
.nextUntil(可选参数selector) 后面的所有的兄弟元素直到遇到匹配的元素为止
.prev(可选参数selector) 紧邻在前面的兄弟元素
.prevAll(可选参数selector) 前面所有的兄弟元素
.prevUntil(可选参数selector) 前面的所有的兄弟元素直到遇到匹配的元素为止
.siblings(可选参数selector) 所有的兄弟元素
.closest(selector) 从所有的祖先元素和自己本身合集中找出第一个满足条件的元素

3.串联

.add(selector) 将匹配的元素添加到jq对象中,组成新的jq对象
.addBack() 把调用该方法的元素加入到当前集合中
.end() 返回最后一次破坏性操作之前的dom
.contents() 返回所有子节点的集合

4.jq dom对象操作

.each() 遍历
.map() 遍历并根据return值返回新的集合
.length 集合中元素的数量
.index() 返回某个元素在父元素中的索引
.get(可选index) 参数一个返回集合中指定索引参数为空可以把jqdom转化称纯数组
.is(selector) 判断该jsdom是否满足某个条件返回布尔值

jq dom操作

1.创建元素

$('<tagName>')

2.内部插入

.append(内容) 匹配的元素内部追加内容

$("p").append("<b>Hello</b>");

.appendTo(selector) 把匹配的元素追加到另一个指定的元素集合中

$("p").appendTo("div");

.prepend(内容) 匹配的元素内部前置内容
.prependTo(selector) 把匹配的元素前置到另一个指定的元素集合中

3.外部插入

.after(内容) 在匹配的元素之后插入内容

$("p").after("<b>Hello</b>");

.before(内容) 在匹配的元素之前插入内容

$("p").before("<b>Hello</b>");

.insertAfter(selector) 把匹配的元素插入到另一个指定的元素集合的后面
.insertBefore(selector) 把匹配的元素插入到另一个指定的元素集合的前面

4.包裹

.wrap() 元素.warp(标签) 用标签包裹元素，为每一个匹配的元素都包裹一次
.wrapAll() 元素.wrapAll(标签) 所有的元素都被一个标签包裹，将所有的匹配元素用单个标签包裹起来
.wrapInner() 元素.wrapInner(标签) 用标签包裹元素内部，将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
.unwrap() 去除包裹

5.替换

.replaceWith(元素/dom) 将元素替换成指定的html或者dom元素
.replaceAll(selector) 用匹配的元素替换掉所有selecor匹配到的元素

6.删除

.empty() 删除匹配的元素集合中所有的子节点
.remove() 不传参数删除元素本身传参数删除匹配的元素
.decath() 于remove的效果一样,但是删除的元素所有绑定的事件和附加数据都会保留下来,remove则不会

7.克隆

.clone() 克隆元素

jq事件

1.事件绑定

.event 直接调用事件名
.on(event,fn) 标准的绑定方式
.on({event:fn,...}) 同时绑定多个事件
.one(event,fn) 只绑定一次事件

2.解除事件绑定

.off(可选参数事件名) 不传则解除全部事件,传参则解除对应的事件

3.事件委派

.on(event,selector,fn)

4.控制事件触发

.trigger(参数事件名)
.triggerHandle(参数事件名)

$('#btn').trigger('click')

区别:

trigger 返回的jqdom对象,所以可以连贯操作;
triggerHandler 无法触发元素自带的事件如focus,blur等
trigger会触发集合中所有元素的事件,triggerHandler只会触发集合中的第一个元素

5.事件列表

.ready 页面中dom加载完毕
.focusin 获取焦点,绑定给父元素
.focusout 获取焦点,绑定给父元素
.mouseenter 代替mouseover 鼠标悬停在元素上
.mouseleave 代替mouseout 鼠标离开元素
.hover mouseenter和mouseleave的集合

6.事件对象

event对象
event.pageX 鼠标箭头的x坐标
event.pageY 鼠标箭头的y坐标
event.target 当前触发的元素对象
event.which 键盘的ascii码
event.type 事件类型(名称)
event.preventDefault() 阻止默认操作
event.stopPropagation() 阻止事件冒泡

jq动画

1.基本效果

.hide(可选速度参数,可选回调参数) 隐藏
.show(可选速度参数,可选回调参数) 显示
.toggle(可选速度参数,可选回调参数) 切换显示和隐藏
fast/normal/slow/数字第二个参数是回调事件
动画的css属性变化:透明度变化,元素大小相关的样式(padding,border,width,height,margin)

2.滑动效果

.slideDown() 显示
.slideUp() 隐藏
.slideToggle() 切换
fast/normal/slow/数字第二个参数是回调事件
垂直方向上的变化 height/padding-top/margin-top

3.淡入淡出效果

.fadeIn() 淡入
.fadeOut() 淡出
.fadeToggle() 切换
.fast/normal/slow/数字第二个参数是回调事件
.fadeTo(时间,透明度,回调) 改变透明状态
透明度的渐变

4.自定义动画

.animate({},speed,fn) 自定义动画


$('#box').animate({
    width:'200px',
    padding: '5px',
    'border-radius':'20px'
},3000)

$('#box').animate({
    width:'toggle',
    padding: 'toggle',
    'border-radius':'toggle'
},1000)

.stop() 使动画暂停
.finish() 使动画完成
.delay() 延迟执行动画

5.动画设置

jQuery.fx.off=true/false 关闭页面上所有的动画
jQuery.fx.interval = 100; 设置动画的显示帧速

6.动画队列

所有的动画操作会加入到队列中,依次执行,其他的不会

7.jq动画于css动画

兼容性,css3的动画需要ie9+
css3的动画必须给元素指定具体的css属性值

jq ajax

1.快速请求方法

get(url,[data],[callback],[type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.cgi", { name: "John", time: "2pm" },
          function(data){
          alert("Data Loaded: " + data);
});

post(url,[data],[callback],[type])

url:待载入页面的URL地址
data:待发送 Key/value 参数。
callback:载入成功时回调函数。
type:返回内容格式，xml, html, script, json, text, _default。

$.post("test.php", { "func": "getNameAndTime" },
          function(data){
          alert(data.name); // John
          console.log(data.time); //  2pm
          }, "json");

2.ajax方法

ajax()

$.ajax({
        type: "get",        // 请求方式
        url: "js/data.txt", // 请求路径
        dataType: "json",   // 预期返回一个 json 类型数据
        success: function (data) {   // data是形参名，代表返回的数据
            console.log(data);
        }
    });
————————————————
$.ajax({
        url:"ajaxServlet1111" , // 请求路径
        type:"POST" , //请求方式
        //data: "username=jack&age=23",//请求数
        data:{"username":"jack","age":23},
        
        success:function (data) {
            alert(data);
        },//响应成功后的回调函数
        error:function () {
            alert("出错啦...")
        },//表示如果请求响应出现错误，会执行的回调函数
        dataType:"text"//设置接受到的响应数据的格式
        });
————————————————

3.表单方法

serialize() 把表单中有name属性的表单控件的值拼接成字符串

jq 工具方法

1.数组对象方法

$.each(Array,fn(index,item)) 用于遍历数组或类数组对象
$.grep(Array,fn(item,index)) 过滤数组返回过滤后的数组
$.map(Array,fn(item,index)) 通过回调函数的return组成新的数组并返回
$.makeArray(类数组对象) 类数组对象转换成纯数组
$.inArray(某个元素,Array) 判断一个元素在数组中的位置,不存在返回-1
$.merge(Array,Array1,...) 合并数组返回新数组
toArray(jqdom) jqdom方法,把jqdom转为纯数组

2.函数方法

$.proxy(fn,newObj) 改变函数的this指向

3.类型判断

$.type(val) 判断val的类型
$.isFunction(val) 判读val是否为函数
$.isEmptyObject({...}) 判断是否是空对象
$.isPlainObject({...}) 判断是否是纯对象
$.isWindow(val) 判断是否是window对象
$.isNumeric(val) 判断是否是数字(NaN为false)

4.字符串

$.trim(str) 去除两边的空格
$.param(obj) 把对象序列化成字符串 {a:1,b:2}-->a=1&b=2

5.版本

$.fn.jquery 返回jq的版本

jq 插件

1.jq插件的网址

2.经典jq插件

select2 下拉框搜索插件

官网 https://select2.org/
github https://github.com/select2/select2

datetimepicker 时间日期插件

github https://github.com/xdan/datetimepicker
文档 https://xdsoft.net/jqplugins/datetimepicker/

fullpage 全屏滚动插件

官网 https://alvarotrigo.com/fullPage/zh/
github https://github.com/alvarotrigo/fullpage.js/

lazyload 图片懒加载

layer 弹窗插件

官网 http://layer.layui.com/?alone
github https://github.com/sentsin/layer/

nice validator 表单验证

官网 https://validator.niceue.com/
github https://github.com/niceue/nice-validator

jQuery-easing

官网 http://gsgd.co.uk/sandbox/jquery/easing/
github https://github.com/gdsmith/jquery.easing

jq 自定义插件

jQuery.fn.extend() 给jQueryDom扩展方法

//定义插件
$.fn.scrollList=function(options){...}
//调用插件
$('#wrapList').scrollList({...})

//给jqdom对象扩展方法
$.fn.extend({
    changeRed:function(){
        $(this).css('color','red');
    }
})

jQuery.extend() 给jQuery 对象本身扩展方法

//给jq对象本身 扩展方法
$.extend({
    sayHello:function(name){
        console.log('hello; ',name);
    }
})

jQuery UI

官网 https://jqueryui.com/

jQueryMobile

官网 https://jquerymobile.com/
教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

Sizzle

官网 https://sizzlejs.com/

Zepto

官网 http://zeptojs.com/
与jquery区别： https://www.zhihu.com/question/25379207

原理

jq本质是一个闭包 (立即执行函数)
为了避免多个框架的冲突
jq如何让外部访问内部定义的局部变量
window.JQuery=window.$=JQuery
jq为什么要给自己传递window参数
为了方便后期压缩代码;为了提升查找的效率
jq为什么要给自己传递undefined参数
为了后期压缩代码
ie9以下的浏览器undefined可以被修改,为了保证内部使用的und不被修改,所以需要接收一个正确的und
$()

传入‘’ null undefined NaN 0 faLse,返回空的jq对象
传入字符串:
1. 代码片段:会将创建好的dom元素存储到jq对象中返回
2. 选择器:会将找到的所有元素存储到jq对象中返回
传入数组:会将数组中存储的元素依次存储到jq对象中返回
其他:会将传入的数据存储到jq对象中返回

(function(w,undefined){
//工厂
function jQuery(selector,context){
    return new jQuery.fn.init(selector,context)
}
//给原型提供一个简写方式
jQuery.fn=jQuery.prototype={
    constructor: jQuery,
    length:0,
    toArray:function(){return slice.call(this)},
    each:function(){},
    map...
};
//init才是真正的构造函数
var init=jQuery.fn.init=function(selector,context){
...
};
//把构造函数的原型,替换成jq工厂的原型
//这么做是为了实现jq的插件机制,让外界可以通过jq方便的进行扩展
init.prototype=jQuery.fn;
w.jQuery=w.$=jQuery;
})(window)

jq学习笔记

jq的使用

ready和onload事件的区别

特点

jquery dom对象

全局对象

jq选择器

1.基本选择器

2.层级选择器

3.筛选选择器

4.内容选择器

5.可见性选择器

6.属性选择器

7.子元素选择器

8.表单选择器

9.表单对象选择器

10.混淆选择器

jq属性操作

1.属性

2.css类

3.html代码/文本/值

jq样式操作

1.css操作

2.位置

3.尺寸

jq筛选操作

1.过滤操作

2.查找

3.串联

4.jq dom对象操作

jq dom操作

1.创建元素

2.内部插入

3.外部插入

4.包裹

5.替换

6.删除

7.克隆

jq事件

1.事件绑定

2.解除事件绑定

3.事件委派

4.控制事件触发

5.事件列表

6.事件对象

jq动画

1.基本效果

2.滑动效果

3.淡入淡出效果

4.自定义动画

5.动画设置

6.动画队列

7.jq动画于css动画

jq ajax

1.快速请求方法

2.ajax方法

3.表单方法

jq 工具方法

1.数组对象方法

2.函数方法

3.类型判断

4.字符串

5.版本

jq 插件

1.jq插件的网址

2.经典jq插件

jq 自定义插件

jQuery UI

jQueryMobile

Sizzle

Zepto

原理

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读