jQuery库的介绍和基本使用

最新推荐文章于 2024-02-17 18:39:30 发布

凉梨汁儿

最新推荐文章于 2024-02-17 18:39:30 发布

阅读量835

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/weixin_45568391/article/details/112252203

版权

jquery介绍

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库，极大的简化JavaScript编程。

包含的功能有：HTML元素的选取和操作、CSS操作、HTML事件函数、JS特效和动画、DOM遍历和修改、Ajax

引用方式：直接下载
<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

可以从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

这个是百度的cdn
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

jQuery基本语法
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例：
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

jQuery加载

$(document).ready(function(){
var $div = $('#div');
alert('jquery弹出:'+$div);
});
// 可以简写为
$(function(){
var $div = $('#div');
alert('jquery弹出:'+$div);
});

选择器详解

选择器

JQ选择器规则与CSS样式相同：
$("#id") // id
$("
.class") // 类
$(“li”) // 所有li元素
$("#ul1 li span") // ul下的li下的span元素
$(“input[name=first]”) // name属性为first的input元素

过滤选择器

$(‘div’).has(‘p’); // 选择包含p元素的div元素
$(‘div’).not(’.myclass’); //选择class不等于myclass的div元素
$(‘div’).filter(’.myclass’);//选择class等于myclass的div元素
$(‘div’).eq(5); //索引->0开始；选择第6个div元素

选择集转移

$(‘div’).prev(); // 选择div元素前面紧挨的同辈元素
$(‘div’).preAll(); // 选择div元素之前所有的同辈元素
$(‘div’).next(); // 选择div元素之后紧挨的同辈元素
$(‘div’).nextAll(); // 选择div元素之后所有的同辈元素
$(‘div’).parent();// 选择div的父元素
$(‘div’).children(); // 选择div所有的子元素
$(‘div’).siblings(); // 选择div的同级元素
$(‘div’).find(’.myclass’);//选择div内的class等于myclass的元素

判断是否用到了选择器

jquery有容错机制所以即使没有找到元素,也不会出错,
可以用length属性来判断是否找到了元素。length=0->没
选择到。length大于0->选择到了

属性

$(“div”).css(“color”); // 获取div样式
$(“div”).css({“fontSize”:“color”:“red”}); // 设置div样式
$("#div").html(); // js中innerHTML()
$("#div").val(); // js中value()
$("#div").prop(“src”); // 取出某个属性的值(自有属性)
$("#div").prop({src:“test.jpg”}); // 设置某个属性的值
$("#div").attr(); // js中attribute()–>(自定义属性)

操作样式类名

$("#div1").addClass(“divClass2”) ; // 为id为div1对象追加样式divClass2
$("#div1").removeClass(“divClass”); // 为id=div1移除divClass样式
$("#div1").removeClass(“divClass divClass2”) ;//移除多个样式
$("#div1").toggleClass(“anotherClass”) ; //重复切换anotherClass样式

jQuery事件

事件

blur() // 元素失去焦点
focus() // 元素获得焦点
click() // 鼠标单击
mouseover() // 鼠标进入(进入子元素也触发)
mouseout() // 鼠标离开(离开子元素也触发)
mouseenter() // 鼠标进入(进入子元素不触发)
mouseleave() // 鼠标离开(离开子元素不触发)
hover() // 同时为mouseenter和mouseleave事件指定处理函数
ready() // DOM加载完成
resize() // 浏览器窗口的大小发生变化
scroll() // 滚动条的位置发生变化
submit() // 用户递交表单

jQuery的特殊效果

fadeOut() // 淡出
fadeToggle() // 切换淡入淡出
hide() // 隐藏元素
show() // 显示元素
toggle() // 切换元素的可见状态
slideDown() // 向下展开
slideUp() // 向上卷起
slideToggle() // 依次展开或者卷起某个元素

jQuery动画

animate动画

$('.box').animate({'height':'400px'}, 1000,function(){
					$('box').animate({'width':'400px'});
});

凉梨汁儿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery库的介绍和基本使用

jquery介绍jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库，极大的简化JavaScript编程。包含的功能有：HTML元素的选取和操作、CSS操作、HTML事件函数、JS特效和动画、DOM遍历和修改、Ajax引用方式：直接下载<script type="text/javascript" src="js/jquery-3.4.1.js"></script>可以从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery这个是
复制链接

扫一扫