- 浏览: 244351 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (221)
- A序 (4)
- 系统学习(读书笔记) (5)
- Computer-base (14)
- RFC-协议规范 (9)
- OS-windows (3)
- OS-linux (10)
- 项目管理-需求设计 (2)
- 设计模式 (1)
- Java-基础-抽象规范 (15)
- Java-基础-core-code (15)
- Java-Thread (15)
- JAVA-stream 流 (1)
- JAVA-socket (13)
- JAVA-SSL (5)
- JAVA-RMI-JMX-OSGI (7)
- java-web (6)
- 工具 (19)
- W3C (16)
- DB (12)
- 读书笔记 (5)
- 中间件 (1)
- C/C++ (1)
- JAVA-JAXB (3)
- Java-UI (1)
- JAVA命令 (1)
- JVM实战 (1)
- java-base (3)
- maven (1)
最新评论
-
Nabulio:
厉害
tomcat 源码学习 -
zbz:
例子很简单,可是怎么设置访问账号和密码呢?注释掉的那段不起作用 ...
jmx 实例--最简单的例子 -
zk302:
格式可以优化下
sql-经典例子练习 -
tuspark:
eclipse的访问控制图标,可以看这篇《eclipse的访问 ...
Eclipse(四)常用设置 -
xlshl43:
流比呀。。。但这排版看的有点蛋疼。。。
Java核心代码(二)Class loader
jQuery的另一好处。控制与html分离
//不用在html上加,onblur();
$("#loginname").blur(function(){
onchange 绑定2个方法,2个都会执行,按先后顺序。
jQuery包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。
但是$(this)只能操作jquery对象。他们的区别是
$(this).attr(’title’, ‘Test’);<==>this.title = "Test";
ajax
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
遍历循环:
$("img").each(function(i){
//this指DOM对象(html元素)其实是JavaScript的操作,$(this)是jquery对象,只能用jquery方法。
this.src = "test" + i + ".jpg";
});
$("img").get(0);
一、属性:
属性:
显示属性$("img").attr("src");
设置属性$("img").attr("src","test.jpg");
批量设置属性$("img").attr({ src: "test.jpg", alt: "Test Image" });
变量值设置属性$("img").attr("title", function() { return this.src });
删除属性$("img").removeAttr("src");
CSS-class
$("p").addClass("a b");;
$("p").removeClass("a");$("p").removeClass();
$("p").toggleClass("a");//如果存在(不存在)就删除(添加)一个类。
$(this).toggleClass("a", count++ % 3 == 0);//表达式为true就加上,否则删除class
html
.html();
.html("hello world!");
val
$("input").val();
$("input").val("hello world!");
三、选择器
$("#myId")
$("div")
$(".myClass")
$("span,p.myClass")并列
$("form input")层级
$("input:[type='button'],[type='reset']")
p.myClass(p与.myClass同级),p .myClass(父子关系)
$("form > input")父子关系
$("form input")父,子孙全部后代关系
$("label + input")//匹配所有(紧接在 prev 元素后的 next 元素)
$("form ~ input")//匹配 prev 元素之后的所有 siblings(兄弟) 元素
:*代表的是过滤条件。
$("tr:first")//查找表格的第一行,:first匹配找到的第一个元素
$("input:not(:checked)")//???用法
$("tr:even")
$("tr:odd")//表格的2,4,6行。
$("tr:eq(1)")//表格的第二行。
$("tr:gt(0)")//index从 0 开始计数
$("div:contains('John')")//所有包含 "John" 的 div 元素
$("td:empty")//所有不包含子元素或者文本的空元素
$("div:has(p)").addClass("test");//给所有包含 p 元素的 div 元素添加一个 text 类
$("td:parent")//所有含有子元素或者文本的 td 元素
$("tr:hidden")//查找隐藏的 tr
style="display:none"或type="hidden"的都查出来。
$("div[id]")//查找所有含有 id 属性的 div 元素
$("input[name='newsletter']")//查找所有 name 属性是 newsletter 的 input 元素
$("input[name!='newsletter']")
$("input[name^='news']")//查找所有 name 以 'news' 开始的 input 元素
$("input[name$='letter']")//查找所有 name 以 'letter' 结尾的 input 元素
$("input[name*='man']")//查找所有 name 包含 'man' 的 input 元素
$("input[id][name$='man']")//找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
:*下面的也可以理解为过滤条件。???
$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li
nth-child(even)(odd)(3n)(2)(3n+1)
$("ul li:first-child")//在每个 ul 中查找第一个 li
表单
$(":input")//查找所有的input元素
$(":text")//查找所有文本框
:password,:radio,:checkbox,...
表单属性
$("input:checked")//查找所有选中的复选框元素
$(":radio:checked")
过滤条件:
$("p").eq(1)//获取第2个元素,index从0算起。
$(this).hasClass("protected")//返回true,false
$("p").filter(".selected, :first")//筛选出第一个以及带有selected类的元素
$("p").filter(function(index) {return $("ol", this).length == 0;});//筛选出子元素中不含有ol的元素。
$("p").not( $("#selected")[0] )//删除id="select"的p元素
$("p").slice(0, 1).wrapInner("<b></b>");//取子集。
$("div").children(".selected")//所有子元素
$("p").contents().not("[nodeType=1]").wrap("<b/>");//查找所有文本节点并加粗
//contents()元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容
$("p").find("span")//从所有的段落开始,进一步搜索下面的span元素。与$("p span")相同
$("p").next(".selected")//找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
$("p").parent()//查找每个段落的父元素//$("p").parent(".selected")
$("span").parents()//找到每个span元素的所有祖先元素。(不包含根元素)
$("p").prev()//找到每个段落紧邻的前一个同辈元素。
$("div").siblings()//找到每个div的所有同辈元素。
$("div").find("p").andSelf().addClass("border");//选取所有div以及内部的p,并加上border类
文档处理:插入时,若已存在,则为移动。
内部插入:
$("p").append("<b>Hello</b>");//向所有段落中追加一些HTML。
$("p").appendTo("div");//把所有段落追加到div中
$("p").prepend("<b>Hello</b>");//向所有段落中前置一些HTML标记代码。
$("p").prependTo("#foo");
外部插入:
$("p").after("<b>Hello</b>");//在所有段落之后插入一些HTML标记代码。
$("p").before("<b>Hello</b>");//在所有段落之前插入一些HTML标记代码。
包裹:
$("p").wrap("<div class='wrap'></div>");//把所有的段落用一个新创建的div包裹起来
$("p").wrapInner("<b></b>");//把所有段落内的每个子内容加粗(包裹)
替换:
$("p").replaceWith("<b>Paragraph. </b>");//把所有的段落标记替换成加粗的标记。
删除:
$("p").empty();//把所有段落的子元素(包括文本节点)删除
$("p").remove(".hello");//从DOM中把带有hello类的段落删除
CSS
$("p").css("color","red");
$("p").css({ "margin-left": "10px", "background-color": "blue" });
其他略
事件:
不是所有的元素都有所有的事件。比如p元素就没有blur事件。
$("p").click();//模拟单击,触发click事件。
页面载入
$(function() { ...});<==>$(document).ready(function(){...});
事件处理
bind(type, [data], fn)//绑定一个事件处理器函数。
如果想取消(浏览器)默认的行为,又想阻止事件起泡,这个事件处理函数必须返回false
function handler(event) {alert(event.data.fo2);}
$("p").bind("click", {fo1: "b1",fo2:"b2"}, handler)//绑定函数handler
$("p").bind("click", function(){alert( $(this).text() );});
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);//触发某类事件
live
$("p").live("click", function(){...}//live类似bind
//用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。
比如说,如果你给页面上所有的li用live绑定了click事件。
那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用
hover
模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)
$("p").hover(
function () {alert(1);},
function () { alert(2);}
);
toggle开关
每次点击后依次调用函数。
$("li").toggle(
function () {
$(this).css({"list-style-type":"disc", "color":"blue"});
},
function () {
$(this).css({"list-style-type":"disc", "color":"red"});
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
$("#"+textid).attr("disabled")
变量时,这样用$("#"+textid)。$("input[id$=text]:not(:disabled)")
工具:数组对象的操作。
css里没有disabled readonly属性,可以通过jquery的inputs.attr("disabled","disabled");来实现。
模拟单击事件,事实上你并没有单击,而是系统替你完成的
1.$(document).ready(function(){
2. $("#btnParent h3").trigger("click");
3.});
select的readonly无效。用disabled=true,用隐藏域来进行传值,或
发表评论
-
json-总结
2012-11-18 19:31 1129JSON: com.abchi ... -
ajax-总结
2012-11-18 19:33 704ajax相关技术: DOM(Docu ... -
html-dom-总结
2012-11-18 19:34 987-------------------------b ... -
DOM-总结
2012-11-19 08:25 887DOM 是 W3C(万维网联盟) 的推荐标准。 ... -
javascript-例子
2012-11-15 00:12 869/** * 工具对象 */ comet.uti ... -
javascript-特效
2012-11-18 19:30 933事件 <body onmousedown=&qu ... -
javascript-总结
2012-11-15 00:03 786JavaScript 是一种脚本语言 ... -
XQuery-总结
2012-11-19 08:26 660XQuery XML Query相对 ... -
DTD-总结
2012-11-19 08:26 937DTD(文档类型定义) 每一个 XML ... -
xpath-总结
2012-11-19 08:26 803XPath 读取XML的语言。XQu ... -
xml-总结
2012-11-19 08:26 875XML 指可扩展标记语言(EXtensible Mark ... -
css 总结
2012-11-15 00:03 907样式三种使用方式 外部样式表 ... -
html-总结
2012-11-15 00:02 9280、文章结构______________________ ... -
w3c-概述
2012-11-15 00:02 1010W3C是英文 World Wide Web Consor ... -
xsd(XML Schema Definition)
2012-11-05 12:09 1023XSD(XML Schema Definition) ...
相关推荐
JQuery-学习总结及实例.docx
从网上总结的 jQuery-2.2.4.js和 jQuery-2.2.4.min.js文件,希望对需要的人有帮助
JQuery-1.1.2是一个经典的JavaScript库版本。经过长期的使用,它已经成为我在企业生产中必用js库。本软件包包括了以下内容: JQuery_API_1.1.2.chm...jQuery1.1.2_Bug的之Length required错误.txt(本人的经验总结)
jQuery-each用法全面总结,分门别类,有说明,有举例。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF ...
jquery-autocomplete文档,对后台如何获取参数,后台JavaBean如何处理结果返回页面做了一定的注释.以及根据实践的总结
jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结
title 字符串 标题文字 iconCls 字符串 一个css类,将提供一个背景图片作为标题图标 border 布尔 是否显示面板的边界。 width 数字 表格的宽度 height 数字 表格的高度 columns 数组 表格的列的配置对象,详见下面...
jquery总结学习资料JQuery总结--无私奉献了!!!
jQuery参考手册-事件总结,供学习交流,谢谢~
jQuery技巧总结.pdf jQuery jQuery技巧
资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...
包括中文教程,api文档等资料 1、本文件夹下的两个js文件是目前的最新版本的jQuery1.1.2, 其中jquery-latest.js为源文件,大小约为58k,供大家学习使用, jquery-latest-pack.js为压缩后的文件只有大约20k...
jQuery学习总结 jQuery学习总结 jQuery学习总结
目录: 1.选择网页元素 2.改变结果集 3.链式操作 4.元素的操作:取值和赋值 5.元素的操作:移动 6.元素的操作:复制、删除和创建 7.工具方法 8.事件操作 9.特殊效果
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
这是我一开始学习时整理的小东西,希望能给初学的你们带来一些什么,如果有什么问题可以加qq:1125419597问我,乐意解答
详细的jquery基础知识总结 jQuery