jquery中篇
一、attr
返回属性值
返回被选元素的属性值。
语法
$(selector).attr(attribute)
参数 描述
attribute 规定要获取其值的属性。
属性
• 属性
o attr(name|pro|key,val|fn)
o removeAttr(name)
o prop(n|p|k,v|f)
o removeProp(name)
• CSS 类
o addClass(class|fn)
o removeClass([class|fn])
o toggleClass(class|fn[,sw])
• HTML代码/文本/值
o html([val|fn])
o text([val|fn])
o val([val|fn|arr])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: ;
padding: ;
}
.outer{
width: %;
background-color: grey;
margin: auto;
height: 600px;
}
.menu{
background-color: yellowgreen;
cursor: pointer;
}
.menu li{
display: inline-block;
height: 30px;
line-height: 30px;
}
.content{
background-color: beige;
padding: 50px;
height: auto;
}
.current{
background-color: #d5ddda;
color: red;
}
.hide{
display: none;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<div class="outer">
<ul class="menu">
<li aa="c1" class="current" onclick="tab(this);">菜单一</li>
<li aa="c2" onclick="tab(this);">菜单二</li>
<li aa="c3" onclick="tab(this)">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div> <script>
function tab(self){
// 下面是列式方程，先执行前面的，之后会执行sibing...
$(self).addClass("current").siblings().removeClass("current"); // 通过自定义属性的方式和attr的回调方法，可以使两个不相关联的标签结合
var index=$(self).attr("aa");
// 这里要用字符串拼接的方式来查找id属性
$("#"+index).removeClass("hide").siblings().addClass("hide");
}
</script> </body>
</html>
实例：tab菜单
上面的属性attr和removeAttr在2版本有bug，就是添加属性然后移除然后再添加就添加不上去，建议用prop
二、jquery的循环
，xx.each就是其中一种,这个就是循环体
$.each(xx) 这是第二种循环格式
下面是循环li，然后执行函数，如果函数的参数只有一个，那么这个参数就指代的下标，
如果有两个参数，那么这两参数，一个指代下标，一个是下标对应的值
li=[,,]
$.each(li,function(x,y){
console.log(x,y)
}) ;
// 0 111
// 1 12
// 2 11
正反选实例
这里注意两点：
一、遍历循环的两种方式
二、选择器冒号的方式（有无空格）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正反选</title>
</head>
<body>
<!--<input type="button" value="ll"/>-->
<button onclick="selectAll();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse()">反选</button>
<table>
<tr>
<td><input type="checkbox" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td></td>
</tr>
</table> <script src="jquery.js"></script>
<script>
function selectAll(){
// 注意下面table和冒号之间必须有空格
// 如果要查找后代中元素，就需要和父类中间有空格
// 如果要找自己身上的元素，这个时候和冒号之间就不需要有空格
$("table :checkbox").prop("checked",true);
}
function cancel(){
$("table :checkbox").prop("checked",false);
}
function reverse(){
// 这里的.each就是for循环的一种，这里代表，循环$("table :checkbox"),之后执行下面函数
$("table :checkbox").each(function(){
if($(this).prop("checked")){
$(this).prop("checked",false)
}
else{
$(this).prop("checked",true)
}
}
)
}
实现效果
1、，实现返回顶部，并且监听滚轮滑动距离来显示或者隐藏返回顶部样式
scrollTop不仅仅可以对窗口进行返回顶部，还可以对任意的div都能进行返回顶部
$(.1div).scrollTop(0)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
background-color: yellowgreen;
height: 100px;
width: %;
overflow: auto; }
.div2{
height: 800px;
background-color:aliceblue;
}
.div3{
width: 40px;
height: 40px;
position: fixed;
right: 20px;
bottom: 20px;
background-color: grey;
font-size: 17px;
}
.hide{
display: none;
}
.div4{
width: 30px;
height: 30px;
position: absolute;
top: 70px;
left: %;
background-color: #005f9b;
color: white;
font-size: 3px;
}
</style>
</head>
<body>
<div class="div1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br/>
<p></p>
<p></p>
<p></p>
</div>
<div class="div2"></div>
<div class="div3 hide" onclick="returnTop();">返回顶部</div>
<div class="div4 " onclick="div1r();">返回顶部</div>
<script src="jquery.js"></script>
<script>
window.onscroll=function(){
var index=$(window).scrollTop();
// console.log(index)
if(index>){
$(".div3").removeClass("hide");
}
else{
$(".div3").addClass("hide");
}
};
function returnTop(){
$(window).scrollTop();
}
function div1r(){
var index1=$(".div1").scrollTop();
} </script>
</body>
</html>
三、jquery方法实现滚动文档
jquery中的对象
$(document) 是当前文档，就是你看到的整个网页
$(window) 如果没有框架则就是你浏览的当前浏览器的窗口
将document, window转换为jquery对象 比如转换后可以使用jq的方法
$(document).ready
$(window).resize $接收以下参数：
. 选择器 .class
. 一个元素 document.body
. 一个对象 document, window
， 一个jq对象， 此时是复制一个jq对象
. $() 一个空jq对象。
、这里注意：定义fixed选择器，要从.pg-body往下定义
、$()是jQuery对象的制造工厂，凡是$()包住的东西都转化成jq对象. []是数组的字面量，$([])就是包装成一个jq的数组对象
这里属性要反在$()里面必须用[]，转化成对象 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: ;
}
ul{
margin: ;
}
.wrap{
margin: auto;
}
.logo{
float: left;
padding: 5px 5px 5px 5px;
}
.wrap .logo img{
vertical-align: middle;
height: 100px;
}
.menu{
height: 120px;
width: auto;
background-color: #0099FF;
}
li{
float: left;
}
.menu ul li {
display: block;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
.clearfix:after{
content: ".";
display: block;
height: ;
clear: both;
visibility: hidden;
}
.pg-header .menu{
line-height: 147px;
}
.pg-body .left_menu{
position: absolute;
left: 100px;
width: 180px;
top: 120px;
background-color: grey;
float: left;
}
.pg-body .right_content{
position: absolute;
left: 290px;
right: 200px;
top: 120px;
background-color: palegreen;
float: left;
}
.pg-body .left-item{
height: 50px;
}
.pg-body .right_content .content{
height: 900px;
}
.pg-body .fixed{
position: fixed;
top: 10px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="wrap clearfix">
<div class="logo">
<a href="#">
<img src="11.gif">
</a>
</div>
<div class="menu">
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">功能一</a>
</li>
<li>
<a href="#">功能二</a>
</li>
</ul>
</div>
</div>
</div>
<div class="pg-body">
<div class="wrap">
<div id="menu" class="left_menu">
<div auto-to="function1" class="left-item"><a>第一张</a></div>
<div auto-to="function2" class="left-item"><a>第二张</a></div>
<div auto-to="function3" class="left-item"><a>第三张</a></div>
</div>
<div class="right_content">
<div menu="function1" class="content">第一章</div>
<div menu="function2" class="content">第二章</div>
<div menu="function3" class="content">第三章</div>
</div>
</div>
</div>
<script src="jquery.js"></script>
<script type="text/javascript"></script>
<script>
// 1、让左边的菜单随着滚动漂浮
window.onscroll=function() {
var ws = $(window).scrollTop();
console.log(ws);
if (ws > ) {
$(".left_menu").addClass("fixed")
}
else {
$(".left_menu").removeClass("fixed")
}
// jquery中没有break，只有return
// 3、最后一章节对应的菜单变大，注意这里必须要有return，
if($(document).height()==$(window).height()+ws){
$(".left_menu").children(":last").css("fontSize","40px");
return;
}
// 2、让字体变大
$(".right_content").children().each(function(){
var offset=$(this).offset().top;
var total=$(this).height()+offset;
if(ws>offset && ws<total){
var index=$(this).attr("menu");
var new_index="[auto-to="+index+"]";
console.log(new_index);
$(new_index).css("fontSize","40px").siblings().css("fontSize","15px")
}
})
}
</script>
</body>
</html>
四、关于each的return补充
1、$.each return 和外层函数没有任何关系
2、$.each return false表示each退出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery.js"></script>
<script>
/*
这里需要注意点：
1、each里面的return和外部函数没有任何关系
2、each里面的内层函数的return false才表示结束，其他的只是把返回值传递给each
下面的执行顺序：
依次执行，然后但k等于1的时候的返回值，会返回给each里面的函数
*/
function f1(){
var li=[,,];
$.each(li,function(k,v){
console.log(k,v);
if(k==){
return false
} });
console.log("end");
}
f1(); /*
下面就是return返回的数值返回给myeach函数，然后执行
*/
function myeach(obj,func){
for(var i=;i<obj.length;i++){
var current=obj[i];
var ret=func(i,current);
if(ret=="xxoo"){
break
}
}
}
var li=[,,];
myeach(li,function(k,v){
console.log(k,v);
return "xxoo";
})
</script> </body>
</html>
五、jquery文档处理
$(document).ready(function(){}) -----------> $(function(){})
上面函数：先等待文档数据加载完毕之后再执行函数
应用：网站页面质量分析，上面的是页面框架等加载完毕之后就会执行里面的函数
下面是window.onload和$(document).ready()-->$(function(){})的区别
.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。
.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.js"></script>
<script>
$(function(){
// $("li").click(function(){
// alert("123")
// });
$("ul").delegate("li","click",function(){
alert("")
});
$("button").click(function(){
$("ul").append("<li>666</li>")
})
})
</script>
</head>
<body> <ul>
<li></li>
<li></li>
</ul>
<button>add</button> </body>
</html>
六、扩展
jquery五种方法
一、查找
二、操作
三、事件
四、扩展
五、ajax
需要必须记忆的：
1、 选择器：
a) 基本选择器
b) 层级选择器
c) 属性选择器
d) 其他的过一遍
2、 筛选器
a) hasclass
b) children
c) find
d) next
e) nextAll
f) nextUntil
g) parent
h) parents
i) prev
j) prevall
k) prevUntil
l) sibings3、
3、
属性
· 属性
· CSS 类
· HTML代码/文本/值
4、 css里面过一遍
5、 文档处理
6、效果
each的两种方法：
$.each([11,22,33].function(x,y){
0})
$(“li”).each(function(){}
$(this)
)
jquery五种方法
一、查找
二、操作
三、事件
四、扩展
五、ajax
需要必须记忆的：
1、 选择器：
a) 基本选择器
b) 层级选择器
c) 属性选择器
d) 其他的过一遍
2、 筛选器
a) hasclass
b) children
c) find
d) next
e) nextAll
f) nextUntil
g) parent
h) parents
i) prev
j) prevall
k) prevUntil
l) sibings3、
3、
属性
· 属性
· CSS 类
· HTML代码/文本/值
4、 css里面过一遍
5、 文档处理
each的两种方法：
$.each([11,22,33].function(x,y){
0})
$(“li”).each(function(){}
$(this)
)
jquery中篇的更多相关文章
- jQuery回调、递延对象总结（中篇) —— 神奇的then方法
前言: 什么叫做递延对象,生成一个递延对象只需调用jQuery.Deferred函数,deferred这个单词译为延期,推迟,即延迟的意思,那么在jQuery中 又是如何表达延迟的呢,从递延对象中的t ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十九】
<Web 前端开发精华文章推荐>2013年第七期(总第十九期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- jQuery回调、递延对象总结（下篇) —— 解密jQuery.when方法
前言: 前一篇文章中重点总结了一下then方法,它主要用来处理多个异步任务按顺序执行,即前一个任务处理完了,再继续下一个,以此类推: 而这一章节jQuery.when方法也是处理多个异步任务,它把多个 ...
- jQuery回调、递延对象总结（上篇）—— jQuery.Callbacks
前言: 作为参数传递给另一个函数执行的函数我们称为回调函数,那么该回调又是否是异步的呢,何谓异步,如:作为事件处理器,或作为参数传递给 (setTimeout,setInterval)这样的异步函数, ...
- jQuery回调、递延对象总结
jQuery回调.递延对象总结(上篇)—— jQuery.Callbacks jQuery回调.递延对象总结(中篇) —— 神奇的then方法 jQuery回调.递延对象总结(下篇) —— 解密jQu ...
- Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
- jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
- Jquery的点击事件，三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
随机推荐
- mysql负载飙高原因分析
某些进程/服务消耗更多CPU资源(服务响应更多请求或存在某些应用瓶颈):发生比较严重的swap(可用物理内存不足):发生比较严重的中断(因为SSD或网络的原因发生中断):磁盘I/O比较慢(会导致CPU ...
- WebStorm初次使用
1. ctrl + / : 单行注释2. ctrl + shift + / : 块注释 3:展开当前函数代码:Ctrl+“+”,收起当前代码:Ctrl+“-” 4:全局查找: Ctrl+Shift+F ...
- IOS开发——Core Graphics & Core Animation
好久没写过blog了.首先了解下近期苹果和IOS方面的最新消息. 1.WWDC2014在上个月举行了,与2013年一样.今年WWDC没公布硬件产品和新品(假设你懂cook你就会期待今年秋季公布会.估计 ...
- maven的一些基础命令
1.显示当前构建的实际pom,包括活动的Profile mvn help:effective-pom 2.打印出项目的世界settings,包含从全局的settings和用户级别settings继承的 ...
- 挖一挖C#中那些我们不经常使用的东西之系列（4）——GetHashCode，ExpandoObject
一:GetHashCode 从MSDN上能够看到的解释是:用作特定类型的哈希函数,也就是说不论什么对象的实例都会有一个int32类型的HashCode.而且存放在FCL中的 HashCollectio ...
- Spring Boot从入门到实战：整合通用Mapper简化单表操作
数据库访问是web应用必不可少的部分.现今最常用的数据库ORM框架有Hibernate与Mybatis,Hibernate貌似在传统IT企业用的较多,而Mybatis则在互联网企业应用较多.通用Map ...
- xcode下载低版本模拟器速度缓慢解决方案
随着苹果系统的更新和迭代,现在app开发中需要适配的除了需要适配屏幕尺寸以外,还需要适配系统版本.系统版本测试如果有条件可以使用各种系统版本的真机进行适配,如果没有这个条件,也可以采用xcode的模拟 ...
- 【数据挖掘】聚类之k-means（转载）
[数据挖掘]聚类之k-means 1.算法简述 分类是指分类器(classifier)根据已标注类别的训练集,通过训练可以对未知类别的样本进行分类.分类被称为监督学习(supervised learn ...
- 把flask部署到服务器
1.新建一个wsgi.py文件 # -*- coding:utf-8 -*- import sys from os.path import abspath from os.path import di ...
- Android调用相机实现拍照并裁剪图片，调用手机中的相冊图片并裁剪图片
在 Android应用中,非常多时候我们须要实现上传图片,或者直接调用手机上的拍照功能拍照处理然后直接显示并上传功能,以下将讲述调用相机拍照处理图片然后显示和调用手机相冊中的图片处理然后显示的功能,要 ...