jquery例子
jquery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>adfasfdadfa</h1>
<p>asdfadfafdafafda</p>
<p></p>
<p></p>
<p></p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<button id="toggle" type="button">显示下拉菜单</button>
<a href="http://www.baidu.com"> 百度</a>
<a href="http://www.sohu.com"> 搜狐</a> <select>
<option value="v1">V1</option>
<option value="v2">V2</option>
<option value="v3">V3</option>
</select> <div id="div1">中华医学会</div>
<div id="div2">心医网</div>
<div id="div3">心医堂</div> <script type="text/javascript" src="jquery-2.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide();
});
$("#show").click(function () {
$("p").show()
});
}); $("select").change(function () {
var selet_opt = $(this).children("option:selected").val()
console.log(selet_opt)
console.log($(this).text())
}) var urlw1 = $("[href$='.baidu.com']");
console.log(urlw1); $(document).ready(function () {
$("#toggle").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle();
$("#div3").fadeToggle();
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
border: red solid;
}
.c2{
font-size: 50px;
}
</style>
</head>
<body>
<div class="c1">aaaa</div>
<div class="c1">bbbbb</div>
<div class="c1">ccccc</div>
<div class="c1">dddd</div>
<div class="c2"></div>
<input name='username' type="checkbox" value="" />aaaa
<button type="button">点我呀</button>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script type="text/javascript"> $(document).ready(function () {
$("button").click(function () {
$(".c1").toggleClass("c2")
})
}) </script>
</body>
</html>
$(document).ready(function () {
$("#button2,#button3").click(function () {
var name = $(this).attr("id")
if(name == "button2"){
$("p").append("fengjian")
}else {
$("p").append("")
}
})
})
$(document).ready(function () {
$("#button2,#button3").click(function () {
var name = $(this).attr("id")
if(name == "button2"){
$("p span").text(" fengjian")
}else {
$("p span").text("")
}
})
})
$(document).ready(function () {
$("select").change(function () {
var name =$("select").children("option:selected").val()
console.log(name)
})
})
搜索框
$(document).ready(function () {
$("#tip").focus(function () {
var id = $(this)
id.addClass('black')
if(id.val() == "请输入关键字" || id.val().trim()==""){
id.val("")
}
})
})
$(document).ready(function () {
$("#tip").blur(function () {
var id = $(this)
id.addClass('black')
if(id.length == || id.val().trim()==""){
id.val('请输入关键字');
id.attr("class","gray")
}
})
})
jquery例子的更多相关文章
- [jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后 自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
- 【简译】jQuery对象的奥秘：基础介绍
本文翻译自此文章 你有没有遇到过类似$(".cta").click(function(){})这样的JavaScript代码并且在想“$('#x')是什么”?如果这些对你想天书一样 ...
- jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- jQuery插件制作
模板:(function($){ $.fn.plugins=function(options){ var defaults = { } var options = $.extend(defaults, ...
- 利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- 恶补web之八:jQuery(3)
jquery和其他js框架.jQuery使用$作为jQuery的简写,但是还有很多js框架,比如: MooTools,Backbone,Sammy,Cappuccino,Knockout,JavaSc ...
- 个人jQuery的使用总结
一.使用方法 参考内容有: http://www.w3school.com.cn/jquery/jquery_ref_events.asp http://www.cnblogs.com/zhangzi ...
- Web前端基础——jQuery（三）
本文主要从以下几方面介绍jQuery应用中的内容: 1 jQuery 节点遍历2 jQuery 中的过滤器3 jQuery 属性操作4 jQuery Dom节点操作5 几个jQuery例子6 jQue ...
- 前端基础之jQuery事件
一.常用事件 click(function(){...}) hover(function(){...}) blur(function(){...}) focus(function(){...}) ch ...
随机推荐
- into outfile 生成sql脚本
select concat('insert into t_dm_stage(STAGE_ID,STAGE_NAME) values(',STAGE_ID,',','\'',STAGE_NAME,'\' ...
- 【BZOJ】3621: 我想那还真是令人高兴啊
http://www.lydsy.com/JudgeOnline/problem.php?id=3621 题意:给两个三角形,问A能否通过旋转伸缩到B. #include <bits/stdc+ ...
- 【COGS】894. 追查坏牛奶
http://cojs.tk/cogs/problem/problem.php?pid=894 题意:n个点m条边的加权网络,求最少边数的按编号字典序最小的最小割.(n<=32, m<=1 ...
- 【POJ】3071 Football
http://poj.org/problem?id=3071 题意:2^n支队伍进行淘汰赛,每一轮都是第一个与第二个,第三个与第四个比赛,给出了这些人之间的胜率,赢了的进入下一轮,相对位置不变.一共n ...
- 【JAVA】JAVAMail使用属性资料
核心提示:Session需要使用 java.util.Properties来构造,常用的用来构造Session的属性: mail.smtp.user SMTP的缺省用户名. mail.smtp.hos ...
- 查看那个进程占用了端口号（LINUX与AIX）
在LINUX中: netstat命令 [root@limt ~]# netstat -tulp Active Internet connections (only servers) Proto Rec ...
- hdu1232 并查集
1. hdu1232 2.链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 3.总结:简单并查集 #include<iostream> # ...
- Redis_高可用方案Sentinel配置
最小化的sentinel配置文件为: 1 port 7031 2 3 dir /opt/app/redis/redis-2.8.17/tmp 4 5 sentinel monitor mymaster ...
- 利用jdk自带的运行监控工具JConsole观察分析Java程序的运行
利用jdk自带的运行监控工具JConsole观察分析Java程序的运行 原文链接 一.JConsole是什么 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能 ...
- 在Windows7下启动MongoDB服务的解决方案
1:首先去官网下载程序,我用的是1.4.3版本,地址: http://downloads.mongodb.org/win32/mongodb-win32-i386-1.4.3.zip 2:创建一个DB ...