jquery的概述_jquery的描述-CSDN博客

本文链接：https://blog.csdn.net/luo609630199/article/details/80064117

jquery的概述

什么是JQuery

jQuery是一个JavaScript框架。它兼容CSS3，还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。

核心理念：write less，do more

jQuery的引入

学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用script标签导入<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

基本语法/对象获取

在js中document.getElementById("id");还有通过tagName等等获取对象
在jQuery中，jQuery(选择器)或者$(选择器)
- 在jQuery中，"jQuery == $"，区分大小写
- jQuery中对象变量命名建议以$开头，便于区分。
- 比如通过id找到某个标签对象，var $demoId = $("$demoId");
jQuery中的注释和js中一样。

jQuery的基本操作

jQuery页面加载

$(document).ready(当页面加载完成时要执行的函数)，可以执行多次，且比js中的onload方法速度快。
更加简版的写法：$(当页面加载完成时要执行的函数)

js对象和jQuery对象相互转换

把jQuery对象（ $）转换成对象：$ q[0]或者$q.get(0)
js对象p转换成jQuery对象:$(p)

jQuery的基本选择器(重要)

ID选择器：$("#id名")
类选择器：$(".类名")
标签选择器：$(标签名)

jQuery的事件(重要)

直接调用jquery对象的方法进行绑定
- 点击事件是click()方法
- 域的内容改变事件是change()方法

bind(事件类型，函数),通过bind方法可以绑定诸多事件

jQuery的效果(一般)

显示隐藏

show(speed，callback)，显示
- speed，速度
- callback，表示显示后要进行的操作(回调)
hidden(speed，callback)，隐藏
toggle()，显示隐藏的切换开关

滑动

slideDown(speed，callback),滑动显示
slideUp(speed，callback)，滑动隐藏
slideToggle(speed，callback)，滑动进行显示隐藏的切换

淡入淡出

fadeIn(speed,callback),淡入
fadeOut(speed，callback)，淡出
fadeTo(speed,opacity,callback),由不透明变成指定的透明度：透明度由0-1表示
- opacity：指定透明度
fadeToggle(speed，callback),切换淡入淡出

定时弹广告案例

  <script type="text/javascript">
              //当文档加载完毕的时候，开启一个定时器
              /*$(function(){
                  setTimeout(function(){
                      //当文档加载完毕五秒后弹出广告
                      $("#divAd").show(4000,function(){
                          //这个回调函数是，当显示完毕的时候才执行
                          //显示4秒后隐藏
                          setTimeout(function(){
                              $("#divAd").hide(2000)
                          },4000)
                      })
                      
                  },5000)
              })*/
              
              //不使用匿名函数
              //显示广告的方法
              function showAd(){
                  $("#divAd").show(2000,function(){
                      //回调函数是显示完毕之后执行，要开启一个定时器来关闭广告
                      setTimeout("hideAd()",4000)
                  })
              }
              //隐藏广告的方法
              function hideAd(){
                  $("#divAd").hide(2000)
              }
              
              //当文档加载完毕的时候，开启一个定时器
              $(function(){
                  setTimeout("showAd()",5000)
              })
          </script>

jQuery的其它选择器总结(了解)

学习这么多jQuery的选择器的目的是:更快、更方便地找到想找的标签

层级选择器

$("A B"):获得A元素内部的所有B元素,包含内部的所有后代标签(祖孙关系)
$("A>B"):获取A元素下面的所有B子元素。（父子关系）
$("A+B"):获取A元素同级的一个B元素。（兄弟）
$("A~B"):获取A元素同级的所有B元素。（兄弟们）

基本过滤选择器

$("选择器:first"),表示找到所有符合该选择器的第一个元素。
$("选择器:last"),表示找到所有符合该选择器的最后一个元素。
$("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。
$("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。
$("选择器:eq(index)"),表示找到符合该选择器的第index个元素。
$("选择器：gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。
$("选择器：lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。
$("：header"),找到所有标题元素。
$(":empty"),找到所有空元素（不包含子元素和文本的元素）<img/><hr/>

属性选择器

[属性名p]：获取有属性名p的元素
[属性名='属性值']：获取属性名 = 属性值的元素
[属性名！= '属性值']：获取属性名！= 属性值的元素
[...][...][...]多重属性选择器
[属性名^=属性值]：获得属性名以属性值开头的所有元素
[属性名$=属性值]：获得属性名以属性值结尾的所有元素
[属性名*=属性值]：获得属性名含有属性值的所有元素

表单类型选择器(了解)

表单属性选择器(了解)

jQuery的属性(重要)

$(selector).attr(attribute)：返回指定元素的某个属性值
$(selector).attr(attribute，value):给指定元素设置属性

attr()方法适合用于属性值不是boolean类型的属性

$(selector).prop(attribute)：返回指定元素的某个属性值
$(selector).prop(attribute，value):给指定元素设置属性

prop()方法适合用于属性值是boolean类型的属性

html():往标签体中写HTML内容(对应js中的innerHTML属性)
text():往标签体中写普通文本(对应js中的innerText属性)
val():设置或返回Value属性的属性值
- 只能用于获取和设置表单项的value属性
css():设置css样式
hasClass("类名")：指定元素是否包含某个类
addClass("类名"):给指定元素添加某个类

隔行换色案例

  
  <script>
              $(function(){
                  /*- $("选择器:first"),表示找到所有符合该选择器的第一个元素。
                  - $("选择器:last"),表示找到所有符合该选择器的最后一个元素。
                  - $("选择器:even"),表示找到所有符合该选择器的下标为偶数的元素。
                  - $("选择器:odd"),表示找到所有符合该选择器的下标为奇数的元素。
                  - $("选择器:eq(index)"),表示找到符合该选择器的第index个元素。
                  - $("选择器：gt(index)"),表示找到符合该选择器的并且下标大于index的所有元素。
                  - $("选择器：lt(index)"),表示找到符合该选择器的并且下标小于于index的所有元素。
                  - $(":header"),找到所有标题元素。
                  - $(":empty"),找到所有空元素（不包含子元素和文本的元素）*/
                  //需求1:给第一行的背景色设置成红色
                  /*$("tr")[0].style.backgroundColor = "red"*/
                  //css()方法是设置css属性，第一个参数表示css属性名，第二个参数是css属性自
                  $("tr:first").css("background-color","red")
                  
                  //需求二:设置最后一行的背景色为绿色
                  $("tr:last").css("background-color","green")
                  
                  //需求三:设置奇数行的背景色为粉红色
                  $("tr:even").css("background-color","pink")
                  
                  //需求四:设置所有偶数行的背景色为黄色
                  $("tr:odd").css("background-color","yellow")
                  
                  //需求五:设置第五行的背景色为白色
                  $("tr:eq(4)").css("background-color","white")
                  
                  //需求六:设置前四行的背景色为红色
                  $("tr:lt(4)").css("background-color","red")
                  
                  //需求七:设置后四行的背景色为蓝色
                  $("tr:gt(1)").css("background-color","blue")
              })
          </script>

全选和反选的案例

  
  <script type="text/javascript">
              $(function(){
                  //实现功能一:全选功能
                  //给全选按钮绑定点击事件
                  $("#selectAll").click(function(){
                      //设置所有子选框的选中状态跟自己一样
                      //name属性="selectOne"的input标签就是所有的子选框
                      $("input[name='selectOne']").prop("checked",this.checked)
                  })
                  
                  //实现功能二:反选功能
                  //给反选按钮绑定点击事件
                  $("#rev").bind("click",function(){
                      //反选其实就是将所有的子选按钮点击一遍
                      $("input[name='selectOne']").click()
                  })
                  
                  //实现子选按钮控制全选框的选中状态
                  //给所有的子选框绑定点击事件
                  /*$("input[name='selectOne']").click(function(){
                      //设置全选框的选中状态?
                      //判断当前点击的这个子选框是否选中
                      if(!this.checked){
                          //只要有一个子选框不选中，那么全选框也不选中
                          $("#selectAll").prop("checked",false)
                      }else{
                          //当前的子选框选中，再次遍历所有子选框，看他们是否都选中
                          var items = $("input[name='selectOne']")
                          var count = 0;
                          for(var i=0;i<items.length;i++){
                              if(items[i].checked){
                                  //有一个子选框选中，计数器就+1
                                  count ++
                              }
                          }
                          //遍历完成之后，判断计数器的大小是否等于子选框的个数
                          if(items.length == count){
                              //设置全选框选中
                              $("#selectAll").prop("checked",true)
                          }
                      }
                  })*/
                  
                  $("input[name='selectOne']").click(function(){
                      //其实这里就是判断所有选中的子选框的个数是否等于子选框的个数
                      /*var count1 = $("input[name='selectOne']").length
                      
                      var count2 = $("input[name='selectOne']:checked").length
                      if(count1 == count2){
                          $("#selectAll").prop("checked",true)
                      }else{
                          $("#selectAll").prop("checked",false)
                      }*/
                      
                      $("#selectAll").prop("checked",$("input[name='selectOne']").length==$("input[name='selectOne']:checked").length)
                  })
              })
          </script>