jQuery的基本操作
（1）遍历键值对和数组
var arr = [, , , , , ];
$.map(arr, function (ele, index) {
alert(ele + '===' + index); //第一个参数是数组里面的值，第二个参数是索引
})
//=========================================//
var keyWord = { "name": "老牛", "age": , "gender": "男" };
for (var key in keyWord) {
alert(key + '====' + keyWord[key]);
}
$.each(keyWord, function (k, v) {
alert(k + '===' + v);
alert(k);
if (k == 'age') {
return false; //break在这里面不能用，jQuery里面封装的就是判断是false再break，直接给他break他不认
}
});
//========================================//
var arr = [, , , , ];
$.each(arr, function myfunction(k, v) {//
//alert(k+'=='+v);
if (k > ) {
return false;
} else {
alert(v)
}
})
//$.map方法可以遍历数组，偶尔可以便利键值对，但是一般不用
//$.each方法可以遍历键值对还有数组，通常我们用它来遍历键值对
（2）jQuery方法获取对象
$(function () {
$('#btn').click(function () {//ID 选择器
alert($(this).val());
});
$('input').click(function () {//标签选择器
$(this).val('这是按钮');
});
$('#btn').click(function () {//jquery里面隐式迭代所以不需要循环
$('p').text('我们都是P');
$('.cls').css('backgroundColor', 'red'); //类选择器，可以获得写好的css
});
})
（3）jQuery中的各种选择器
$(function () {
$('#btn').click(function () {
$('div span').css('backgroundColor', 'red'); //获得层中所有的span
$('div>span').css('backgroundColor', 'red'); //获得层中所有直接的span
$('div+span').css('backgroundColor', 'red'); //获得层下面的一个span
$('div~span').css('backgroundColor', 'red'); //获得层下面的所有span
$('*').css('backgroundColor', 'red');
});
});
//===========================//
$(function () {
$('div.cls').css('backgroundColor','blue');//标签加类选择器
$('div,input,#btn').css('backgroundColor','orange');//可以用逗号隔开一次选择多个
});
//============================//
$(function () {
$('#btn').click(function () {
//下面是几个获取兄弟元素的方法 注意是！！方法！！
$('div').next().css('backgroundColor', 'red'); //获取当前元素紧邻的下一个元素，相当于div+
$('div').nextAll().css('backgroundColor', 'red'); //获取当前元素紧邻着的所有元素，相当于div~
$('div').prev().css('backgroundColor', 'red'); //获取当前元素紧邻的上一个元素
$('div').prevAll().css('backgroundColor', 'red'); //获取当前元素上的紧邻的所有元素
$('div').siblings().css('backgroundColor', 'red'); //获取当前元素的所有兄弟元素
});
});
//==============================//
$(function () {
$('#btn').click(function () {
$('div:first').css('backgroundColor', 'blue'); //获取第一个或者最后一个，推荐用first（）.这样的形式，有智能提示不容易写错
$('div').first().css('backgroundColor', 'blue');
$('div').last().css('backgroundColor', 'blue');
$('div:last').css('backgroundColor', 'blue');
$('div:even').css('backgroundColor', 'blue'); //偶数索引
$('div:odd').css('backgroundColor', 'blue'); //奇数索引
});
});
（4）元素each 的案例
$(function () {
//获取被选中的所有的checkbox
$('#dv input[type=checkbox]').click(function () {//click（） 而不是click= 注意jQuery和DOM是有区别的
var cks = $('#dv :checked');
//获取length 并保存起来
var len = cks.length;
var arr = [];
// 遍历所有chenckbox
cks.each(function (k, v) {//这里k表示索引 v表示元素对象
// 把val的值保存起来
arr[arr.length] = $(v).val();
});
//把内容显示到p标签里面
$('#msgName').text('一共选中了' + arr.length + ',分别是' + arr);
});
});
（5）jQuery的DOM操作
1、使用html()方法读取或者设置元素的innerHTML：
alert($("a:first").html());//innerHTML
$("a:first").html("hello");
2、使用text()方法读取或者设置元素的innerText：
alert($("a:first").text());
$("a:first").text("hello");
3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($("a:first").attr("href"));
$("a:first").attr("href", "http://www.baidu.com");
attr({‘key’:’value’,’k’:’v’});
4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)
案例一
$(function () {
var dic = { "imgs/11.png": "imgs/1.png", "imgs/22.png": "imgs/2.png", "imgs/33.png": "imgs/3.png" };
for (var key in dic) {
var liObj = $('<li></li>');
var imgObj = $('<img src="' + key + '"/>').appendTo(liObj);
liObj.appendTo($('#uu'));
imgObj.mouseover(function () {
$('#dvImg').empty();
var img = $('<img src="' + dic[$(this).attr('src')] + '" />');//这里直接用dic[key] 只能取到一个值所以用$(this).attr('src')
img.appendTo($('#dvImg'));
});
};
});
综合案例：qq微博
css 的代码已经被删除了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>腾讯微博</title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$.fn.selectRange = function (start, end) {
var curObj = $(this).get();
if (!curObj) return;
else if (curObj.setSelectionRange) {
curObj.focus(); curObj.setSelectionRange(start, end);
} /* WebKit */
else if (curObj.createTextRange) {
var range = curObj.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
} /* IE */
else if (curObj.selectionStart) {
curObj.selectionStart = start;
curObj.selectionEnd = end;
}
}; $(function () {
//第一步 按钮的高亮显示
$('#sendBox .sendBtn').mouseover(function () {
$(this).css('backgroundPosition', '0px -195px');
}).mouseout(function () {
$(this).css('backgroundPosition', '-117px -165px');
});
//第二步 话题的高亮显示
$('#funBox .creatNew').click(function () {
if ($('#msgTxt').text().length == ) {
$('#msgTxt').text('#输入话题标题#').selectRange(, );
}
});
//第三步 计算文本框的字数
$('#msgTxt').change(function () {
var len = - $('#msgTxt').text().length;
if (len > ) {
$('#sendBox span').html('还能输入<em><font size="5" color="red">' + len + '</font></em>个字');
} else {
$('#sendBox span').html('已经超出了<em><font size="9" color="red">' + Math.abs(len) + '</font></em>个字');
}
});
//计时器
setInterval(function () {
$('#msgTxt').change();
}, );
//第四部 显示朋友圈
$('#funBox .atSome').click(function () {
var friendsList = ['凤姐', '黑山', 'gay', '郭德纲', '老杨', '老苏', '老蒋', '老牛', '老王', '老虎', '老马'];
if ($('#dv').length == ) {
//创建层
var dvFriend = $('<div id="dv" style="width:100px;border:1px solid blue;background-color:white;position:absolute"></div>').appendTo('body');
//设置层的位置
var xdv = $(this).offset().left + 'px';
var ydv = $(this).offset().top + $(this).height(); +'px';
$(dvFriend).css({ "left": xdv, "top": ydv });
//创建span标签并且添加到层中，点击关闭
$('<span style="background-color:gray;float:right;cursor:pointer;">关闭</span>').click(function () {
$(this).parent().remove(); //这里注意this是的是这个span标签 他的parent标签就是这个div
}).appendTo($('#dv'));
//添加朋友 创建列表
var ulObj = $('<ul style="clear:both;list-style-type:none;margin:0;padding:0;cursor:pointer;"></ul>').appendTo(dvFriend);
for (var i = ; i < friendsList.length; i++) {
$('<li>@' + friendsList[i] + '</li>').mouseover(function () {
$(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', '');
}).click(function () {
if ($('#msgTxt').text() == '#输入话题标题#') {
$('#msgTxt').text($(this).text());
} else {
$('#msgTxt').text($('#msgTxt').text() + $(this).text());
}
}).appendTo(ulObj);
}
}
});
//========================================================================================================
var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '发呆', '4.gif': '得意', '5.gif': '流泪', '6.gif': '害羞', '7.gif': '闭嘴',
'8.gif': '睡', '9.gif': '大哭', '10.gif': '尴尬', '11.gif': '发怒', '12.gif': '调皮', '13.gif': '呲牙', '14.gif': '惊讶', '15.gif': '难过', '16.gif': '酷',
'17.gif': '冷汗', '18.gif': '抓狂', '19.gif': '吐', '20.gif': '偷笑', '21.gif': '可爱', '22.gif': '白眼', '23.gif': '傲慢', '24.gif': '饥饿', '25.gif': '困',
'26.gif': '惊恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奋斗', '31.gif': '咒骂', '32.gif': '疑问', '33.gif': '嘘', '34.gif': '晕',
'35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髅', '38.gif': '敲打', '39.gif': '再见', '40.gif': '擦汗', '41.gif': '抠鼻', '42.gif': '鼓掌', '43.gif': '糗大了',
'44.gif': '坏笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', '48.gif': '鄙视', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '阴险',
'52.gif': '亲亲', '53.gif': '吓', '54.gif': '可怜', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '篮球 ', '59.gif': '乒乓', '60.gif': '咖啡',
'61.gif': '饭', '62.gif': '猪头', '63.gif': '玫瑰', '64.gif': '凋谢', '65.gif': '示爱', '66.gif': '爱心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '闪电',
'70.gif': '炸弹', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢虫', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太阳', '77.gif': '礼物', '78.gif': '拥抱',
'79.gif': '强', '80.gif': '弱', '81.gif': '握手', '82.gif': '胜利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳头', '86.gif': '差劲', '87.gif': '爱你',
'88.gif': 'NO', '89.gif': 'OK', '90.gif': '爱情', '91.gif': '飞吻', '92.gif': '跳跳', '93.gif': '发抖', '94.gif': '怄火', '95.gif': '转圈', '96.gif': '磕头',
'97.gif': '回头', '98.gif': '跳绳', '99.gif': '挥手', '100.gif': '激动', '101.gif': '街舞', '102.gif': '献吻', '103.gif': '左太极', '104.gif': '右太极',
'105.gif': '淡定', '106.gif': '晕', '107.gif': '不满', '108.gif': '睡觉', '109.gif': '小调皮', '110.gif': '咒骂', '111.gif': '发怒', '112.gif': '偷笑',
'113.gif': '微笑', '114.gif': '震惊', '115.gif': '囧'
};
//========================================================================================================
//第五部 显示表情
$('#funBox .insertFace').click(function () {
//创建层
if ($('#dv1').length == ) {
var dvImg = $('<div id="dv1" style="width:370px;border:1px solid blue;background-color:white;position:absolute;"></div>').appendTo('body');
var xdvImg = $(this).offset().left - + 'px';
var ydvImg = $(this).offset().top + $(this).height + 'px';
$(dvImg).css({ "left": xdvImg, "top": ydvImg });
//创建两个span标签
$('<span style="float:left">表情</span>').appendTo($('#dv1'));
$('<span style=" float:right;background-color:gray;cursor:pointer;">关闭</span>').click(function () {
$(this).parent().remove();
}).appendTo($('#dv1'));
//导入图片
var dv = $('<div style="clear:both"></div>').appendTo($(dvImg));
for (var key in userFaces) {
$('<img src="faces/' + key + '" title="' + userFaces[key] + '"style=" cursor:pointer"/>').click(function () {
//把图片的title加到文本框中
$('#msgTxt').text($('#msgTxt').text()+'['+$(this).attr('title')+']');
}).appendTo($(dv));
}
}
});
});
</script>
</head>
<body>
<img id="logo" src="img/b3_100901.png" alt="" />
<center>
<div id="myBody">
<div id="myBdLeft">
<div id="talkBox">
<h2>
<a>夏天来了，你懂得......</a></h2>
<textarea id="msgTxt"></textarea>
<div id="funBox">
<a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);"
class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a>
<a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);"
class="uploadVideo">视频</a>
</div>
<div id="sendBox">
<input type="button" class="sendBtn" value="" />
<span class="countTxt">还能输入<em></em>字</span>
</div>
</div>
</div>
<div id="myBdRight">
</div>
</div>
</center>
</body>
</html>
大概就是这么个效果，能实现前面的话题，朋友和表情三个功能。
基本上就是这些，下面入手三层项目，听着外面的鞭炮声有点儿静不下心来，还是好好过年吧。
js，jQuery和DOM操作的总结（二）的更多相关文章
-
jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
-
第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
-
js中的DOM操作汇总
一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...
-
jQuery &ndash; 3.JQuery的Dom操作
3.1 JQuery的Dom操作 1.使用html()方法读取或者设置元素的innerHTML 2.使用text()方法读取或者设置元素的innerText 3.使用attr() ...
-
Jquery所有Dom操作汇总
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
-
解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
-
03-老马jQuery教程-DOM操作
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
-
jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
-
js，jQuery和DOM操作的总结（一）
废话不说,直接上图 一 js的基本操作 (1)js 的六种数据类型 var n4;//六种数据类型用typeof来确定类型,Null类型的用typeof是不行的,这个是特殊 alert(typeof ...
随机推荐
-
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
-
WordPress For SAE 移植
因应用商店中的自带的wordpress版本太旧,有需要用到官网上下载的最新版的,就要考虑移植了. 第一步 配置文件 网站根目录下,修改wp-config.php 数据库连接配置 第二步 附件/图片无法 ...
-
bzoj2757
非常神的数位dp,我调了几乎一天首先和bzoj3131类似,乘积是可以预处理出来的,注意这里乘积有一个表示的技巧因为这里质因数只有2,3,5,7,所以我们可以表示成2^a*3^b*5^c*7^d,也就 ...
-
jni.h源码
/* * jni.h * Java Native Interface. * * Copyright (c) 1996, 1997 * Transvirtual Technologies, Inc. A ...
-
解决weblogic Managed Server启动非常慢的情况
jdk版本:1.7.0_79 查看控制台日志停留在如下地方: . . JAVA Memory arguments: -Xms2048m -Xmx4096m -XX:MaxPermSize=512m . ...
-
JAVA取整以及四舍五入
JAVA取整以及四舍五入 import java.math.BigDecimal; //引入这个包 public class Test { public static void main(String ...
-
EF Code First 连接MySql
看了很多文章,尝试了很多次总是进行不下去,整理一下,以便日后查看. 1.创建ASP.NET MVC项目(EFCodeFirst) 1.1.右键点击引用选择管理NuGet程序包下载MySql.Data. ...
-
与postman的第一次亲密接触
postman和JMeters是外部接口测试的两个工具,通过界面化的方法,来实现操作http报文携带的请求字段.VK值.cookie.header值及文件.本篇主要介绍postman. 首先,补充下 ...
-
mysql 查询优化 ~ select count 知多少
一 简介:今天咱们来聊聊mysql的查询总数 二 具体介绍 1 从引擎层面说 myisam myisam的扫描总行数是非常快的,这是因为myisam会将表的总行数存储起来,定期维护,但是注意,一旦加 ...
-
highChart 缺值-曲线断开问题
time =item.datetime; aqi = Number(item.aqi); pm2_5 = Number(item.pm25); pm10 = Number(item.pm10); co ...