知新_RL

这个屌丝很懒，什么也没留下！

热门标签

jquery学习笔记-（自用）_$('#te').onfocus(function () { $this.val(100) })

作者：知新_RL | 2024-07-13 21:39:15

踩

$('#te').onfocus(function () { $this.val(100) })

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]-->
1
2
3
4
5
6

jQuery的使用

ready表示页面中DOM加载完毕后触发
load 事件页面中所有的一-切加载完毕后触发

  jquery 入口
    $(document).ready(function(){

    })

    $(function(){

    })
1
2
3
4
5
6
7
8

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")	所有可见的表格\
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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);
            })
1
2
3

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();
    }
1
2
3
4
5

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)
1
2
3
4
5
6
7
8
9
10
11
12

$.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");
 })
1
2
3
4

3.事件委派

on(event,selector,fn)
把原来要操作的那个元素，绑定为他的父元素

//事件委派
 $("#mylist").on("click", "li", function () {
 	 $(this).toggleClass("current");
 })
1
2
3
4

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");
            })
1
2
3
4
5
6
7
8
9
10
11

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>
1
2
3
4
5
6
7
8

//通过mouseenter+mouseleave实现
$(".detail-title").mouseenter(function () {
    $(this).next(".detail-content").slideDown();
}).mouseleave(function () {
    $(this).next(".detail-content").slideUp();
})
1
2
3
4
5
6

// 通过hover事件实现
$(".detail-title").hover(function () {
    $(this).next(".detail-content").slideToggle();
})
1
2
3
4

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
})
1
2
3
4
5
6
7
8

jQuery动画

1. 基本效果

hide() 隐藏
参数

				$("#box").hide("slow",function(){
                    alert('我隐藏了') //回调函数
                });

                //fast normal slow 3000(三秒完成)
1
2
3
4
5

show() 显示
toggle() 隐藏与显示
基本效果的CSS属性变化:透明度变化,元素大小相关的样式(padding, border, width/height),外边距

2. 滑动效果

slideDown()

				$("#box").slideUp("slow",function(){
                    alert('我隐藏了') //回调函数
                });
1
2
3

slideUp()
slideToggle()
垂直方向上的变化height / padding-top / margin-top

3. 淡入淡出效果

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

$("#box").fadeTo(2000,0.5,function(){
			//参数：时间，透明度，回调函数
                });
1
2
3

透明度发生变化

4. 自定义动画

animate({}，speed，fn)1.8*

			$("#btn01").click(function(){
                $("#box").animate({
                    "width":"toggle", //实现宽度的切换
                    "padding":"toggle"
                },2000,function(){
                })
            })
1
2
3
4
5
6
7

stop([c],[j]) 使动画停止
delay(d,[q]) 的动画延迟
finish([queue]) 使动画立刻完成

5. 动画设置

jQuery.fx.off 关闭页面中所有的动画
jQuery.fx.interval 获得动画帧数

	//关闭页面中所有的动画
 	// jQuery.fx.off = true;
 	console.log("jquery 动画帧数"+$.fx.interval)
1
2
3

6. 动画队列

动画会加入到队列中去，但是其他并不会（会立即执行）

7.动画与css3动画

兼容性，CSS3的动画和过渡需要IE9+，jQuery可以使用1.* 版本的
CSS3的动画或者过渡必须给元素指定具体的CSS属性值

jQuery Ajax

1. 快速请求方法

get()

$.get(url,callback[,dataType])
1

post

$.post(url[,data],callback[,dataType])
1

2. ajax方法

ajax()

$.ajax({
	url: //请求的地址,
	type: //请求的方式get，post,
	async: //是否异步,
	data: //发送的数据，对象或者字符串（序列化）,
	dataType: //响应的内容格式,
	success: //响应成功的回调函数,
	error: //响应失败的回调函数,
})
1
2
3
4
5
6
7
8
9

3. 表单方法

serialize() 把表单中有name属性的表单控件的值拼接成一个字符串(序列化表单）

console.log($("#myForm").serialize());

1
2

jquery工具方法

1. 数组对象方法

$.each(array,fn) 遍历数组或类数组
$.grep(array,fn) 过滤数组
$.map(array,fn) 从数组中获取信息，返回新的数组
$.makeArray(likeArray) 把类数组转换为纯数组
$.inArray(val，array) 判断一个元素在数组中的位置.如果不存在就返回-1

        console.log($.inArray(4,list)); // 4这个元素在数组中的位置；如果不存在就返回-1
1

$.merge(array,array) 合并数组
合并两个数组，返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。要去除重复项，请使用$.unique()
toArray() 把jQuery集合中所有DOM元素恢复成一个数组。

2. 函数方法

$.proxy() 可以改变函数中this的指向

function testFn(){
                console.log(this);
            }
            testFn();
            var newFn = $.proxy(testFn,{name:"lili"});
            newFn();
1
2
3
4
5
6

3. 类型判断

$.type() 判断类型
$.isFunction() 判断是否是方法
$.isEmptyObject() 判断是否为空
$.isPlainObject() 判断是否是纯的对象（构造函数是否是object）
$.isWindow() 判断是否是window对象
$.isNumeric(value) 确定它的参数是否是一个数字。

4. 字符串

$.trim() 去除两端的空格
$.param() 把对象序列化字符串

$("#btn00").click(function(){
                console.log($.param($("input")))
            })
1
2
3

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下拉框搜索插件

https://select2.org/ 官网
http://github.com/select2/select2 github
用法

 $("#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
      };
    }
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

②datetimepicker时间日期插件

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

//语言设置
$.datetimepicker.setLocale("zh");
//使用
$("#datetimepicker1").datetimepicker({
				datepicker:false,
                timepicker:false,
                format:'Y-m-d',
                value:,
            })

1
2
3
4
5
6
7
8
9
10

③fullpage全屏滚动插件

官网
github
https://github.com/alvarotrigo/fullpage.js/tree/master/lang/chinese#fullpagejs
用法

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

自定义的导航一定要写在包裹外面

    <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>
1
2
3
4
5
6
7
8
9
10
11
12
13

④lazyload图片懒加载

$(".img-wrapper img").lazyload()
1

⑤layer弹框插件

layer.alert()
layer.confirm()
layer.msg()
layer.load()
layer.tips()
layer.close()
layer.open({
	type:,
	title:,
	content:,
})
1
2
3
4
5
6
7
8
9
10
11

⑥表单验证
官网
 github
用法

 $("#myForm").validator({
                fields: {
                    email: "required;email;",
                    pwd: {
                        rule: "length(6~18)",
                        msg: "密码必须6-18位",
                        ok: "密码可用",
                        tip: "请输入密码"
                    },
                    repwd: {
                        rule: "match(pwd)",
                        msg: "两次密码不一致",
                    },
                }
            });


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

⑦easing

官网
github
用法

$("#box").slideUp(500, "easeInBack", function () {
	 console.log("toggle");
})

1
2
3
4

3. 自定义jquery插件

jQuery.fn.extend()

$.fn.extend({
  	changeRed: function () {
       	$(this).css("color", "red");
  	}
})
$.fn.changeRed = function () {
   	$(this).css("color", "red");
}
1
2
3
4
5
6
7
8

jQuery.extend()

4.jqueryUI

https://www.jqueryui.org.cn/

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() //可以
1
2
3

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/821680