JQuery笔记-01

最新推荐文章于 2024-04-15 17:38:04 发布

路远·情长

最新推荐文章于 2024-04-15 17:38:04 发布

阅读量150

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43973940/article/details/116585963

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：材料来自菜鸟教程，如有侵权，立即删除。

1、基础的语法：**$(selector).action()**

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

例子：

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 元素
$("p.test").hide() - 隐藏所有 class="test" 的 元素
$("#test").hide() - 隐藏 id="test" 的元素

2、语法含义：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

注释：这个语法和js操纵dom中的语法类似，$符可以获取，当前文档的标签，ready代表着需要整个文档全部加载完成以后，才对dom元素进行操纵。

如果在文档没有完全加载之前运行函数，操作就可能失败。

3、jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

4、jquery的选择器：

jQuery 中所有选择器都以美元符号开头：$()。

一、在页面选取所有标签的元素：$("p")

二、jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。 $("#test")

三、jQuery 类选择器可以通过指定的 class 查找元素。 $(".test")

这个选择器，是基于css的选择器，“记作：类点（累点）无所谓，只要id（爱弟）井里有水喝”

5、更多的语法实例：

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.intro")	选取 class 为 intro 的 <p> 元素
$("p:first")	选取第一个 <p> 元素
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

6、事件：

一、$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。

二、click()，click() 方法是当按钮点击事件被触发时会调用一个函数。

该函数在用户点击 HTML 元素时执行。

三、dblclick()

当双击元素时，会发生 dblclick 事件。

四、mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

五、mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

六、mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

七、mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

八、hover()

hover()方法用于模拟光标悬停事件。

九、focus()

当元素获得焦点时，发生 focus 事件。

十、blur()

当元素失去焦点时，发生 blur 事件。

7、jQuery fadeIn() 用于淡入已隐藏的元素。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法用于淡出可见元素。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

8、jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>

注释：这个效果是滑动的效果，可以滑动展开面板，也会滑动收起面板。

路远·情长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery笔记-01

前言：材料来自菜鸟教程，如有侵权，立即删除。1、基础的语法：$(selector).action()美元符号定义 jQuery 选择符（selector）"查询"和"查找" HTML 元素 jQuery 的 action() 执行对元素的操作例子： $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有 元素 $("p.test").hide() - 隐藏所有 class="test" 的 元素
复制链接

扫一扫