jQuery学习笔记！！

两遍没保存，第三遍！！！！！！！！！！！！！保存保存！！这么不人性化的模式！！

1.jQuery 是一个 JavaScript 库，是目前最流行的 JS 框架。
jQuery把DOM的元素打包成方法
官方网站 http://jquery.com/

<script src="jquery-3.2.1.js" type="text/javascript"></script>

2.DOM和jQuery的相互转换
（1）DOM–>jQuery

//jQuery对象前加$var div1 = document.getElementById("div1");var $div1 = $(div1);alert($div1.html());// $div1.width()

（2）jQuery–>DOM

var $div = $("#div1");//第一种方式var div = $div[0];//div是DOM对象//第二种方式var div = $div.get(0);alert(div.innerHTML);

3.事件
（一）事件绑定
jQ对象.bind(“事件名（不加on）”，function（)）
（二）取消绑定
jQ对象.unbind(“click”) //取消click事件所有的函数
jQ对象.unbind(“click”,fn1) //取消click事件fn1函数
（三）只执行一次的事件
jQ对象.one(“事件名”,函数)
（四）触发事件
jQ对象.trigger(“click”)

$("input").select(function(){    $("input").after("文本被选中！");  });  $("button").click(function(){    $("input").trigger("select");  });

（五）两个事件合成的方法
hover()=mouseover + mouseout 。
toggle() 方法切换元素的可见状态。
（六）特殊事件（js没接触过的）
（1）keypress和keydown的区别
keypress注重键入的值，功能键不能使用，返回ASCII字符charcode，例如区分大小写。
keydown注重按下那个键，返回键盘的代码keycode。
（2）change
当元素的值发生改变时，会发生 change 事件

$(selector).change() //触发被选元素的 change 事件。$(selector).change(function)   //规定当被选元素的 change 事件发生时运行的函数。

（3）resize
当调整浏览器窗口的大小时，发生 resize 事件。

$(selector).resize()$(selector).resize(function)

4.选择器（很强大）
jQuery中的选择器选择出标签(或元素)后可以做任意操作（强！）

$("*") //选取所有元素$(this)    ///选取当前HTML元素   $("p.intro")   //选取class为intro的<p>元素   $("p:first")   //选取第一个<p>元素    $("ul li:first")   //选取第一个<ul>元素的第一个 <li> 元素   $("ul li:first-child") //选取每个<ul>元素的第一个<li>元素  $("[href]")    //选取带有href属性的元素 $("a[target='_blank']")    //选取所有target属性值等于"_blank"的<a>元素 $("a[target!='_blank']")  //选取所有target属性值不等于"_blank"的<a>元素 $(":button") //选取所有 type="button"的<input>元素和<button>元素 $("tr:even") //选取偶数位置的<tr>元素   $("tr:odd")    //选取奇数位置的<tr>元素$("parent>child")  //选取parent元素下的child(子代元素)$("div>span")  //选取div下的儿子结点span$("ancestor descendant") //选取ancestor元素里的所有descendant(后代)元素,返回集合元素$("div span")  //选取div里的所有的span元素(后代选择器)$('prev+next') //选取紧接在prev元素后的next元素  返回集合元素   $('.one+div') //选取class属性为one的下一个<div>元素,与$(".one").next("div")等价$('prev~siblings')    //选取prev元素之后的所有siblings元素，返回集合元素    $('#two~div') //选取id值为two的后面的所有<div>兄弟元素,与$("#two").nextAll("div")等价                                                  $("#prev").siblings("div") //选取和id值为prev的元素同级的div元素$("p").prev(".selected") //选取p标签前所有selected类的元素，上面所有prevAll("");  

4.基本语法和用法
（1） $(selector).action()
美元符号定义 jQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

（2）为了防止文档在完全加载（就绪）之前运行 jQuery 代码，使用如下方法

 $(document).ready(function(){   // 开始写 jQuery 代码... });  //简洁写法  $(function(){   // 开始写 jQuery 代码... }); 

$(document).ready()和window.onload区别
(1)window.onload只能绑定一个事件处理函数，如果绑定多个
只执行最后一个，而$(document).ready()可以绑定多个函数
(2)window.onload必须等待网页中所有的内容加载完毕后(包括图片)才能执行
$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
5.一些jQuery的效果
（1）隐藏和显示

$(selector).hide(speed,callback);  //隐藏  第一个参数是速度，第二个是要执行的函数名$(selector).show(speed,callback);  //显示 $(selector).toggle(speed,callback); //隐藏和显示交互$("#hide").click(function(){  $("p").hide();});$("#show").click(function(){  $("p").show();});

（2）淡入和淡出（没搞懂和隐藏显示有多大区别）

$(selector).fadeIn(speed,callback);  //淡入 第一个参数是速度，第二个是要执行的方法$(selector).fadeOut(speed,callback);  //淡出$(selector).fadeToggle(speed,callback);  //淡入淡出交互$(selector).fadeTo(speed,opacity,callback);  //第二个参数是透明度$("button").click(function(){  $("#div1").fadeIn();  $("#div2").fadeIn("slow");  $("#div3").fadeIn(3000);});

（3）滑动

$(selector).slideDown(speed,callback);  //下滑$(selector).slideUp(speed,callback);  //上滑$(selector).slideToggle(speed,callback);  //交互

（4）动画

//基本语法 $(selector).animate({params},speed,callback); //动画的css属性，速度，函数名 //操作多个属性 同时进行 $("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });}); //添加多个动画$("button").click(function(){  var div=$("div");  div.animate({height:'300px',opacity:'0.4'},"slow");  div.animate({width:'300px',opacity:'0.8'},"slow");  div.animate({height:'100px',opacity:'0.4'},"slow");  div.animate({width:'100px',opacity:'0.8'},"slow");  //顺序向下执行}); 

（5）stop( )方法

$(selector).stop(stopAll,goToEnd);//stopAll参数，是否清除动画队列 默认是false，没有此参数默认清除被选中元素的当前动画//goToEnd 是否立即完成当前动画 默认false

（6）参数callback
动画完成100%后调用callback函数

$(selector).hide(speed,callback) //hide（）完成后调用callback方法

（7）chaining 链接技术
在同一个元素上添加多个jQuery语句，依次执行

$("#p1").css("color","red").slideUp(2000).slideDown(2000);//id为P1的元素先变红，在上移，在下移

6.DOM操作
（1）创建节点

var $div5 = $("<div id='div5'>我是div5</div>");

（2）插入节点

//插入同级元素//after()   在每个匹配的元素之后插入内容      <p>我想说:</p>    //jQuery代码:    $("p").after("<b>你好</b>");    //<p>我想说:</p><b>你好</b>//insertAfter   与after()写法相反，作用相同     <p>我想说:</p>    //jQuery代码:    $("<b>你好</b>").insertAfter("p");    //结果:    <p>我想说:</p><b>你好</b>//before()  在每个匹配的元素之前插入内容      <p>我想说:</p>    //jQuery代码:    $("p").before("<b>你好</b>");    //结果:    <b>你好</b><p>我想说:</p>//insertBefore()    与before()相反     <p>我想说:</p>    //jQuery代码:    $("<b>你好</b>").insertBefore("p");    //结果:    <b>你好</b><p>我想说:</p>

//插入子级元素//append()  向每个匹配的元素内部追加内容    <p>我想说:</p>    //jQuery代码:    $("p").append("<b>你好</b>");    //结果:    <p>我想说:<b>你好</b></p>//appendTo() 与append写法相反，作用相同           <p>我想说:</p>    //jQuery代码:    $("<b>你好</b>").appendTo("p");    //结果:    <p>我想说:<b>你好</b></p>//prepend()  向每个匹配的元素内部前置内容    <p>我想说:</p>    //jQuery代码:    $("p").prepend("<b>你好</b>");    //结果:    <p><b>你好</b>我想说:</p>//prependTo()   与prepend相反      HTML代码:    <p>我想说:</p>    //jQuery代码:    $("<b>你好 </b>").prependTo("p");    //结果:    <p><b>你好</b>我想说:</p>

（3）删除节点
remove()删除节点

$("#div1").remove();

empty() 清空内容
（4）节点替换

//replaceWith()方法$("#div4").replaceWith("<input type='text' name='pname' value='产品名称'><br/>");<p>我是一个段落</p>               <input type="button" name="" id="" value="替换节点" onclick="test();"/>

//z replaceAll()方法 (和replaceWith()用法相反 作用相同)$("<input type='text' name='pname' value='产品名称'><br/>").replaceAll($("#div4"));

（5）节点移动

$("ul li:eq(2)").insertAfter("ul li:eq(0)"); //li第三个移动到以一个后面

（6）节点克隆

$("body").append($("p").clone()); //克隆p标签 放在最后

（7）节点包裹

 $("p").wrap("<div></div>"); //把所有p标签用div单独包裹起来 //结果 <div><p></p></div>       <div><p></p></div>       <div><p></p></div>       <div><p></p></div> $("p").wrapAll("<div></div>"); //把所有p标签用一个div包裹起来 //结果 <div>       <p></p>       <p></p>       <p></p>       <p></p> $("p").wrapInner("<b></b>"); //结果 <p><b></b></p>

7.节点的遍历
（1）遍历孩子节点

var v1 = $("body").children("p");//只遍历儿子层的pvar v1 = $("body").find("p");//寻找所有p

（2）兄弟节点
访问下面的一个元素 对象.next();
访问上面的一个元素 对象.prev();
访问所有的兄弟元素 对象.siblings();
（3）父节点

$("p").parent();// 得到p元素的父亲节点$("p").parents() ;//得到p元素的所有祖先节点

8.属性操作
（1）attr()获取与设置属性
jQuery对象.attr(“name”);//获取name属性 ok
jQuery对象.attr(“name”,”zzy”);//设置name属性为zzy ok
jQuery对象.attr(“type”);//获取属性 ok
jQuery对象.attr(“type”,”password”);//报错 jQuery不允许改type属性
（2）attr()方法也可以接受JSON数据格式用来修改多个属性

$("#test").attr({"name":"zzy","value":"333"}); 

（3）removeAttr() 移除属性

removeAttr(“属性名”);//  移除属性

9.样式操作
（1）css(“属性名”,”属性值”)

<a id="hello">click me</a>//DOM方式document.getElementById("hello").style.color = "red";//jQuery方式$("#hello").css("color","#ff0000");

（2）css()方法也可以接受JSON对象来同时修改多个属性

$("#div1").css({        "backgroundColor":"yellowgreen",        "color":"red"});

（3）addClass() 给class属性增加一个样式

//class="hello"$("p").addClass("high");//class="hello high" 

（4）removeClass()移除样式
removeClass(“样式名”);//移除一个样式
removeClass();//移除所有样式
（5）toggleClass()样式切换

$("p").toggleClass("another");//有就删除,没有就添加

（6）hasClass()或is()判断是否含有样式
1.(“p”).hasClass(“another”)2.(“p”).is(“.another”)
返回true或false
（7）.is(“:animated”)被选中的元素是否处在动画中
.is(“:checked”) 复选框是否被选中

10.不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示
（1）load() 方法是简单但强大的 AJAX 方法

$(selector).load(URL,data,callback);//必需的 URL 参数规定您希望加载的 URL。//可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。//可选的 callback 参数是 load() 方法完成后所执行的函数名称。

（2）$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$("button").click(function(){  $.get("demo_test.asp",function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});//第一个参数是希望请求的 URL//参数函数的第一个参数存有被请求页面的内容，第二个回调参数存有请求的状态

（3）$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

$.post(URL,data,callback);//必需的 URL 参数规定您希望请求的 URL。//可选的 data 参数规定连同请求发送的数据。//可选的 callback 参数是请求成功后所执行的函数名。$("button").click(function(){  $.post("demo_test_post.asp",  {    name:"Donald Duck",    city:"Duckburg"  },  function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

（4）使用$.ajax()提交

$.ajax({    type: "POST",    url: "MyServlet",    data：{'param1':$("#param1").val(),'param2':$("#param2").val()},//用json对象保存提交的数据    dateType: "html",//服务器输出的数据的类型,默认html               success:function(returnedData){                $("#result").val(returnedData);            }  });