前端-JQuery笔记

       这部分内容之前学过了一便，但是到后面做前端项目的时候还是看别人的解释可以看懂，自己还是写不出来，所以再来过一遍。希望后面可以有所成长吧。

1.获取元素

（1）取值

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#input1").val());
   });
});
   
</script>
   
<button id="b1">取值</button>
    
<br>
<br>
   
<input type="text" id="input1" value="默认值">

注alert:警告   将获取到的值打印在警告里。（这里不输入时获取到的是“默认值”）。

（2）获取元素内容，保留子元素标签

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").html());
   });
});
  
</script>
  
<button id="b1">获取文本内容</button>
   
<br>
<br>
  
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

警告里的内容是“这是div的内容<span>这是div里的span</span>”。

（3）获取元素内容，不包含子元素标签

<script>
$(function(){
   $("#b1").click(function(){
      alert($("#d1").text());
   });
});
   
</script>
   
<button id="b1">获取文本内容</button>
    
<br>
<br>
   
<div id="d1">
这是div的内容
<span>这是div里的span
</span>
</div>

警告里的内容是“这是div的内容这是div里的span”。

2.css

（1）增加颜色

$("#d").addClass("pink");
....
....
<style>
.pink{
   background-color:pink;
}
</style>

（2）删除颜色

$("#d").removeClass("pink");

（3）切换颜色

这里的切换，指得是：
如果存在就删除
如果不存在，就添加

$("#d").toggleClass("pink");

（4）css函数

通过css函数 直接设置样式 css(property,value).

第一个参数是样式属性，第二个参数是样式值 css({p1:v1,p2:v2}).

<script>
$(function(){
   $("#b1").click(function(){
      $("#d1").css("background-color","pink");
   });
   
   $("#b2").click(function(){
      $("#d2").css({"background-color":"pink","color":"green"});
   });
 
});
   
</script>
  <button id="b1">设置单一样式</button>
  <button id="b2">设置多种样式</button>
<br>
<br>
  
<div id="d1" >
   
单一样式，只设置背景色
   
</div>
 
<div id="d2" >
   
多种样式，不仅设置背景色，还设置字体颜色
   
</div>

3.选择器

元素：$("tagName")根据 标签名 选择所有该标签的元素。

id：$("#id")根据 id 选择元素id应该是唯一的，如果id重复，则只会选择第一个。

类：$(".className")根据 class 选择元素。

层级：$("selector1 selector2")选择 selector1下的selector2元素 。

例：选择id=d3的div下的span元素$("div#d3 span")。

最先：$(selector:first) 满足选择器条件的第一个元素。

最后：$(selector:last) 满足选择器条件的最后一个元素

奇：$(selector:odd) 满足选择器条件的奇数元素
偶：$(selector:even) 满足选择器条件的偶数元素

可见性:$(selector:hidden) 满足选择器条件的不可见的元素
            $(selector:visible) 满足选择器条件的可见的元素

注：div:visible 和div :visible(有空格)是不同的意思
       div:visible 表示选中可见的div
       div :visible(有空格) 表示选中div下可见的元素

属性：$(selector[attribute]) 满足选择器条件的有某属性的元素
           $(selector[attribute=value]) 满足选择器条件的属性等于value的元素
           $(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
           $(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
           $(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
           $(selector[attribute*=value]) 满足选择器条件的属性包含value的元素

表单对象：

表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮
 
$("td[rowspan!=13] "+value).toggle(500);

$("td[rowspan!=13] 后面有一个空格，表示层级选择器，如果没有就会出错
toggle(500) 表示在显示与隐藏之间来回切换，生效时间是500毫秒

注： :submit会把<button>元素选中，因为在一些浏览器中，<button>元素的type默认值是submit，所以会选中它。 关于这个问题，请移步参考：使用button元素提交数据

表单对象属性：

:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素

<script>
$(function(){
   $(".b").click(function(){
      var value = $(this).val();
      $("td[rowspan!=13] "+value).toggle(500);
   });
    
   $(".b2").click(function(){
      var value = $(this).val();
      var options = $("td[rowspan!=13] "+value);
      alert("选中了"+options.length+"条记录！");
   });
        
});
        
</script>

当前元素：在监听函数中使用 $(this)，即表示触发该事件的组件

$(function(){
   $("#b1").click(function(){
     $(this).hide();
   });
    
});

4.筛选器

（1）第一个 最后一个 第几个

首先通过 $("div") 选择了多个div元素，接下来做进一步的筛选
first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素
注: num基0

例第五个：

$("div").eq(4).toggleClass("pink");

（2）父 祖先

parent() 选取最近的一个父元素
parents() 选取所有的祖先元素

（3）儿子 后代

children(): 筛选出儿子元素 (紧挨着的子元素)
find(selector): 筛选出后代元素
注: find() 必须使用参数 selector

（4）同级

siblings(): 同级(同胞)元素

5.属性

（1）获取：通过attr()获取一个元素的属性

获取align属性

$("#h").attr("align")

（2）修改：通过attr(attr,value)修改属性

修改align属性为right

$("#h").attr("align","right")

（3）删除：通过removeAttr(attr)删除属性

删除align属性：

 $("#h").removeAttr("align")

（4）prop与attr的区别

与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值， 无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

<script>
$(function(){
   $("#b1").click(function(){
      alert("game属性是:" + $("#c").attr("game") );
   });
 
   $("#b2").click(function(){
      alert("game属性是:" + $("#c").prop("game") );
   });
 
   $("#b3").click(function(){
      alert("checked属性是:" + $("#c").attr("checked") );
   });
 
   $("#b4").click(function(){
      alert("checked属性是:" + $("#c").prop("checked") );
   });
 
});
  
</script>
  
<style>
button{
  display:block;
}
</style>
 
<button id="b1">通过attr获取自定义属性 game</button>//可以获取到LOL
<button id="b2">通过prop获取自定义属性 game</button>//不能获取到
<button id="b3">通过attr获取 checked属性</button>//可以获取到checked
<button id="b4">通过prop获取 checked属性</button>//获取结果为true
  
<br>
<br>
  
<input type="checkbox"  id="c" game="LOL" checked="checked"> 选中的复选框

6.效果

（1）显示 隐藏 切换

显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)

例显示与延时显示

div.show();//显示
div.show(1000);//延时显示

（2）向上、下滑动 滑动切换

向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
也可以加上毫秒数，表示延时操作，比如slideUp(2000)

（3）淡入、出 切换 指定淡入、出

淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入

例指定淡入淡出

 $("#d1").fadeTo("slow",0.2);
      $("#d2").fadeTo("slow",0.5);
      $("#d3").fadeTo("slow",0.8);

（4）自定义动画

通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。

div.animate({left:'100px'},2000);//向右移动100px

（5）回调函数

效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。

$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
     alert("动画演示结束");
    });
   });
});

7.事件

https://how2j.cn/k/jquery/jquery-event/473.html

8.AJAX

（1）提交AJAX数据

$.ajax({
   url: page,
   data:{"name":value},
   success: function(result){
      $("#checkResult").html(result);
   }
});

$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数

（2）使用get方式提交ajax

$.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
);

只有第一个参数是必须的，其他参数都是可选

（3）使用post方式提交ajax

$.post(
    page,
    {"name":value},
    function(result){
        $("#checkResult").html(result);
    }
);

只有第一个参数是必须的，其他参数都是可选

（4）最简单的ajax提交方式

$("#id").load(page,[data]);

id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。 在本例中，直接在page里加上了参数列表

（5）格式化form下的输入数据

serialize()： 格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串

var data = $("#form").serialize();

9.数组

（1）遍历

$.each 遍历一个数组
第一个参数是数组
第二个参数是回调函数 i是下标，n是内容

<script>
var a = new Array(1,2,3);
$.each( a, function(i, n){
  document.write( "元素[" + i + "] : " + n + "<br>" );
})
document.close();
 
</script> 

（2）去除重复

$.unique() 去掉重复的元素

注意 ： 执行unique之前，要先调用sort对数组的内容进行排序。

var a = new Array(5,2,4,2,3,3,1,4,2,5);
a.sort();
$.unique(a);

（3）查看是否存在

$.inArray 返回元素在数组中的位置 ，如果不存在返回-1

var a = new Array(1,2,3,4,5,6,7,8);
document.write($.inArray(9,a));
document.close();

10.字符串

（1）去除首尾空白：$.trim() 去除首尾空白

document.write($.trim(" Hello JQuery    "));
document.close();

11.JSON

将JSON格式的字符串，转换为JSON对象

$.parseJSON 将JSON格式的字符串，转换为JSON对象

var gareen = $.parseJSON(s3);

s3为JSON格式字符串

12.对象转换

（1）JQuery转DOM

通过get(0)或者[0] 把JQuery对象转为DOM对象

<script>
$(function(){
   $("#b1").click(function(){
      var div= $("#d");
      var d = div[0];
      var s ="JQuery对象是 " + div;
      s +="\n对应的DOM对象是 " + d
      alert(s);
   });
});
     
</script>
  <button id="b1">JQuery对象div转为DOM对象d</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div id="d">
Hello JQuery
</div>
双击选中所有代码

（2）DOM转JQuery

通过$() 把DOM对象转为JQuery对象

<script>
$(function(){
   $("#b1").click(function(){
      var div= document.getElementById("d");
      var d = $(div);
      var s ="DOM对象是 " + div;
      s +="\n对应的JQuery对象是 " + d
      alert(s);
   });
});
     
</script>
  <button id="b1">DOM对象div转为JQuery对象d</button>
<br>
<br>
    
<style>
.pink{
   background-color:pink;
}
</style>
     
<div id="d">
Hello JQuery
</div>

学习网站：https://how2j.cn/