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看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套 ...
随机推荐
- ArithUtil工具类 : 精确计算各种运算
package com.autoserve.mh.common.util; import java.math.BigDecimal; import java.text.DecimalFormat; ...
- 获取程序的SHA1值
android获取程序的SHA1值 public static String getSHA1(Context context) { try { PackageInfo info = context.g ...
- C# DataTable分页处理
有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据. public DataTable GetPagedTable(DataTa ...
- 视觉机器学习读书笔记--------SVM方法
SVM是一种二类分类模型,有监督的统计学习方法,能够最小化经验误差和最大化几何边缘,被称为最大间隔分类器,可用于分类和回归分析.支持向量机的学习策略就是间隔最大化,可形式化为一个求解凸二次规划的问题, ...
- outlook2013 更改邮件文件位置
找了许多也是不行, 最后自己来多次试验,原来就是这么容易 ., 1: 先增加你的邮件账号,然后找到数据文件的位置 2: 关闭OUTLOOK 2013,把上一步中的数据文件复制到你要的位置,如D:\ou ...
- 通过代码自定义cell(cell的高度不一致)
- lua coroutine for iterator
背景 前面的文章演示了使用闭包函数实现 状态的迭代器. 本文演示使用 coroutine来产生迭代器的例子. coroutine迭代器例子 -- 遍历二叉树 local binary_tree = { ...
- Python中的浅拷贝 深拷贝
浅拷贝只拷贝父对象,子对象的地址空间不改变,包括下面三种: 1. copy 从下面的例子可以看出对象c从a拷贝,当对象a增加一个列表元素之后,c对象没有改变, 而当对象a中的子列表改变时,对象c的子列 ...
- 暑假CTF训练一
暑假CTF训练一 围在栅栏中的爱 题目: 最近一直在好奇一个问题,QWE到底等不等于ABC? -.- .. --.- .-.. .-- - ..-. -.-. --.- --. -. ... --- ...
- Leetcode: Android Unlock Patterns
Given an Android 3x3 key ≤ m ≤ n ≤ , count the total number of unlock patterns of the Android lock s ...