Jquery 笔记

修改dom文档$(“p”).append(“Hello“); 追加一些HTML标记。(“p”).appendTo(“div”);(“p”).prepend(“Hello“); 向所有段落中前置一些HTML标记代码。$(“p”).after(“Hello“);p后加b("p").before((“b”) );(“p”).prependTo(“#foo”); p挪到foo中去("p").empty();(“p”).empty();(“p”).remove(“.hello”); 从DOM中把带有hello类的段落删除(“b”).clone().prependTo(“p”);克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。基本选择器层次选择基本过滤内容过滤匹配所有索引值为偶数的元素(“tr:even”) 奇数，odd;(‘li:first′);(‘li:last’)(“tr:eq(1)”)第二行(“td:empty”)(“div:contains(‘John′)”)查找有john的字符的div(“div:has(p)”).addClass(“test”); div中有p的，就添加test类(“td:parent”)查找所有td元素，或非空“td”(“tr:hidden”) 查找隐藏的tr (“tr:visible”)查找所有可见tr(“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:first-child”) 在每个 ul 中查找第一个 li(“ulli:only−child”)在ul中查找是唯一子元素的li属性方法筛选过滤(“p”).eq(1) 第二个p(‘li′).first()第一个li(‘li’).last()("p").not((“#selected”)[0] ) 从p元素中删除带有 select 的ID的元素查找 (“div”).children()查找DIV中的每个子元素。(“div”).children(“.selected”) 在每个div中查找 .selected 的类。(“p”).next()找到每个段落的后面紧邻的同辈元素。(“div:first”).nextAll().addClass(“after”);给第一个div之后的所有元素加个类(‘#term-2’).nextUntil(‘dt’).css(‘background-color’, ‘red’);
   给#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.层次选择器

AAAaaa

bbb

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开始
[attibutevalue]以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文件效果
设置头部背景色为橘色，文字淡入淡出效果
姓名输入焦点获取或失去时，显示或隐藏提示语？？？？？？？？