jQuery详细笔记

最新推荐文章于 2024-11-04 16:17:23 发布

我想我是海233

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量80

点赞数

分类专栏：笔记 java学习前端文章标签： js javascript java css jquery

本文链接：https://blog.csdn.net/weixin_51151057/article/details/117338959

版权

笔记同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

java学习

3 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

本文深入探讨jQuery框架，包括其核心函数`$()`、不同类型的入口函数，以及丰富的选择器如ID、类、层级和筛选器等。此外，还介绍了jQuery的事件处理，如鼠标和键盘事件，以及DOM操作如属性、CSS和文本处理。文章旨在帮助开发者更好地理解和应用jQuery来提高前端开发效率。

摘要由CSDN通过智能技术生成

jQuery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery函数

核心函数

jQuery()；
$()；

核心函数里面可以放入变量、字符串、函数以及对象。

入口函数

//第一种
jQuery(document).ready(function(){
    console.log("第一种入口函数");
})

//第二种
$(document).ready(function(){
    console.log("第二种入口函数");
})

//第三种
jQuery(function(){
    console.log("第三种入口函数");
})

//第四种
$(function(){
    console.log("第四种入口函数");
})

JavaScript入口函数和jQuery入口函数的区别

原生js入口函数后面的会覆盖前面的入口函数，只有一个入口函数有效果，原生js入口函数会等待页面加载完成才能执行。
jQuery入口函数分别执行，互不影响，页面打开就立即执行，不需要等待页面加载完成。

jQuery选择器

基本选择器

id选择器

$("#id选择器名称");
element选择器（标签选择器）

$("标签名")
class选择器

$(".class选择器名称")
全局选择器（*）

$("*")
多选择器

$("选择器名称，选择器名称，选择器名称")

层级选择器

多个选择器共同作用，前面的选择器用来筛选范围，最后一个选择器确定具体标签

$("#one li").css("border","2px blue solid");
指定父标签下的直接子标签

$("#one>.current").css("border","3px black solid");
指定标签下之后第一个复合要求的兄弟标签

$("#one+ul").css("border","3px red solid");
指定标签下之后所有的复合要求的兄弟标签

$(".action~li").css("border","3px blue solid");

基本筛选器

从复合选择器要求的基础上，选择第一个标签

$("#two .current:first").css("border","3px blue solid");
从符合选择器要求的基础上，选择最后一个标签

$(".current:last").css("border","3px red solid");
从符合选择器要求的基础上，筛选出没有使用过指定选择器的标签

$("#two li:not(.current)").css("border","3px black solid");
从符合选择器要求的基础上，筛选下标为偶数的标签，下标从0开始

$("#two li:even").css("background-color","#0c0c0c");
从符合选择器要求的基础上，筛选下标为奇数的标签，下标从0开始

$("#two li:odd").css("background-color","#FFA500");
从符合选择器要求的基础上，筛选出指定下标的标签

$("#two li:eq(2)").css("background-color","#FFA500");
从符合选择器要求的基础上，筛选出大于指定下标的标签

$("#two li:gt(2)").css("background-color","#FFA500");
从符合选择器要求的基础上，筛选出小于指定下标的标签

$("#two li:lt(2)").css("background-color","#FFA500");

内容选择器

通过两个标签之间的文本内同进行筛选，或者是两个标签之间的子标签

找出文本中包含指定字符的标签（也可以是子标签文本内容包含）

$("li:contains(1)").css("border","3px red solid");
找出指定标签中没有任何文本内容或者没有任何子标签

$("li:empty").css("border","3px blue solid");
从符合选择器要求的标签中，选择满足条件的父标签

$("ul:has(.current)").css("border","3px black solid");
从符合要求的标签中，找出含有子标签或者内容的标签

$("span:parent").css("border","3px red solid");

可见性选择器

从符合选择器要求的标签中，找出隐藏的标签

$("img:hidden").css("display","block");
从符合选择器要求的标签中，找出显示的标签

$("img:visible").css("display","none");

属性选择器

找出具有指定属性名称的标签

$("img[title]").css("border-radius","50%");
找出具有指定属性名称并且具有指定属性值的标签

$("img[title=123]").css("border-radius","50%");
找出具有指定属性名称并且属性值按照指定字符开头的标签

$("img[title ^= 1]").css("border-radius","50%");
找出具有指定属性名称并且属性值按照指定字符结尾的标签

$("img[title $= 3]").css("border-radius","50%");
找出具有指定属性名称并且属性值包含指定字符的标签

$("img[title *= 1]").css("border-radius","50%");
找出同时具有多个指定属性名称的标签

$("img[title][alt]").css("border-radius","50%");

子元素选择器

从符合要求的选择器里面，找出作为该父标签下的第一个子标签

$("#two li:first-child").css("border","3px blue solid");
从符合要求的选择器里面，找出作为该父标签下的最后一个子标签

$("#two li:last-child").css("border","3px blue solid");
从符合要求的选择器里面，找出作为该父标签下的指定位置的子标签，计数从1开始

$("#two li:nth-child(2)").css("border","3px red solid");
从符合要求的选择器里面，找出作为该父标签下的唯一子标签

$("li:only-child").css("border","3px black solid");

表单选择器

将所有带有input特性的标签选择上

$(":input").css("width","200px");
选择出表单中type值为text的标签

$(":text").css("border","3px blue solid");
选择出表单中type值为password的标签

$(":password").css("border","3px blue solid");
选择出表单中type值为radio的标签

$(":radio").css("width","100px");
选择出表单中type值为checkbox的标签

$(":checkbox").css("width","100px");
选择出表单中可以提交数据特性的标签

$(":submit").css("border","3px black solid");
选择出表单中可以达到重置特性的标签

$(":reset").css("border","3px black solid");
选择出表单中选择出type值为button或者button标签

$(":button").css("border","3px black solid");
选择出表单中选择出type值为image的标签

$(":image").css("border","3px red solid");
选择出表单中选择出type值为file的标签

$(":file").css("border","3px red solid");

表单对象选择器

获取可用的标签

var temp = $("input:enabled");
获取不可用的标签

var temp = $("input:disabled");
获取复选框中已经被勾选上的标签

var temp = $("input:checked");

筛选

先使用选择器将符合要求的标签找到，再通过筛选的方法，进行进一步过滤，找到最终标签

过滤

从符合选择器要求的标签中，用方法筛选出第几个下标的标签

$("li").eq(1);
从符合选择器要求的标签中，用方法筛选出第一个标签

$("li").first();
从符合选择器要求的标签中，用方法筛选出最后一个标签

$("li").last();
判断单个标签中是否使用了指定的class选择器的名称返回的是布尔值

$("li").hasClass("temp");
判断标签的子标签是否满足has中选择器的内容

$("li").has(".temp");
not(选择器)从符合要求的标签中，用方法过滤出没有使用过not指定的选择器

$("li").not(".temp");
slice(起始下标，结束下标) 根据下标的范围选定，取左不取右

$("li").slice(1,3);

查找

找出指定父标签下符合要求的子标签(直接子标签)

$("li").children();
找出指定父标签下所有符合要求的后辈标签

$("li").find();
找到指定标签的下一个兄弟标签

$("li").next();
找到指定标签的后续所有兄弟标签

$("li").nextAll();
找到指定标签的上一个兄弟标签

$("li").prev();
找到指定标签的前面所有兄弟标签

$("li").prevAll();
除了自己的所有兄弟标签

$("li").siblings();
找到指定标签的直接父标签

$("li").parent();
找到指定标签的祖先满足条件的标签

$("li").parents("div");

事件

鼠标事件

鼠标单击事件

$("#out img").click(function(){

console.log(this);

});
鼠标双击事件

$("#out img").dblclick(function(){

console.log(this);

});
鼠标移入事件

$("img").mouseenter(function(){

$(this).css("border-radius","50%").css("border","3px red solid");

})

$("img").mouseover(function(){

$(this).css("border-radius","50%");

})
鼠标移出事件

$("img").mouseleave(function(){

$(this).css("border-radius","10px").css("border","0px red solid");

})

$("img").mouseout(function(){

$(this).css("border-radius","10px");

})
鼠标移动事件

$("img").mousemove(function(){})

键盘事件

键盘按下事件

$(window).keydown(function(event){

console.log("键盘被按下"+event.keyCode);

})
键盘松开事件

$(window).keyup(function(envet){

console.log("键盘松开"+event.keyCode);

})

表单事件

获取焦点事件

$("#tel").focus(function(){

console.log("聚焦");

})
失去焦点事件

$("#tel").blur(function(){

console.log("失去焦点");

})
内容做了改变事件

$("#tel").change(function(){

console.log("内容做了更改");

})

属性

标签中的属性操作

增加/删除属性：如果原标签中没有给属性，则表示新增属性，否则就是修改

$("img").attr("属性名","值");
获取属性

$("img").attr("属性名");
删除属性

将属性值删除，属性名称仍然存在

$("img").first().attr("title","");

将整个属性都删除

$("img").removeAttr("属性名");