jQuery使用示例详解
【jquery引用字段】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
</head>
<body> <div id="MyDiv" class="myClass">
<p></p>
</div> <input type="button" name="username" /> <!--引用jQuery文件-->
<script src="js/jquery-1.8.3.js"></script>
<script>
//id选择器:查找id为MyDiv的标签
$('#MyDiv').
//标签选择器：查找所有的div标签
$('div').
//class选择器：查找所有class为myClass的标签
$('.myClass')
//层级选择器：div标签下的p标签
$('div p') //查找input标签name等于username，并且属性值为button的标签
$('input[name="username"]').attr('button',true)
</script>
</body>
</html>
jquery字段引用说明
【jquery字段参数】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
</head>
<body> <div id="MyDiv" class="myClass">123<a>hello</a></div> <input name="username" type="text" value="9999" /> <input type="checkbox" /> <!--引用jQuery文件-->
<script src="js/jquery-1.8.3.js"></script>
<script>
//加参数是赋值，不加参数是取值
$('#MyDiv').text; //获取id为MyDiv的文本内容----123
$('#MyDiv').text('haha'); //为id为MyDiv的标签添加文本内容
$('#MyDiv').html; //获取id为MyDiv的html内容----<a>hello</a>
$('#MyDiv').html('<p>hehe</p>'); //为id为MyDiv的标签添加html内容
$('input[name="username"]').val //获取name为username的input标签的value值
$('input[name="username"]').val('sb') //为name为username的input标签的value赋值 $('input[name="username"]').attr('name') //获取name为username的input标签的name属性的值
$('input[name="username"]').attr('name','Macoli') //修改name为username的input标签的name属性的值为Macoli $('input[type="checkbox"]').prop('checked',true) //选中所有的复选框（true为选中，fals为不选中，默认不选中）
$('input[type="checkbox"]').prop('disabled',true) //禁用所有的复选框（true为禁用，false为不禁用，默认不禁用）
</script>
</body>
</html>
jquery字段参数操作说明
【jquery给html标签添加css】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
<style>
.c1{
border: 1px solid red;
}
.c2{
font-size: 50px;
}
</style>
</head>
<body> <div id="MyDiv" class="c1">hello</div> <input type="button" value="点击" onclick="Foo()" /> <p>hello</p> <!--引用jQuery文件-->
<script src="js/jquery-1.8.3.js"></script>
<script> //给p标签设置css
$('p').css({'color':'red','font-size':'50px'}); function Foo() {
$('.c1').toggleClass('c2'); //每次执行的时候交替添加、删除c2
} //$('.c1').addClass('c2'); //为所有class为c1的标签再加一个c2的class（c1和c2同时存在）
</script>
</body>
</html>
jquery给html标签添加css
【jquery常用函数】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
<style>
.returnTop{
position: fixed;
width: 32px;
height: 35px;
right: 20px;
bottom: 20px;
background-color: red;
color: white;
}
.hide{
display: none;
}
</style>
</head>
<body>
<!--返回顶部功能实现-->
<!--
<div id="return_top" class="returnTop hide" onclick="Go()">返回顶部</div>
-->
<div id="return_top" class="returnTop hide">返回顶部</div> <div style="height: 10000px"></div> <!--引用jQuery文件-->
<script src="js/jquery-1.8.3.js"></script>
<script>
//当页面框架加载完成后，默认执行该函数
$(function () {
$('#return_top').click(function () {
$(window).scrollTop(0); //设置页面返回顶部
})
}) //当页面滚动条变化时，执行的函数（每滚动一次，函数就执行一次）
$(window).scroll(function () {
var height = $(window).scrollTop(); //获取滚动条离顶部的距离
if (height>0){
//显示返回顶部图标（或文字）
$('#return_top').removeClass('hide'); //去除hide
}else {
//隐藏返回顶部图标（或文字）
$('#return_top').addClass('hide');
}
}) /*
function Go() {
$(window).scrollTop(0) //设置页面返回顶部
}
*/
</script>
</body>
</html>
页面加载完成后执行的函数和返回顶部函数
【jquery添加删除内容】
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Title</title>
<style> </style>
</head>
<body> <p>I would like to say:<span></span></p>
<input type="button" value="追加1" id="addid1" />
<input type="button" value="追加2" id="addid2" /> <!--引用jQuery文件-->
<script src="js/jquery-1.8.3.js"></script>
<script> //append():内容后面追加 prepend():内容前面追加
//appendto(content):把标签追加到content中（参数content也是一个标签，可以自定义）
//empty():清空标签的所有内容(标签还在)
//remove():删除标签（包括内容） //页面框架加载完成后执行的函数
$(function () {
$('#addid1,#addid2').click(function () {
//获取当前点击的标签Id
var currentId = $(this).attr('id')
if (currentId=='addid1') {
//$('p').append('Alex '); //往p标签中追加内容
$('p span').text('Alex'); //往p标签下的span标签中添加内容
}else if (currentId=='addid2'){
//$('p').append('Macoli '); //往p标签中追加内容
$('p span').text('Macoli'); //往p标签下的span标签中添加内容
}
})
})
</script>
</body>
</html>
jquery添加、删除内容
【jquery操作元素焦点】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<style>
.gray{
color: gray;
}
.black{
color: black;
}
</style>
</head>
<body> <!--事件：onblur()：元素失去焦点 onfocus()：元素获得焦点-->
<input type="text" class="gray" id="tip" value="请输入关键字" /> <script src="js/jquery-1.8.3.js"></script>
<script> //页面框架加载完成后执行的函数
$(function () {
//获取焦点
$('#tip').focus(function () {
var id = $(this);
id.addClass('black');
if (id.val()=='请输入关键字'||id.val().trim()=='') { //trim()函数：清除字符串的空格
id.val('');
}
}) //失去焦点
$('#tip').blur(function () {
var id = $(this);
var val = id.val();
if (val.length==0||val.trim()==''){
id.val('请输入关键字');
id.addclass('gray');
}else {
id.adclass('black');
}
})
}) </script>
</body>
</html>
jquery获取、释放元素焦点
【jquery操作多选框的全选、不选、反选功能】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title> </head>
<body>
<!--设置全选、不选、反选选项功能-->
<div id="checklist">
<input type="checkbox" value="1" />篮球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />羽毛球
</div> <input type="button" value="全选" id="selectAll" />
<input type="button" value="不选" id="unselectAll" />
<input type="button" value="反选" id="reverseAll" /> <script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//页面框架加载完成后执行的函数
$(function () {
$('#selectAll').click(function () {
//:checkbox和input[type=='checkbox']等价
//$('#changelist :checkbox').attr('checked',true);
$('#checklist input[type="checkbox"]').attr('checked',true);
}) $('#unselectAll').click(function () {
$('#checklist :checkbox').attr('checked',false);
}) $('#reverseAll').click(function () {//反选
//each：循环个标签，每个标签都执行函数
$('#checklist :checkbox').each(function () {
//获取标签是否被选中的信息，如果被选中，设置为取消选中；如果没被选中，设置为选中
$(this).attr('checked',!$(this).attr('checked'));
})
})
})
</script>
</body>
</html>
jquery操作多选框的全选、不选、反选功能
【jquery操作菜单，选中菜单才显示子菜单】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css">
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<!--菜单选中显示子菜单，不选中不显示功能-->
<div class="container">
<div>
<div class="title">Menu1<i class="fa fa-beer" aria-hidden="true"></i></div>
<div class="body hide">
<a href="">content1</a><br/>
<a href="">content2</a><br/>
<a href="">content3</a>
</div>
</div> <div>
<div class="title">Menu2<i class="fa fa-pencil-square-o" aria-hidden="true"></i></div>
<div class="body hide">
<a href="">content1</a><br/>
<a href="">content2</a><br/>
<a href="">content3</a><br/>
</div>
</div>
</div> <script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//页面框架加载完成后执行的函数
$(function () {
$('.title').click(function () {
//当前标签的父标签的其他平级标签的class为body的子标签添加hide
$(this).parent().siblings().children('.body').addClass('hide')
//去掉当前标签的下一个标签的hide
$(this).next().removeClass('hide')
})
})
</script>
</body>
</html>
jquery操作菜单，选中菜单才显示子菜单
【jquery选中不同标签显示不同内容】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js</title>
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.6.3/css/font-awesome.css">
<style>
li{
float: left;
list-style: none;
margin-right: 10px;
}
.current{
background-color: wheat;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="tab-menu-box1">
<div class="menu">
<ul id="tab-menu-title" style="overflow: hidden;">
<li class="current" content-to="1">价格趋势</li>
<li content-to="2">市场分析</li>
<li content-to="3">其他</li>
</ul>
</div> <div id="tab-menu-body" class="content">
<div content="1">content1</div>
<div content="2" class="hide">content2</div>
<div content="3" class="hide">content3</div>
</div>
</div>
</div> <script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//页面框架加载完成后执行的函数
$(function () {
ChangeTab('#tab-menu-title','#tab-menu-body');
}) function ChangeTab(title,body) {
$(title).children().click(function () {
var $menu = $(this);
var contentvalue = $(this).attr('content-to');
var $content = $(body).find('div[content="' + contentvalue + '"]');
$menu.addClass('current').siblings().removeClass('current');
$content.removeClass('hide').siblings().addClass('hide')
})
}
</script>
</body>
</html>
jquery选中不同标签显示不同内容
【jquery使滚动条一直处于底部】
<!--chat-message是标签的class名-->
$('.chat-message').scrollTop($('.chat-message')[0].scrollHeight);
jQuery使用示例详解的更多相关文章
- jquery移除、绑定、触发元素事件使用示例详解
这篇文章主要介绍了jquery移除.绑定.触发元素事件使用示例详解,需要的朋友可以参考下. unbind(type [,data]) //data是要移除的函数 $('#btn').unbind(&q ...
- jQuery 事件用法详解
jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...
- jQuery.ready() 函数详解
jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...
- jQuery extend方法详解
先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...
- jQuery.hasClass() 函数详解
jQuery.hasClass() 函数详解 hasClass()函数用于指示当前jQuery对象所匹配的元素是否含有指定的css类名. 该函数属于jQuery对象(实例). 语法 JavaScrip ...
- jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- jQuery.attr() 函数详解
一,jQuery.attr() 函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...
- gcc与g++的编译链接的示例详解
一.编译方式的示例详解 1. 编译C代码 代码如下:main.c /*! ************************************************************** ...
- 史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
React Native系列 <逻辑性最强的React Native环境搭建与调试> <ReactNative开发工具有这一篇足矣> <解决React Native un ...
随机推荐
- CentOS 6.x 一键安装PPTP VPN脚本
环境 CentOS 6.x 32位/64位XEN/KVM/OpenVZ 步骤 依次运行下列命令 #wget http://www.hi-vps.com/shell/vpn_centos6.sh #ch ...
- js+css3文字模糊代码
在写文字模糊的时候要理清自己的思路,根据以下的步骤来: 对你要模糊的文字进行布局 <body style="background:#ccc;"> <ul clas ...
- JS重要知识点
这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...
- 分布式系统开发的一些相关理论基础——CAP、ACID、BASE
本文主要讲述分布式系统开发的一些相关理论基础. 一.ACID 事务的四个特征: 1.Atomic原子性 事务必须是一个原子的操作序列单元,事务中包含的各项操作在一次执行过程中,要么全部执行成功,要么全 ...
- nginx rewrite 指令last break区别最详细的解释
转自:http://blog.sina.com.cn/s/blog_4f9fc6e10102ux0w.html http://blog.cafeneko.info/2010/10/nginx_rewr ...
- LaTeX自学ing
恩看标题嘛...Xs要自学LaTeX的说! 话说cnblogs不支持插入LaTeX格式的代码的说?..唔~ 嘛...首先是些简单的东西(像是文件的格式啦,作者啦之类的): (注意:\documentc ...
- Different types of keystore in Java Overview
Different types of keystore in Java JKS DKS JCEKS PKCS12 PKCS11 http://www.pixelstech.net/article/14 ...
- 【Windows批处理III】实现删除含自定字符串的文件和文件夹（搜索子目录）
1)目的:实验室小网空间因镜像版本太多,容量告警,希望清出一部分空间 具体需求:删除E盘下,所有含rar字符串的文件: 删除E盘下,所有含hi6620字符串文件夹: 步骤: (风险请知:如果不chec ...
- 【Windows批处理II】类C语言的学习和思考
0)@不显示该行 1)随时删除qq下所有gif文件(a.bat),只要能达到目的死循环也可以: @echo off \Tencent\AD\*.gif del C:\Progra~\Tencent\A ...
- crackme1.exe解密过程
那今天呢 在西普的做题过程中,发现这么一款.exe,我们来破解一下(当然不是简单的强制爆破,不是简单的打补丁) 我们先用PE 看看 它是用什么写的 有没有加壳什么的 很好 是VC6 ...