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 ...
随机推荐
- json 解析 真是一篇让我泪流满面的好文章
http://my.eoe.cn/iceskysl/archive/19629.html点击打开链接
- 无障碍网页设计（WCAG2.0）
无障碍化是指无论健全人还是残疾人,年轻人还是老年人都可以平等地获取互联网上的信息和服务.无障碍化网站建设不单可以增加网站的受益群体,更是一个有情怀.有担当的互联网企业的责任,也是一个互联网从业人员应该 ...
- Cisco IOS IP Service Level Agreementv (IP SLA)
Responder and Control Protocol 1.Responder内嵌在思科目标路由器中的一个组件,用来对IP SLA请求包做应答,通过对应达包添加时间戳属性,以提高测量计算的准确性 ...
- google应用商店的解决
{ "enabled_plugins": [ "SimpleReloadPlugin", "SimpleRefresh" ] } git c ...
- 介绍开源的.net通信框架NetworkComms框架之一 首字节验证
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 开源地 ...
- Java 并发和多线程(二) 多线程的优点 [转]
原文:http://tutorials.jenkov.com/java-concurrency/benefits.html 作者:Jakob Jenkov 翻译:古圣昌 ...
- sublime text3安装相关知识粗略整理
1.注册码 网上去搜最新的比较好,因为旧的很可能都用不了,所以把注册码记下来也没必要. 2.安装Package Control ctrl+`,弹出打开控制台,输入代码后回车安装 import url ...
- Windows 通用应用尝试开发 “51单片机汇编”第二次更新总结
一.前言 昨天更新了10天前上架到windows8.1平台和windowsphone平台的通用应用“51单片机汇编”,总要是添加了动态磁贴以及ListView的Groupstyle应用.下面主要主要复 ...
- [CQOI 2014] 数三角形 & 机械排序臂
数三角形 bzoj 3505 要知道一个公式就是(a,b)和(x,y)两点所成线段上面的整点数是gcd(a-x,b-y)-1,通过枚举原点到map上任意一点所能成的三角形,再平移,得到要去掉的三点共线 ...
- 在 Apache error_log 中看到多个信息，提示 RSA server certificate CommonName (CN) 与服务器名不匹配(转)
在 Apache error_log 中看到多个信息,提示 RSA server certificate CommonName (CN) 与服务器名不匹配. Article ID: 1500, cre ...