jQuery基本操作
jQuery简介
jQuery是一个兼容多浏览器的javascript库，极大地简化了 JavaScript 编程,核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。
jQuery 库特性：
1、选择器
<div class="dd"></div>
<div id="demo">
<p>Hello Word</p>
</div>
基本选择器
1、id选择器
$("#demo") //选取 id="demo" 的元素
2、标签选择器
$("p") //选取所有 <p> 元素
3、class选择器
$(".dd") //选取所有 class="dd" 的元素
4、*
$("*") //匹配所有元素
其他
$(".dd,#demo,p") //匹配多个元素
$("#demo p") //匹配id="demo" 下的 p 元素
基本筛选器
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$("li:first") //获取第一个元素
$("li:last ") //获取最后一个元素
$("li:eq(1)") //获取索引值为1的元素
$("li:gt(1)") //获取大于该索引的元素
$("li:lt(1)") //获取大于该索引的元素
$("li:even") //匹配所有索引值为偶数的元素，从 0 开始计数
$("li:odd ") //匹配奇数
属性
1、[attribute]
$("div[id]"); 查找所有含有id属性的div元素
2、[attribute=value]
<input type="checkbox" name="checkname" value="name1" />
<input type="checkbox" name="checkname" value="name2" />
<input type="checkbox" name="demo" value="name3" />
$("input[name='checkname']"); 查找所有 name 属性是 checkname 的 input 元素
3、[attribute!=value] 不等于
4、[attribute^=value]
$("input[name^='news']") 查找所有 name 以 'news' 开始的 input 元素
[attribute$=value] 以什么结尾
[attribute*=value] 包含某些值
表单
1、$(":input") 查找所有input标签
2、$(":text") 查找所有input下type=text的标签（ 等于$("input[type='text']") ）
:password :radio :checkbox :submit :image :reset :button :file 同上
2、筛选（过滤、查找）
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
过滤（常用）：
1、$("li").first() 获取第一个元素
2、$("li").last() 获取最后一个元素
3、$("li").eq(1) 根据索引获取
4、$(this).hasClass("demo") 查看是否有class=demo的元素，返回true或false
5、map（callback）
<script>
//map会循环多个标签中的每一个标签，每一个标签被循环时都会执行map内部的函数并获取返回值，
//并将所有返回值封装到一个数组中返回
var list=$("li").siblings().map(function(){ return $(this).text();//this这里就是当前循环标签
});
</script>
查找（常用）：
1、children()
$("div").children() 查找DIV中的每个子元素
2、find()
$("p").find("span") 从p下面的所有元素中去找span标签
3、next() 下一个元素
4、nextAll() 当前元素之后的所有同级别元素
5、nextUntil() 查找什么之后 直到 什么之前的元素
$("#term-1").nextUntil("#term-2").css("color", "green"); 给#term-1后面直到"#term-2前的元素加上红色背景
<dl>
<dt id="term-1">term 1</dt>
<dd>definition 1-a</dd>
<dd>definition 1-b</dd>
<dd>definition 1-c</dd> <dt id="term-2">term 2</dt>
<dd>definition 2-a</dd>
<dd>definition 2-b</dd>
</dl>
6、prev()、prevall()、prevUntil() 往上找、类似next
7、parent() 查找父元素 parents() 查找所有祖先 parentsUntil() 一直找祖先，直到找到规定元素为止
8、siblings() 查找所有兄弟姐妹的元素
3、属性
css
addClass() //为每个匹配的元素添加类名 removeClass() //为每个匹配的元素删除指定类 toggleClass() //如果存在就删除这个类，不存在就添加这个类
HTML代码/文本/值
html()
$('p').html(); //获取p元素的内容
$("p").html("Hello <b>world</b>!"); //设置p元素的内容
text()
$('p').text(); //获取p元素的文本内容（只获取文本）
$("p").text("Hello world!"); //设置p元素的文本内容
val()
$("input").val(); //获取文本框中的值
$("input").val("hello world!"); //设置文本框中的值
属性
attr() 设置或返回被选元素的属性值。
$("img").attr("src"); //获取所有图像的src属性值。
$("img").attr("src","test.jpg"); //设置属性
removeAttr(name) 删除一个属性
$("img").removeAttr("src"); //删除src属性
prop()
$("input[type='checkbox']").prop("checked"); //选中复选框为true，没选中为false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="反选" onclick="CheckReverse()">
<input type="button" value="取消全选" onclick="CheckCancel()">
</div> <div id='checklist'>
<input type='checkbox' value='1'/>选择一
<input type='checkbox' value='2'/>选择二
<input type='checkbox' value='3'/>选择三
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function CheckAll(){
//$("#checklist").find(":checkbox").attr("checked","checked");
$("#checklist").find(":checkbox").prop("checked",true);
}
function CheckReverse(){
$("#checklist").find(":checkbox").each(function(){
if ($(this).prop("checked")){
$(this).prop("checked",false);
}else {
$(this).prop("checked",true);
}
})
}
function CheckCancel(){
//$("#checklist").find(":checkbox").removeAttr("checked");
$("#checklist").find(":checkbox").prop("checked",false);
}
</script>
</body>
</html>
多选反选实例
4、CSS
CSS
css() 访问匹配元素的样式属性。
$("p").css("color"); //获取
$("p").css("color","red"); //设置
$("p").css({ "color": "red", "background": "blue" }); //支持字典设置
位置
offset() 获取匹配元素在当前视口的相对偏移。
<p>Hello</p>
<p>Hello Word</p>
var obj=$("p:eq(1)");
var obj_top = obj.offset().top;
var obj_left = obj.offset().left;
console.log(obj_top,obj_left)
position() 获取匹配元素相对父元素的偏移
scrollTop() 获取匹配元素相对滚动条顶部的偏移
$(window).scrollTop(0); //设置为0,返回顶部
scrollLeft()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
bottom: 0px;
right: 0px;
}
.hide{
display: none;
}
</style>
</head>
<body> <div style="height: 2000px;"></div>
<div onclick="GoTop()" class="back hide">返回顶部</div> <script src="jquery-2.2.3.js"></script>
<script type="text/javascript"> function GoTop(){
//返回顶部
$(window).scrollTop(0);
} $(function(){
$(window).scroll(function(){
//当滚动滑轮时，执行函数体 //获取当前滑轮滚动的高度
var top = $(window).scrollTop(); if(top>100){
//展示“返回顶部”
$('.back').removeClass('hide');
}else{
//隐藏“返回顶部”
$('.back').addClass('hide');
}
});
});
</script> </body>
</html>
返回顶部实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.float_left{
float: left;
}
.leftdiv{
position:fixed;
width: 300px;
height:100px;left:0px;top:0px;
}
.rightdiv{
margin-left: 300px;
}
.color{
background-color: red;
}
</style>
</head>
<body>
<div id="skip" class="float_left leftdiv">
<p>第一章</p>
<p>第二章</p>
<p>第三章</p>
</div> <div class="float_left rightdiv">
<div class="chap" style="height: 500px">
<h1>第一章</h1>
</div>
<div class="chap" style="height: 1000px">
<h1>第二章</h1>
</div>
<div class="chap" style="height: 50px">
<h1>第三章</h1>
</div>
</div> <script src="jquery-2.2.3.js"></script>
<script>
$(function(){
$(window).scroll(function(){
var scroll_top = $(window).scrollTop();//滚动的长度
var li = [];
$.each($(".chap"),function(i){
var current_height=$($(".chap")[i]).offset().top;//把所有章节的高度放入列表
li.push(current_height);
});
$.each(li,function(i){
if(scroll_top+$(window).height() == $(document).height()){ //如果滚动到底部
$($("#skip").children().last()).addClass("color");
$($($("#skip").children().last()).siblings()).removeClass("color");
}
if(scroll_top>li[i]){
$($("#skip").children().eq(i)).addClass("color");
$($($("#skip").children().eq(i)).siblings()).removeClass("color");
}
})
})
})
</script> </body>
</html>
滚动条实例
尺寸
height() //元素当前的高度
innerHeight() //元素内部区域高度
outerHeight() //元素外部区域高度 width() //元素当前的宽度
innerWidth() //元素内部区域宽度
outerWidth() //元素外部区域宽度
5、文档处理
内部插入
append() 像匹配元素内部结尾处插入内容
appendTo() 把所有匹配的元素追加到另一个指定的元素的元素集合中。
$("#aa").prependTo("#foo"); //把#aa匹配的元素前置到#foo匹配的标签中
prepend() 像匹配元素内部开始处插入内容
prependTo() 把所有匹配的元素前置到另一个指定的元素的元素集合中。
外部插入
after() 在每个匹配元素之后插入内容
before() 在每个匹配元素之前插入内容
insertAfter() 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
insertBefore() 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
包裹
wrap() 把所有匹配的元素用其他元素的结构化标记包裹起来。
//把所有p标签用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>"); //用ID是"content"的div将每一个段落包裹起来
$("p").wrap($("#content");
unwrap() 移出元素的父元素。这能快速取消 .wrap()方法的效果
替换
replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素。
//把所有p标签换成指定div
$("p").replaceWith("<div>111</div>");
replaceAll(selector)
//把所有p标签替换成指定的div
$("<div>111</div>").replaceAll("p");
删除
empty() 删除匹配的元素集合中所有的子元素
remove() 删除匹配的元素
复制
clone() 复制并且选中这些克隆的副本
//复制id=demo的元素并前置到所有段落中
$("#demo").clone().prependTo("p");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="search">
<div class="condition">
<a onclick="AddCondition(this,'#search')"> + </a>
<input />
</div>
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function AddCondition(ths,search){
//复制condition所在div
var cop=$(ths).parent().clone();
//修改复制标签的内容
cop.children(':first').text('-').attr("onclick","RemoveCondition(this,'#search')");
//添加标签
cop.appendTo("#search")
}
function RemoveCondition(ths,search){
//移除标签
$(ths).parent().remove();
} </script>
</body>
</html>
添加删除标签实例
6、事件
ready() 在DOM加载完成时绑定一个要执行的函数。
$(document).ready(function(){
// 执行代码
});
//或
$(function(){
// 执行代码
});
bind() 为每个匹配元素的特定事件绑定事件处理函数。
$("p").bind("click", function(){
alert( $(this).text() );
});
//或
$("p").click（function(){
alert( $(this).text() );
});
unbind() 移除bind事件
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // 当点击段落的时候触发 foo
$("p").unbind("click", foo); //再也不会触发 foo
delegate() 事件适用于处理程序当前或未来的元素（比如由脚本创建的新元素）。
和bind区别：bind是绑定了在执行，delegate是要执行时在去绑定
undelegate() 移除
one() 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
$("p").one("click", function(){
alert( $(this).text() );
});
具体事件相关：http://www.php100.com/manual/jquery/
7、ajax
普通本域ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id="n1" name="name" />
<input type="button" value="提交" onclick="SubmitData();"/> <script src="jquery-2.2.3.js"></script>
<script>
function SubmitData(){
// 获取值
var inpVal = $('#n1').val();
var inpName = $('#n1').attr('name'); $.ajax({
url: "http://127.0.0.1:8000/index/",
data: {'kk': 123, inpName: inpVal},
type: 'POST',
success: function(arg){
// 当请求执行完成之后，自动调用
// arg:服务器返回的数据
console.log(arg);
},
error: function(){
// 当请求错误之后，自动调用
}
})
}
</script>
</body>
</html>
跨域ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="获取节目" onclick="SubmitData();"/>
<div id="container">
</div>
<script src="jquery-2.2.3.js"></script>
<script>
function SubmitData(){
// 获取值
$.ajax({
url: "",//
data: {},
type: 'GET',
dataType: 'jsonp',//发送格式
//callback和list相当于指定要发送的key和value，之后callback用来获取封装在list中的数据
jsonp: 'callback',
jsonpCallback: 'list',
success: function(arg){
console.log(arg);
// arg,服务器返回的数据
},
error: function(){
// 当请求错误之后，自动调用
}
})
}
</script>
</body>
</html>
ajax_jsonp
比如后端返回的数据格式：return HttpResponse("list("+json.dumps({"aa":11})+")")
更多ajax相关：点击
8、扩展方法
jQuery.extend(object) 扩展jQuery对象本身，在jQuery命名空间上增加新函数
增加函数
//自定义一个方法aaa
$.extend({
"aaa":function(){
return 123456;
}
});
var result= $.aaa();
console.log(result);
自执行函数写法
(function(jQuery){
jQuery.extend({
"aaa":function(arg){
return arg;
}
})
})(jQuery);
console.log($.aaa("Hello"));
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top; $(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px'); })
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script> </body>
</html>
拖动面板实例
图片轮播：http://bxslider.com
更多图标：http://fontawesome.io
更多相关：http://www.php100.com/manual/jquery/
jQuery基本操作的更多相关文章
- 跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作
一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left ...
- jquery基本操作笔记
来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...
- jQuery基本操作以及与js的一些比较
jQuery和js主要区别在DOM操作 用jQuery必须先引进jQuery.js文件 js和jQuery写在哪: 1.标签里面 常用就是方法调用 2.写在script标签里面 3.js文件 dom操 ...
- <day005>jQuery事件、文档基本操作 + 点赞事件
任务1: jQuery的基本操作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
- jQuery基本知识
jquery基本操作笔记 jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('background','red'); $(".box").c ...
- Jquery Table 的基本操作
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...
- （17）什么是jQuery（jq的流程和基本操作）
jQuery就是对原生js二次封装的工具类(在jq叫构造函数) jQuery就是一堆方法的集合,jq对象就可以直接调用这些方法来完成指定的需求 使用jq的流程: 1.在HTML页面倒入jq.js文件 ...
- jquery 的一些基本操作
日常使用中的操作记录,持续更新中: ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
- Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套 ...
随机推荐
- laravel 获取 当前url 的方法， 有的是获取 全部url 有的只获取 主页其他 部分
1. 使用 Request 类: $url = Request::getRequestUri(); 2. 使用 $request 对象: public function show(Request $r ...
- GAME AI Pro 1 第1章
和钱康来合作翻译的AI PRO 1和2 系列,计划是一周一篇,先捡着有意思的翻,对那篇有兴趣也可以留言给我优先翻译,希望都翻译好后有机会成书吧,有兴趣一起翻译的也可以联系我. 游戏人工智能是什么( W ...
- MyBatis学习总结(六)——调用存储过程（转载）
本文转载自:http://www.cnblogs.com/jpf-java/p/6013518.html 一.提出需求 查询得到男性或女性的数量, 如果传入的是0就女性否则是男性 二.准备数据库表和存 ...
- js window.onload 的一个验证
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. 以下验证是否是图片加载完成后才执行 <img class="icon" id="ic ...
- MySql连接Visual studio Code First插件
到mySql官网Downloads==> MySQL on Windows==>MySQL for Visual Studio 下载插件安装即可
- 一个简单的js实现倒计时函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- shell常用命令归类整理
shell 命令整理 bash shell 含有许多功能,因此有许多可用的命令:本文档仅罗列了一些常用命令及其使用频率较高的参数.#本文档仅罗列了一些常用命令及其使用频率较高的参数.#vers ...
- 中英文维基百科语料上的Word2Vec实验
最近试了一下Word2Vec, GloVe 以及对应的python版本 gensim word2vec 和 python-glove,就有心在一个更大规模的语料上测试一下,自然而然维基百科的语料进入了 ...
- SSIS2012 项目部署模型
SSIS 2012 支持两种部署模型:项目部署模型和包部署模型. 使用项目部署模型可以将项目部署到 Integration Services 服务器,使用包部署模型可以将单独的包部署到Integrat ...
- leetcode bugfree note
463. Island Perimeterhttps://leetcode.com/problems/island-perimeter/就是逐一遍历所有的cell,用分离的cell总的的边数减去重叠的 ...