给#term-2后面直到dt前的元素加上红色背景(“p”).parent(“.selected”) 查找段落的父元素中每个类名为selected的父元素。 (“span”).parents(“p”)找到每个span的所有是p元素的祖先元素。 (“div”).siblings() 找到每个div的所有同辈元素。 动画 (“p”).show(“slow”);缓慢的动画将隐藏的段落显示出来 (“p”).hide(“slow”);缓慢隐藏p (“p”).slideDown(“slow”);缓慢滑下 (“p”).slideUp(“slow”);缓慢划上 (“p”).slideToggle(“slow”);缓慢滑上或滑下 (“p”).fadeIn(“slow”);p缓慢淡入 (“p”).fadeOut(“slow”,0.66);p缓慢淡出至透明度尾0.66 (“.block”).animate({left: ‘+50px’}, “slow”); (“.block”).animate({left: ‘-50px’}, “slow”);左右移动
jquery ajax get post
get /test/demo_form.asp?name1=value1&name2=value2
post /test/demo_form.asp HTTP/1.1
Host: w3schools.com
name1=value1&name2=value2
ajax 步骤,创建对象,绑定函数 处理函数,计算结果
1.创建 XMLHTTPRequest对象 var kaka= new XMLHttpRequest();
2.注册回调函数 kaka.onreaystatechage = function(){}
3.设置和服务器端的连接信息 kaka.open(“get” ,”….?name=”kaka”);
4.发送数据,开始和服务器端进行交互,这里send里的参数为null,是因为采用了GET的请求方式
5.接受响应数据
servlet 中的doget dopost方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws IOException,ServletException {
this.goGet(request,response);//调用doGet()方法
}
}
append 加入文字(“p”).append(” Hello world!“); 事件: 页面载入 (document).ready(function());绑定触发事件 (selector).trigger(eventObj) click事件 (“button”).click(function(){
表单提交事件(“form”).submit(function(e){ query 的三种初始化方法 • 第一种: (document).ready(function());第二种: (function(){ }); 第三种: jQuery(function( ));JQuery对象与DOM对象的关系前者是后者的封装各自使用各自的属性和方法DOM对象转为JQuery对象 (“选择器”).action(); JQuery对象转为DOM对象 var v2=$(“选择器”)[0]; JQuery对象与DOM对象的关系 通过选择器相互转换 使用各自的方法 JQuery对象的方法效率更高 选择器 1.基本选择器 #id .class element * 2.层次选择器
ccc
ddd
改变id为id_demo4元素内所有span元素内的字体为橘色(不包含id为id_demo4的元素内容)(aaa,bbb)
$(“#id_demo4 span”).css(“color”,”orange”);
改变id为id_demo4元素内所有子级span元素内的字体为红色(aaa)
$(“#id_demo4>span”).css(“color”,”red”);
改变与id为id_demo4元素”同辈”的下一个span元素内的字体为绿色(该span必须与id是同级且
“紧跟”在id_demo4的后面)(ccc)
$(“#id_demo4+span”).css(“color”,”green”);
改变id为id_demo4元素后面的同辈的所有span元素内的字体为蓝色(span若嵌套子级元素,则子级也会被改变)(id为id_demo4”同辈”的”后面”所有span元素以及span元素内的span元素)(ccc,ddd)
$(“#id_demo4~span”).css(“color”,”blue”);
改变id为id_demo4元素”同辈”的”所有”p元素字体为红色
(“#id_demo4”).siblings(“p”).(“color”,”red”);
3.表单选择器
设置form表单中所有输入项的背景色为粉色(“:input”).css(“backgroundColor”,”pink”);
设置form表单中所有文本框背景色为灰色
(“:text”).css(“backgroundColor”,”gray”);设置form表单中所有提交的字体为蓝色
(“:submit”).css(“color”,”blue”);
设置form表单中所有按钮的背景色为橘色
$(“:button”).css(“backgroundColor”,”orange”);
3.过滤选择器(基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤)
基本过滤选择器:(:first 选取第一个元素)(:last 选取最后一个元素)(:not(selector)去除所有与给定选择器匹配的元素))(:even 选取索引时偶数的所有元素,索引从0开始)(:odd选取索引时奇数的所有元素,从0开始)(:eq(index)选取等于index的元素,索引从0开始)(:gt(index)选取索引大于index的元素)(:lt(index)选取索引小于index的元素)(:header 选取所有的标题元素如h1.h2)(:animate 选取当前正在执行动画的所有元素)
改变第一个 div 元素的背景色为# bbffaa
(“div:first”)
改变id不为 one 的所有p元素的背景色为#bbffaa(“p:not(‘#one’)”)
改变索引值为偶数(0是偶数)的 tr元素的背景色为#bbffaa
(“tr:even”)
改变索引值为大于 3 且为奇数的 p元素的背景色为#bbffaa(“p:gt(3):odd”)
改变所有的标题元素的背景色为 # bbffaa
$(“:header”)
内容过滤选择器:(:contains(text)选取含有文本内容为text的元素)
(:empty 选取不包含子元素或者文本的空元素)
(:has(selector)选取含有选择器所匹配的元素的元素)
(:parent 选取含有子元素或者文本的元素)
改变含有文本“aaa”的 p元素的背景色为 # bbffaa
(“p:contains(‘aaa′)”)改变div为空元素(不包含子元素或文本)的背景色为灰色
(“div:empty”)
改变含有class为“bbb”的子元素的p元素背景色为粉色
(“p:has(′.bbb′)”)改变div为非空元素(包含子元素或文本)的背景色为橘色
(“div:parent”)
可见性过滤:
(:hidden 选取所有不可见的元素)
(:visible 选取所有可见的元素)
改变所有可见的div元素背景色为 # bbffaa
$(“div:visible”)
改变所有不可见的div元素展示出来,并设置背景色为浅绿色
$(‘div:hidden’).show(2000).css(“background”,”#bbffaa”)
改变检查所有类型为hidden的input元素,并打印个数/值
window.alert(
(‘input:hidden′).length)window.alert(
(‘input:hidden’)[0].value)
属性过滤选择器:
[attibute]
[attibute=value]选取指定属性的值为value的元素
[attibute!=value]不等于
[attibute^value]以value开始
[attibute
value]以value结束[attibute∗value]含有value的元素[selector][selector]…复合属性选择器改变所有写明title属性的div元素背景色为绿色
(“div[title]”).css(“backgroundColor”,”green”);
改变title值为d2的div元素背景色为橘色
$(“div[title=’d2’]”).css(“backgroundColor”,”orange”);
改变title值不为d2的div元素背景色为橘色
$(“div[title!=d2]”).css(“backgroundColor”,”orange”);
没有写明title属性,也会被改变
子元素过滤选择器:
(:nth-child(index/even/odd/equation)选取每个父元素下的第index个子元素或者奇偶元素,index从1开始)
(:first-child 选取每个父元素的第一个子元素)
(:last-child 选取每个父元素的最后一个子元素)
(:only-child 如果某个元素是它父元素中唯一的子元素,那么将被匹配)
表单对象属性过滤选择器
(:enabled 选取所有可用元素)
(:disabled 选取所有不可用元素)
(:checked 选取所有被选中的元素)(单选框,复选框)
(:selected 选取所有被选中的元素(下拉列表))
jQuery 的dom操作
1.jQuery的样式操作:
获取和设置元素高度、宽度、相对位置
(“p”).height();获取第一个匹配元素的高度
(“p”).height(20);给每个匹配元素设置高度像素
(“p”).width();
(“p”).width(20);
使用css()为指定的元素设置样式值
给一个div添加边框
(“#id_demo1”).css(“border”,”5px solid pink”);
给一个div添加边框,同时修改透明度(“#id_demo1”).css({“border”:”5px solid pink”,”opacity”:”0.5”});
这是使用jquery添加多个样式的最常用方式
2.jQuery的css操作
追加css样式
(“p”).addClass(“cdemo1”);
(“p”).addClass(“c_demo1 c2_demo1”);
移除样式
(“p”).removeClass(“cdemo1”);
(“p”).removeClass(“c_demo1 c2_demo1”);
如果存在(不存在)就删除(添加)一个样式。
$(“p”).toggleClass(“c3_demo1”);
3.jQuery的文本操作
html()操作
获取选中元素的html格式或文本格式内容
(“#id_demo3”).html();
更改选中元素的html格式或文本格式内容(“#id_demo3”).html(“hello”);
$(“#id_demo3”).html(“hi“);
text()操作
获取选中元素的文本内容
(“#id_demo3”).text();
更改选中元素的文本内容(“#id_demo3”).text(“hello”);
$(“#id_demo3”).text(“hi“)
value()操作
获取选中元素的value值
(“#id_demo3”).val();
更改选中元素的value值(“#id_demo3”).val(“hello”);
4.jQuery的节点操作
获取节点对象
(“#id_demo4”).html();(“p”).html();获取第一个匹配元素的文本内容
创建元素子节点
$(“#id_demo4”).html(““);
会覆盖选中的元素内容
双引号内不能嵌套双引号
内部插入元素节点(子节点)
$(A).append(“
Hello
“); 向A中追加元素(A).appendTo(B);把A追加到B中(原来的A删除) (A).prepend(B);把B追加到A中,前置
(A).prependTo(B);把A追加到B中,前置外部添加元素节点(同辈节点) (“p”).after(“
Hello
“);在p后插入hello$(“p”).before(“
Hello
“);在p前插入hello(“p”).insertAfter(“#id_demo4”);(“p”).insertBefore(“#id_demo4”);
替换节点
(A).replaceWith(B);把A替换为B
(A).replaceAll(B);用A替换B
复制节点
$(“p”).clone().prependTo(“#id_demo4”);
删除节点
(A).empty();清空A中的所有子节点,仍可以定位
(A).remove();删除所有的A元素,不能再定位
(A).remove(“#id_demo4”);删除选中id的A元素(A).detach();删除所有的A元素,保留绑定的事件和数据
节点属性
(“img”).attr(“src”);选中第一个匹配元素的某个属性
(“img”).removeAttr(“src”);删除所有匹配元素的某个属性
遍历子元素
(“div”).children();查找所有匹配元素的子元素,不包括子元素的子元素
("div").children().each(function(){alert((this).text();});(“div”).children().eq(0).text();
$(“div”).children(“.selected”);过滤子匹配的子元素
遍历同辈元素
(“p”).next();查找所有匹配元素紧邻的后面的同辈元素
(“p”).nextAll().eq(1).text();
(“p”).prev();查找所有匹配元素紧邻的前面的同辈元素
(“div”).siblings();查找所有div的所有同辈元素
查找父元素
("p").parent();查找所有匹配元素的父元素,
(“p”).parent(“.selected”);查找匹配元素的父元素中有某个类选择器的元素
遍历祖先元素
(“span”).parents();遍历匹配元素的祖先元素,不包含根元素
(“span”).parents(“p”);找到匹配元素的所有是p元素的祖先元素。
jQuery 的动画效果
1.show();显示隐藏的匹配元素。
$(“p”).show();显示隐藏的匹配元素
Hello
(“p”).show(“slow”);缓慢显示隐藏的匹配元素slow:600msmormal:400msfast:200ms
(“p”).show(1200);缓慢显示隐藏的匹配元素
("p").show(1200,function(){(this).text(“hi”)});
2.hide()
(“p”).hide();隐藏的\匹配元素
(“p”).hide(“slow”);
slow:600ms
mormal:400ms
fast:200ms
(“p”).hide(1200);
("p").hide(1200,function(){$(this).text(“hi”)});
3.toggle()
$(“p”).toggle();切换元素可见状态
$(“p”).toggle(true);显示隐藏的匹配元素
(“p”).toggle(1200); ("p").hide(1200,function(){$(this).text(“hi”)});
滑动效果改变元素可见性
(“p”).slideDown(2000,function()alert(“hi”););显示
(“p”).slideDown(“fast”);
(“p”).slideUp(2000,function()alert(“hi”););
(“p”).slideUp(“slow”);
(“p”).slideToggle(1000);淡入淡出效果改变元素可见性
(“p”).fadeIn(2000,function(){alert(“hi”);});显示
(“p”).fadeOut(1000);隐藏
(“p”).fadeTo(3000,0.5);对显示和隐藏的元素调整透明度
4.animate()
前面介绍的动画方法内部都是调用了animate()方法
使用该方法可以完成更多的属性动画效果
$(“p”).animate({opacity: ‘toggle’},3000);
5.stop()
("#id_demo2").click(function(){(“p”).stop()});
通过事件响应停止当前的动画
jQuery事件
(document).ready(fn)
(document).ready(function(){alert(“hi”);});
(document).ready(function(){$(“#id_demo1”).css(“color”,”red”);});
文档结构加载完毕自动响应函数
window.onload()必须等待网页中所有的内容(包括图片)都加载完毕后才执行(document).ready()网页中所有的dom
结构绘制完毕后就执行,并不需要所有的dom元素都加载完
bind()
对javascript事件进行绑定,并在条件符合时触发函数
("p").bind("click",function(){(this).css(“backgroundColor”,”pink”);});
unbind()
(“p”).unbind();解除匹配元素的所有绑定事件
(“p”).unbind(“click”);解除匹配元素的点击事件
hover()
对悬停事件(鼠标的移入和移出)的事件处理
(“p”).hover(function()$(this).css(“backgroundColor”,”pink”);,function()$(this).css(“backgroundColor”,”gray”););toggle()对点击事件的处理每点击一次触发下一个函数,并循环
("div").toggle(function(){(this).css(“color”,”pink”);},
function(){(this).css(“color”,”green”);},
function(){$(this).css(“color”,”blue”);});
事件冒泡
对嵌套元素都含有某类事件的处理:内层元素(span)触发了外层元素事件
(“div”).bind(“click”,function()alert(“div”););
(“p”).bind(“click”,function(){alert(“p”);});
(“span”).bind(“click”,function()alert(“span”););阻止冒泡对内层元素进行event处理:两种方式
(“span”).bind(“click”,function(event){event.stopPropagation();});
$(“span”).bind(“click”,function(event){return false;});
blur(fn)、focus(fn)、change(fn)、click(fn)、keypress(fn)、mouseover(fn)、mouseout(fn)
使用Myeclipse查看html文件效果
设置头部背景色为橘色,文字淡入淡出效果
姓名输入焦点获取或失去时,显示或隐藏提示语????????