【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);