jquery例子

jquery函数调用

<button type="button" id=‘button‘ class="btn btn-primary">click</button>
<br><br>
<p id="test">Click me!</p>

<script>
$(function() {
    function warn(){
	$("#test").css("color", "red"); 

$(document).ready(function(){
	$("#button").click(function(){
		warn3();
		});
</script>

点击按钮后变色,前端显示:

例子2(两个按钮,分别在图片前后添加文本):

<button type="button" id=‘btn5‘ class="btn btn-primary">在图片前面添加文本</button>
<br><br>
<button type="button" id=‘btn6‘ class="btn btn-success">在图片前面添加文本</button>

<script>
function bef(){
	$("img").before("<b>身材超好</b><br>");
};

function aft(){
	$("img").after("<br><i>赞</i><br>");
};

$(document).ready(function(){
	$("#button").click(function(){
		warn3();
		});

	$("#btn5").click(function(){
		bef();
		});	

	$("#btn6").click(function(){
		aft();
		});

});

</script>
时间: 2025-01-18 14:35:35

jquery例子的相关文章

【简译】jQuery对象的奥秘:基础介绍

本文翻译自此文章 你有没有遇到过类似$(".cta").click(function(){})这样的JavaScript代码并且在想“$('#x')是什么”?如果这些对你想天书一样,请往下读.如果你认为这些代码不可能是真的,请浏览一些jQuery例子,他们都是这种结构. 这篇文章覆盖了像下面一样吓人的代码片段中涉及的关键概念.我们以一个长例子开始,这个长例子是基于一个让一个正方形运动的简单例子(a simple example of animating a square).你可能不需要

jQuery 表格隔行变色插件

jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: 1 ;(function($) { 2 $.fn.extend({ 3 //这里写插件代码 4 }); 5 })(jQuery); 例子:编写一个表格隔行变色插件 JS代码 1. 插件编写 1 //插件编写 2 ;(function($) { 3 $.fn.extend({ 4 "alterBgColor":function(op

[jQuery学习系列六]6-jQuery实际操作小案例

前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> <head> <script type="text/javascript"> function check() { String.prototype.format = function(){ var args = arguments; return this.repla

jQuery动画高级用法(上)——详解animation中的.queue()函数

如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一段代码或是一个概念不是很清楚,百度也好,Google也好,在论坛发问也好,给出的答案往往又会夹杂着更多你不懂得概念和令你头疼的代码. 我亦是吃了同样的亏,痛定思痛,决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fad

jQuery插件制作

模板:(function($){ $.fn.plugins=function(options){ var defaults = { } var options = $.extend(defaults,options); this.each(function(){ }) } return this:})(jQuery); 例子:做一个tab标签切换插件 <div class="tab"> <ul class="tabnav"> <li c

JQuery详解一

1.下载完jquery 需要在<head></head>区间引入 jquery框架(这里我用过的是1.91.1版本) <scprit language="javasscript" type ="text/javascript" src = "你的路径/jquery.1.9.1.min.js">红字这块最重要,language与type可以不写. 下面写一个简单的例子: <head> <titl

Web前端基础——jQuery(三)

本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQuery 中的事件7 jQuery 中的动态效果 一. jQuery 节点遍历 == next()   //用于获取节点之后的第一个同辈元素 注意,next() 中可以加过滤器 例如 next("div") == nextAll()  //获取节点之后的所有同辈元素(注意: 是节点之后,这一点

jQuery动画高级用法(上)——详解animation中的.queue()动画队列插队函数

决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如此类的具体动画函 数,而谈谈几个并不常用的,甚至说是有点风马牛不相及,但又十分十分重要的动画函数queue(),dequeue(),和stop(). 先让我们从一个简单的例子谈,假设有一个购物功能,在结账之前,用户仍然可以把购物车里的删除至备选栏中(也许因为用户的资金不足,可以存储至下次购买) 好,

&lt;转&gt;jQuery动画高级用法(上)——详解animation中的.queue()函数

如果你拿着一个疑问去找专业人士寻找答案,那么你的一个疑问会变成三个,因为他会用另外两个令你更加一头雾水的名词来解释你的这个疑问. 我想这是大多数,包括我在内,IT人在学习过程中碰到的最大问题.当你有一段代码或是一个概念不是很清楚,百度也好,Google也好,在论坛发问也好,给出的答案往往又会夹杂着更多你不懂得概念和令你头疼的代码. 我亦是吃了同样的亏,痛定思痛,决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fad