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 ...
随机推荐
- css实现自适应宽度布局
1.实现左侧宽度固定,右侧全屏自适应. body{margin:0;padding:0} .wrap{ width:100%; float:left} .content{ height:300px;b ...
- 读<jQuery 权威指南>[6]--实用工具函数
官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...
- javascript 特殊的一些知识
基础知识 1.注释/**/ 块注释,与正则表达式有冲突,不安全. 2.js数字类型只有一个,即为64位的浮动值 3.NaN是一个数值,他不能产生正常结果的运算结果.NaN不等于任何值,包括它自己.is ...
- freemarker if elseif
FreeMarker模板 if, else, elseif 指令 : if, else, elseif 语法 <#if condition> ... <#elseif conditi ...
- BZOJ4046 [Cerc2014] Pork barre
我们把边按权值从大到小依次加入图中 如果加到边权$V$,则当前的最小生成森林中边权$v\in[V, V']$(其中$V'$是任意值)形成的森林的边权和就是对于询问$[V, V']$的答案 由于点数不多 ...
- iOS开发UI篇—简单介绍静态单元格的使用
iOS开发UI篇—简单介绍静态单元格的使用 一.实现效果与说明 说明:观察上面的展示效果,可以发现整个界面是由一个tableview来展示的,上面的数据都是固定的,且几乎不会改变. 要完成上面的效果, ...
- iOS开发UI篇—常见的项目文件介绍
iOS开发UI篇—常见的项目文件介绍 一.项目文件结构示意图 二.文件介绍 1.products文件夹:主要用于mac电脑开发的可执行文件,ios开发用不到这个文件 2.frameworks文件夹主要 ...
- having和where的区别
HAVING子句的使用. 例子: SELECT mob_belong_to,user_id,MAX(BIRTH_DATE) FROM user_base_info WHERE sign_in_date ...
- 项目中使用oracle序列
在数据库设计的时候我们可以将表的ID定义为String 然后我们可以使用序列来得到唯一的ID 手写一个mapper: <?xml version="1.0" encoding ...
- 初始化脚本(Os_Init_Optimization.sh)
#!/bin/bash #解压缩startup.tar.gz包 cd /tmp && tar -zxf startup.tar.gz #初始化YUM源 rm -rf /etc/yum. ...