jquery 基础

最新推荐文章于 2022-11-15 10:08:40 发布
最新推荐文章于 2022-11-15 10:08:40 发布
阅读量537 收藏 1
点赞数
分类专栏： JQuery
   语法 说明 
$(“*”) 选择所以元素 
$(this) 选择当前元素 
$(“p.intro”) 选项所有class=intro的p元素 
$(“p:first”) 选择第一个p元素 www.2cto.com
$(“ul li:first”) 选择第一个<ul>元素的第一个<li>元素 
$(“ul li:first-child”) 选择每个<ul>的第一个 元素 
$(“[href]“) 选择所有带href的元素 
$(“a[target='_blank']“) 选择所有target=_blank的a元素 
$(“a[target!='_blank']“) 选择所有target！=_blank的a元素 
$(“:button”) 选择所有button元素及input类型为button的元素 
$(“tr:even”) 选择所有偶数行<tr>元素 
$(“tr:odd”) 选择所有单数行<tr>元素 
 
$(function(){
 
   // jQuery methods go here...
 
 }); 
 
你可以选择你喜欢的方式，但通常还是采用$(document).ready(function(){的方式以便于代码的 阅读。
 
学习了jQuery的选择器，就可以针对选择的HMTL标记或是元素添加事件处理，事件包括按键，鼠标，单击按钮等。
 
下面为常见的DOM事件：
 
鼠标事件 键盘事件 表单事件 文档/窗口事件 
click keypress submit load 
dblclick keydown change resize 
mouseenter keyup focus scroll 
mouseleave   blur unload 
 
jQuery事件处理的语法
在jQuery中，大部分的DOM事件都有对应的jQuery事件，比如为所有<p>标记添加单击事件处理：
 
[javascript]  
$("p").click();  
 
$("p").click();
 
下一步添加单击事件的处理函数，你必须传一个回调函数给单击事件：
 
[javascript] 
$("p").click(function(){  
  // action goes here!!   
});  
 
$("p").click(function(){
  // action goes here!!
});
 
 
 
常见的jQuery事件
$(document).ready()
 
文档准备好事件，在文档完全载入后执行。
 
click()
 
用户单击某个HTML元素后调用，比如下面的例子中用户点击<p>标记部分后隐藏该标记的内容：
 
[javascript]  
$("p").click(function(){  
  $(this).hide();  
});  
 
$("p").click(function(){
  $(this).hide();
});
dblclick()
 
双击某个HTML标记时调用，比如下面代码在双击<p>元素时隐藏其内容：
 
[javascript]  
$("p").dblclick(function(){  
  $(this).hide();  
});  
 
$("p").dblclick(function(){
  $(this).hide();
});
mouseenter()
 
在鼠标进入某个HTML元素时触发，例如：
 
[javascript]  
$("#p1").mouseenter(function(){  
  alert("You entered p1!");  
});  
 
$("#p1").mouseenter(function(){
  alert("You entered p1!");
});
mouseleave()
 
在鼠标进入离开某个HTML元素时触发，例如：
 
[javascript] 
$("#p1").mouseleave(function(){  
  alert("Bye! You now leave p1!");  
});  
 
$("#p1").mouseleave(function(){
  alert("Bye! You now leave p1!");
});
mousedown()
在按下鼠标左键时触发，例如：
 
[javascript] 
$("#p1").mousedown(function(){  
  alert("Mouse down over p1!");  
});  
 
$("#p1").mousedown(function(){
  alert("Mouse down over p1!");
});
mouseup()
 
在某个元素上释放鼠标左键时触发，例如：
 
[javascript]  
$("#p1").mouseup(function(){  
  alert("Mouse up over p1!");  
});  
 
$("#p1").mouseup(function(){
  alert("Mouse up over p1!");
});
hover()
在鼠标指针放在某个元素之上时触发，为mouseenter和mouseleave的组合，它的第一个回调函数中鼠标进入时调用，第二个回调函数在鼠标离开时执行，例如：
 
[javascript] 
$("#p1").hover(function(){  
  alert("You entered p1!");  
  },  
  function(){  
  alert("Bye! You now leave p1!");  
});  
 
$("#p1").hover(function(){
  alert("You entered p1!");
  },
  function(){
  alert("Bye! You now leave p1!");
});
focus()
当某个表单输入域获得焦点时调用,例如：
 
[javascript]  
$("input").focus(function(){  
  $(this).css("background-color","#cccccc");  
});  
 
$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});
blur()
当某个表单输入域失去焦点时调用,例如：
 
[javascript]  
$("input").blur(function(){  
  $(this).css("background-color","#ffffff");  
});  
 
$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});
 
 
jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：jQuery的hide()和show()可以用来显示和隐藏内容。比如下面的例子：
[ html]  
<!doctype html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>JQuery Demo</title>  
    <script src="scripts/jquery-1.9.1.js"></script>  
    <script>  
        $(document).ready(function () {  
            $("#hide").click(function () {  
                $("p").hide();  
            });  
            $("#show").click(function () {  
                $("p").show();  
            });  
        });  
    </script>  
</head>  
<body>  
    <p>If you click on the "Hide" button, I will disappear.</p>  
    <button id="hide">Hide</button>  
    <button id="show">Show</button>  
</body>  
</html>  
 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#hide").click(function () {
                $("p").hide();
            });
            $("#show").click(function () {
                $("p").show();
            });
        });
    </script>
</head>
<body>
    <p>If you click on the "Hide" button, I will disappear.</p>
    <button id="hide">Hide</button>
    <button id="show">Show</button>
</body>
</html>
 
 
基本语法
$(selector).hide(speed,callback);
 
$(selector).show(speed,callback);
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用。下面代码在1秒钟内隐藏内容：
 
[javascript]  
$("button").click(function(){  
  $("p").hide(1000);  
});  
 
$("button").click(function(){
  $("p").hide(1000);
});www.2cto.com
 
 
jQuery toggle()方法
 
使用toggle()方法，可以实现交替显示和隐藏内容，如：
20130306001
[javascript]  
$("button").click(function(){  
  $("p").toggle();  
});  
 
$("button").click(function(){
  $("p").toggle();
});
其基本语法如下：
 
$(selector).toggle(speed,callback);
 
可选的参数speed 给出显示或隐藏内容的速度，可以使用“slow”,”fast”或者数字代表微秒。
第二个可选参数为回调函数，在显示或隐藏结束时调用
 
 
bbl_bbg
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 基础语法
既然选择远方，便只顾风雨兼程！
02-27 2478
文章目录jQuery 基础语法一、 jQuery 概述1、 JS 库2、 jQuery 概念3、 jQuery 优点二、 jQuery 基本使用1、 jQuery 使用步骤2、 jQuery 入口函数3、 jQuery 顶级对象4、 jQuery 对象和 DOM 对象三、 jQuery 常用 API1、 jQuery 选择器2、 隐式迭代3、 jQuery 筛选选择器4、 jQuery 筛选方法5、 jQuery 里面的排他思想6、 链式编程四、 jQuery 样式操作1、 操作 CSS 方法2、 设置类样
Jquery基础
m0_60165694的博客
10-15 714
1.什么是 jQuery ？ jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件] 1.jQuery 是一个 JavaScript 函数库。[.js] 2.jQuery 极大地简化了 JavaScript 编程。 3.jQuery 很容易学习。 jQuery库包含以下功能： 1.HTML元素选取 2.HTML元素操作 3.CSS 操作 4.HTML 事件函数 5.JavaScript 特效和动画[元素的隐藏和显示] 6.HTML DOM 遍历和修改
jQuery基础知识
qq_51781439的博客
09-11 1289
一、jQuery简介 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 函数库。 jQuery 库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 提示： 除此之外，jQuery 还提供了大量的插件。 二、jQuery的语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法：...
JQuery基础语法
weixin_54597170的博客
10-27 1691
目录JQuery基础概述JQuery对象和JS对象区别与转换基础操作选择器基本选择器层级选择器属性选择器过滤选择器表单过滤选择器DOM操作内容操作属性操作CRUD操作 JQuery基础 概述 一个JavaScript框架， 简化JS开发， 本质上就是一些js文件，封装了js的原生代码而已。 JQuery对象和JS对象区别与转换 1.操作 JQuery对象在操作时，更加方便。 2.通用性 JQuery对象和js对象方法不通用的. 3.转化 1. jq – > js : jq对
轻松掌握 jQuery 基础
不迁怒，不贰过。小知识，大智慧。
11-15 1110
jQuery是一个优秀的JavaScript框架，它能帮助用户更方便的处理HTML文件、事件、动画效果、AJAX交互等。它的出现极大程度地改变了开发者使用JavaScript的习惯。
JQuery基础事件
FirMoveBrick的博客
08-04 4298
简介 但是毕竟08年的还是php页面的时候，前端的点击事件，基本都是后端在写的，所以13年的时候就用到了以前最火的 jquery ，我为了融入他们的氛围，我不得不用 jquery 写点击事件. 下面，让我们直接进入主题吧！ 简单的点击事件 jq
jQuery基础
程序员柒的博客
09-05 730
本文讲简单的介绍了jQuery的概念以及基本的使用方法，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力，先赞后看养成习惯。以下是本篇文章正文内容jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，
JQuery 基础
想骑车的彭于晏
12-30 1895
1.获取DOM节点的三种方式及区别 ①Document.getElementById();取得一个元素对象 ②Document.getElementsByClassName()：取得多个元素对象放入数组中 ③Document.getElementsByTagName()：取得多个元素对象放入数组中 2.jQuery中的动画有哪些？并分别概述其实现效果？ ① slideDown()：向下滑动 ②sl...
JQuery基础
bbbeddd的博客
11-17 411
jQuery 基础篇
Alemon的博客
11-18 1075
1、为什么要使用jQuery？1.1 原生js的缺点1.2 jQuery的优势1.3 什么是jQuery？1.4 jQuery的版本问题2、如何使用jQuery？3、jQuery的入口函数4、jQuer
jQuery基础教程
07-22
资源名称：jQuery基础教程资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
QT自定义标题栏窗口，实现拖动及可拉伸效果
06-20
QT自定义标题栏窗口，实现拖动及可拉伸效果
小程序版通过CNN卷积神经网络的有无佩戴安全帽识别-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
小程序版深度学习CNN训练识别青苹果和红苹果-不含数据集图片-含逐行注释和说明文档.zip
06-20
本代码是基于python pytorch环境安装的。 总共是3个py文件，十分的简便 且代码里面的每一行都是含有中文注释的,小白也能看懂代码 然后是关于数据集的介绍。 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 在数据集文件夹下是我们的各个类别,这个类别不是固定的，可自行创建文件夹增加分类数据集 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01数据集文本生成制作.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集。 运行02深度学习模型训练.py就会将txt文本中记录的训练集和验证集进行读取训练，训练好后会保存模型在本地。训练完成之后会有log日志保存本地，里面记录了每个epoch的验证集损失值和准确率。 运行03flask_服务端.py就可以生成与小程序交互的url了 然后需要我们运行微信开发者工具，如果之前没有下载过，则需要在电脑网页上，搜微信开发者工具进行下载。 导入我们的小
pyzmq-25.0.2-pp39-pypy39_pp73-manylinux_2_28_x86_64.whl
最新发布
06-20
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
Director中常见Lingo指令介绍.pdf
06-20
Director中常见Lingo指令介绍
jquery基础教程
09-28
下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值