jQuery学习笔记！！_juqery学习笔记-CSDN博客

本文链接：https://blog.csdn.net/ypc95221/article/details/78682849

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

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");//只遍历儿子层的p
var 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);
            }
  });