jquery选择器选择到的都是伪数组,伪数组有自己的操作
jquery伪数组不能使用原生js的dom操作，反之一样
jquery使用原生js的dom操作( 取下标或者遍历): $("li")[0].innerText; $("li").get(0).innerText;js使用原生jquery操作(类似于dom的方法,dom无法使用):
var li = document.querySelector("li"); $(li).text();$(“这里放css选择器”)，一个jquery选择器就制作好了
$一般是加在jquery变量之前的，只是表示这是一个jquery变量
$("#li");//id选择器 var $six = $('.six')//类名选择器 // 标签选择器 var $lis = $('li') // 通配选择器 var _ = $('*') //没什么用的变量取名为"_" //属性选择器 $seven = $("[name=''seven]") //伪类选择器 $first = $("li:first-child") //选择为空的li $empty = $("li:empty");粗暴型：
$first =$("li:first");//第一个li $last = $("li:last");//最后一个li $even = $("li:even");//选下标为偶数的 $odd = $("li:odd");//下标为奇数的方法：
获取指定下标 $("li:eq(4)");//下标等于4的 $("li:gt(4)");//下标大于4的 $("li:lt(4)");//下标小于4的代码太长不想看，跳过
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Document</title> <script src="./js/jquery-3.5.1.js"></script> </head> <body> <form action=""> <input type="text"> <input type="password"> <input type="file"> <input type="radio"> <input type="checkbox"> <select name="" id=""> <option value="">山东省</option> <option value="">安徽省</option> </select> <textarea name="" id="" cols="30" rows="10"></textarea> <input type="button" value="按钮"> <input type="submit"> <input type="image" src="./images/1.png"> <input type="reset"> <input type="hidden" name="hhh" value='333'> </form> </body> <script type="text/javascript"> // console.log( $(':input') ); // console.log( $(':text') ); console.log( $(':hidden') ); // 选择不显示的标签 </script> </html>总结：
样子和筛选器差不多， $(":input");//选input $(":text");//选type = text $(":hidden");//选择不显示的标签，包含HTML等，不止表单范围总结
$("input[name='province']>option:selected");//被选的下拉框被选中 $("input[type='checkbox']:checked");//被选中的复选框 $("input[type='submit']:disabled")//被禁用的表单元素 $("input[type='submit']:enabled");//可用的表单元素on去掉，把函数变成回调函数（作为形参），事件源改为伪数组就完工
jquery版事件的好处：整个伪数组内的元素都绑定了事件
下面就是所有的li都绑定了点击事件：
$("li").click(function(){ console.log("jquery版点击事件"); this.style.background ="#ff0"; })针对鼠标的移入移出：mouseover();mouseout();mouseenter();mouseleave();
你收到了jQuery的礼包:hover方法 ```javascript //一个方法实现移入移出效果 console.log("公堂 三个人 被打 画面感出来了没有"); $(".box").hover(function(){ //鼠标移入执行函数 console.log("哎，我进来了~"); },function(){ //鼠标移出执行函数 console.log("哎，我又出来了~"); }) ### onload事件： <span style="color:orange;font-size:30px">单独拿出来的都是特殊情况</span> ```javascript $(window).load(function(){ console.log("最后加载"); })上面是会报错的，这玩意不能用，你中计了！！！
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eteqLv9y-1603161677400)(C:\Users\llllllllll\Desktop\1.png)]
jquery给你准备个差不多的**ready()**方法,功能和长相都十分的相似：
$("document").ready(function(){ $("li").click(function(){ console.log(this.innerText); }) })但是，为了效率（比上面的效率高)，我们再次奢侈一把
$(function(){ $("li").click(function(){ console.log(this.inenrText); }) }) //在HTML加载完成后就执行，不等js,css，图片等window.onload等资源加载完成：资源指的是html,css,js,引入的图片
jquery版的事件解绑
$("div").one("click",function(){ console.log("this is a div") })//这个事件只能执行一次了return false在jquery里面是无敌的，可以阻止一切,兼容写法jquery已经写好了，不需要你处理
事件绑定方式：
jquery伪数组.事件类型(回调函数)
jquery伪数组.on(事件类型,[委托的子元素,传入事件对象的参数],回调函数) // 参数在事件对象的data属性上
jquery伪数组.one(事件类型,回调函数) // 只能执行一次的事件
jquery伪数组.hover(鼠标移入的回调函数，鼠标移出的回调函数)
类似于window.onload
$(document).ready(回调函数)
$(function(){}) // 推荐
手动触发事件
jquery伪数组.trigger(事件类型)
解绑事件：
jquery伪数组.off(事件类型,[函数])
return false阻止一切
事件对象是兼容的
操作自定义的属性：
$("img").attr("src","./images/三上悠亚.gif");删除属性的方法：
$("img").removeAttr("src");特殊的来了
prop:操作特殊属性，一般是checked：
$("input").click('checked',false);//按钮不选中特殊删除：removeProp(‘checked’);
添加：
$(this).addClass("red");删除：
$(this).removeClass("red");切换类名和删除类名：
$(this).toggle("red");判断元素是否有类名：
$("div").hasClass("red");获取文本内容：
$(this).text();设置文本内容：
$(this).text("<i>斜体</i>")设置标签内容:
$(this).html("<i>斜体</i>")； $("this").html();设置和获取表单元素的值：
$("input").val("密码");创建的的是伪数组
给父元素追加子元素
$('body').append($div);把自己加给父元素：
$div.appendTo($("body"));将子元素添加到父元素最前面：
$("body").prepend($div);将自己添加到父元素的最前面：
$div.prependTo($("body"));给自己的后面添加一个兄弟元素:
var $p = $("<p>段落</p>"); $div.after($p);将自己添加到某个父元素的后面：
$p.insertAfter($div);自己的前面加上一个兄弟元素:
var $i = $("<i>倾斜</i>"); $div.before($i);将自己添加到某个元素的前面：
$i.insertBefore($input);将自己内部清空：
$("div").empty();连自己也删除：
$("div").remove();clone - 元素.clone() - 默认可以复制出里面所有的内容
参数1：是否复制自己的事件，默认为false
参数2：是否复制子元素的事件，默认跟随第一个参数
特殊：如果参数1位false，参数给true也没有用的
获取和设置元素的大小：
$div.Width(60); $idv.Hieght();获取元素包含padding的大小(不能设置)：
$("div").innerWidth();$("div").innerHeigth();包含边框的：
$("div").outerWidth(); $("div").outerHeight();包含外边距的：
$("div").outerWidth(true); $("div").outerHeight(true);offset():能获取能设置
var $offset = $(".small").offset();offset()设置大小(没设置过定位会默认加上定位)
$(".samll").offset({ left:30, top:20 })只能获取位置：
$(".small").position();获取滚动过的距离：
$(window).scroll(function(){ var t = $(window).scrollTop(); console.log(t); })设置滚动过的距离：
$("button").click(function(){ $(window).scrollTop(0)//设置 })隐藏方法：
$("#hide").click(function{ $("div").hide(); })显示方法：
$("#show").click(function(){ $("div").show(); })结合体：
$("#toggle").click(function(){ $("div").toggle(3000,"swing",function(){ console.log("结束了"); }) }) //参数1：完成时间 //参数2：速度方式 //参数3：动画结束后会执行回调函数格式：$.get(url,[data],[callback],[datatype]),datatype默认是text----返回字符串
data传入的方式可以是字符串可以是键值对，也可以是对象object
xml语法：
1.文件后缀必须是xml
2.xml要有文档声明 - 固定的
3.xml要有一个根标签 - xml中的所有的标签都是自定义
$.get("demo.php",function(res){ console.log(res); })参数和get请求一致
$("button").click(function(){ $.post("demo.php",function(res){ console.log(res); }) })可以get，post，jsonp
语法：
$.ajax({
url:"",
data:"",//字符串，对象
method/type:"",
datatype："",
success:res=>{
},
errro:()=>{
},
async:false，//是否同步，true异步
catch:true,//是否缓存
timeout：，//指定毫秒内完成
context://用来将ajax的回调函数中的this改成自己想要的对象
})
<?php header("content-type:text/html;charset=utf8"); // echo '给get请求响应这个字符串'; echo json_encode(["age"=>12]); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <button>按钮</button> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script> var obj={ meta:{ status:101, msg:'请求超时了' }, data:null } var body = document.querySelector("body"); $('button').click(function(){ $.ajax({ url:'demo.php', type:'POST', // data:'age=12' data:{ bbb:123 }, // async:false, success:function(res){ console.log(this); // context=body;this就成了body console.log(res); }, dataType:'json', // context:body, // 上下文，意思是可以将回调函数中的this改成想要的对象 error:(obj,status,err)=>{ console.log(obj,status,err); console.log("请求错误"); }, // timeout:1000, // 表示这次请求必须在指定的时间内完成，如果在这段时间内没有完成，就是超时错误 cache:false // 表示是否用缓存 }) }) </script> </html>error()提供了三个参数：ajax对象(xhr)，status状态，错误信息
iconfont里面文件后缀：
svg:图片文件，和字体有关系
ttf:字体
woff2:字体文件
eot:压缩字库文件（字体文件）
js:请求js文件，response响应的是js代码（引入的文件，请求的图片 必定是GET请求）
css文件请求响应的是css文件里面的代码
<script> $("input").on("input", function () { //发送jsonp请求 $.ajax({ url: "https://www.baidu.com/sugrec", dataType: "jsonp", data:`pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&wd=12&req=2&csor=2&pwd=1&wd=`+$(this).val(), success: res => { console.log(res); } }) })dataType必须是jsonp才可以
jquery里面window.$ = window.jQuery = jQuery;
如果var $ = 789;就会覆盖
. n o C o n f l i c t ( ) / / 将 .noConflict()//将 .noConflict()//将的使用权交出去
参数为true时jquery的使用权一起被交出
可以使用自定义的符号接收这个函数的返回值，作为$的替代，可以避免和自己工具库的冲突
//自己的工具库如何封装
jquery没把所有功能都封装
不能修改原码：难找，服务器上用的是.min.js，和修改的不一样
jquery的操作方式有两种：给元素实用的，给自己使用的（$)
扩展方法：extend
jQuery.fn.extend({ fn:function(){ console.log(123); } })$.extend(function(){
方法名称：函数，
方法名称，函数
})
//数组去重 $.noRepeat(arr); $.extend( noRepeat:function(arr){ var brr = [arr[0]]; for(var i =0;i <arr.length;i++){ for(var j = 0 ; j <brr.length.;j++){ if(brr[i] == arr[j]){ break; } } if(j ==brr.length){ brr.push(arr[i]); } } return brr; })http://www.htmleaf.com.jQuery
http://www.jq22.com
jquery-validation:认准菜鸟教程
上面的jquery-validation下载链接http://static.runoob.com/download/jquery-validation-1.14.0.zip，下载之后
按照下面的引入方式我们只需要jquery-validate.min.js即可
//引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"></script> <script src="./dist/localization/messages_zh.js"></script>菜鸟教程：
https://www.runoob.com/jquery/jquery-plugin-validate.html
按照菜鸟教程里面的案例练习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>输入您的名字，邮箱，URL，备注。</legend> <p> <label for="cname">Name (必需, 最小两个字母)</label> <input id="cname" name="name" minlength="2" type="text" required> </p> <p> <label for="cemail">E-Mail (必需)</label> <input id="cemail" type="email" name="email" required> </p> <p> <label for="curl">URL (可选)</label> <input id="curl" type="url" name="url"> </p> <p> <label for="ccomment">备注 (必需)</label> <textarea id="ccomment" name="comment" required></textarea> </p> <p> <input class="submit" type="submit" value="Submit"> </p> </fieldset> </form> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-validate/1.10.0/jquery.validate.min.js"></script> <script src="./dist/localization/messages_zh.js"></script> <script> $.validator.setDefaults({ submitHandler: function () { //ajax提交写在这 alert("提交事件!"); } }); $().ready(function () { $("#commentForm").validate(); }); </script> </html>display和color是没有动画的
下载地址：自己搜jquery-color
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.0.0/jquery.color.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <style> div { width: 100px; height: 100px; background-color: skyblue; } </style> <body> <button>颜色动画</button> <div></div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-color/2.0.0/jquery.color.min.js"></script> <script> $("button").click(function () { $("div").animate({ backgroundColor:"#000" },3000) }) </script> </html>jquery-lazyload插件
先引入：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-lazyload-any/0.2.3/jquery.lazyload-any.min.js"></script>将图片的src属性换成original-src属性，设置宽高
给图片加类名，便于控制
js中调用方法：
$('img').lazyload();下面layui也有图片懒加载
laydate插件
https://www.layui.com/laydate/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <input type="text" id="test1"> <input type="text" id="test2"> <input type="text" id="test3"> <input type="text" id="test4"> <input type="text" id="test5"> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="./laydate/laydate.js"></script> <script> laydate.render({ elem: '#test1' //指定元素 }); //年选择器 laydate.render({ elem: '#test2' , type: 'year' }); //年月选择器 laydate.render({ elem: '#test3' , type: 'month' }); //时间选择器 laydate.render({ elem: '#test4' , type: 'time' }); //时间选择器 laydate.render({ elem: '#test5' , type: 'datetime', calendar:true//显示节日 mark:{ "0-10-4":"生日",//自己设置重要日子，0表示每年都这样 "0-0-10":"工资"，//每个月10号发工资，写全具体哪一天 } }); </script> </html>layui插件的layer.js或者layui.all.js
ewport" content=“width=device-width, initial-scale=1.0”>
颜色动画 ```jquery-lazyload插件
先引入：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-lazyload-any/0.2.3/jquery.lazyload-any.min.js"></script>将图片的src属性换成original-src属性，设置宽高
给图片加类名，便于控制
js中调用方法：
$('img').lazyload();下面layui也有图片懒加载
laydate插件
https://www.layui.com/laydate/
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <input type="text" id="test1"> <input type="text" id="test2"> <input type="text" id="test3"> <input type="text" id="test4"> <input type="text" id="test5"> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script> <script src="./laydate/laydate.js"></script> <script> laydate.render({ elem: '#test1' //指定元素 }); //年选择器 laydate.render({ elem: '#test2' , type: 'year' }); //年月选择器 laydate.render({ elem: '#test3' , type: 'month' }); //时间选择器 laydate.render({ elem: '#test4' , type: 'time' }); //时间选择器 laydate.render({ elem: '#test5' , type: 'datetime', calendar:true//显示节日 mark:{ "0-10-4":"生日",//自己设置重要日子，0表示每年都这样 "0-0-10":"工资"，//每个月10号发工资，写全具体哪一天 } }); </script> </html>layui插件的layer.js或者layui.all.js
https://layer.layui.com/
补充：bind方法：绑定事件的一种
