jQuery学习笔记基础汇总

最新推荐文章于 2024-04-19 15:29:12 发布

PayDurian

最新推荐文章于 2024-04-19 15:29:12 发布

阅读量78

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46101839/article/details/104488760

版权

一、基本概念

1.基本概念

jQuery是一个JavaScript函数库
jQuery库包含以下功能：HTML 元素选取/HTML 元素操作/CSS 操作/HTML 事件函数/JavaScript 特效和动画/HTML DOM 遍历和修改/AJAX/Utilities
jQuery还提供了大量的插件
jQuery兼容于所有主流浏览器

2.jQuery语法

基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

3.写法

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

4.选择器

标签选择器$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });
id选择器$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });
.class选择器$(document).ready(function(){ $("button").click(function(){ $(".test").hide(); }); });

5.独立文件如何使用jQuery文件

<head> 
	<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
	     </script> <script src="my_jquery_functions.js">	     			  
	</script>
</head>

6.jQuery事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
举例：在元素上移动鼠标、选取单选按钮、点击元素

7.典型例子

点击事件

$("p").click(function(){ $(this).hide(); })

$(".p").on("click",function(){$(this}.hide();})

双击事件

$("p").dblclick(function(){ $(this).hide(); })

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

$("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); })

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

`$("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); });
hover()方法用于模拟光标悬停事件。
$("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } );`

二、

href="javascript:void(0)"

表示执行一个js函数，而不是跳转链接，但是这个函数的参数为0，所以不执行函数
优点：可以保留链接的样式，但是不用执行具体操作

href=”javascript:void(0);”与href=”#"的区别
#包含了位置信息，会跳转到当前页面的顶部

PayDurian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记基础汇总

一、基本概念1.基本概念jQuery是一个JavaScript函数库jQuery库包含以下功能：HTML 元素选取/HTML 元素操作/CSS 操作/HTML 事件函数/JavaScript 特效和动画/HTML DOM 遍历和修改/AJAX/UtilitiesjQuery还提供了大量的插件jQuery兼容于所有主流浏览器2.jQuery语法基础语法： $(selector)....
复制链接

扫一扫