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 ...
随机推荐
- iOS开发Swift篇—（三）字符串和数据类型
iOS开发Swift篇—(三)字符串和数据类型 一.字符串 字符串是String类型的数据,用双引号""包住文字内容 let website = "http://www ...
- .htaccess设置自定义出错页面
404错误可以这么写 ErrorDocument code error.php 如果是404错误,跳到文件error.php 其他常用错误页面写法(其中404错误有2种写法,上面一种,下面是通用错误定 ...
- Adaboost 2
本文不定期更新.原创文章,转载请注明出处,谢谢. Adaboost是一种迭代算法,其核心思想是针对同一个训练集训练不同的分类器(弱分类器),然后把这些弱分类器集合起来,构成一个更强的最终分类器(强分类 ...
- Steganography－图片隐写术
今天做DAM的作业,做到图片水印的时候,想起来当初小调同学把言页之庭的种子通过图片发给我.看到下面这个新闻真是觉得碉堡了!!技术宅又一次可以成功而隐晦的表白了!!哈哈哈!! http://war.16 ...
- mysql主从复制配置（精简版）
一.首先准备两台服务器,虚拟机即可,以笔者为例:master:192.168.1.105 slave:192.168.1.106 二.保证两台虚拟机能相互ping通,先把防火墙关闭:service i ...
- 初学web开发——怎么解决无法找到路径的问题
刚刚接触web开发一个月,在接手项目时,总会出项无法找到改路径的问题, 那么,这个是什么原因造成的呢?因为我现在使用的是MVC架构,大部分的原因是在View里创建了视图,但是并未在controller ...
- 模仿MFC封装Windows API
.... 最后添加了两个按钮,分别处理每个按钮的单击事件时,走了弯路,本来想的是在QButton中重写OnLButtonDown方法,但是,无法区分是那个按钮.参考这篇文章: http://zhida ...
- 团队开发——冲刺2.a
冲刺阶段二(第一天) 1.今天准备做什么? 收集游戏图片:开始.暂停.继续.重新开始.退出……为了界面的后期美工做准备. 2.遇到什么困难? 网上的图片很多,但是比较难找到统一风格的.
- LINK : fatal error LNK1117: syntax error in option 'VERSION:1.6.5'
今天在用vs2015编译ogre 1.6.5的代码时发生连接错误 LINK : fatal error LNK1117: syntax error in option 'VERSION:1.6.5'. ...
- hmtl的标签属性
html标签< <marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑 ...