Jquery的使用-白红宇

Jquery的使用

阅读量：5011 次

发布时间：2019-06-12

本文共 5194 字，大约阅读时间需要 17 分钟。

使用Jquery的准备工作：

　 1.把Jquery文件引入到项目中（注意：Jquery文件有很多迭代版本，不一定要和这里的版本一样）

　　 2.在html中引入Jquery文件

一、万能的$

　　$是一个对象，也是一个方法

　　1.1直接获取页面的元素

　　　　$("选择器") 例:$("#id值")

　　1.2 dom就绪后执行相应的代码

　　　　window.onload = function(){...} -> 页面加载完毕后执行(所有数据请取完毕)

window.onload = function(){    //1.可以获取当前页面中的元素    var mydiv = $("#mydiv");    console.debug(mydiv);}

　　　　$(function(){...}) -> dom加载就绪(只需要读取到标签与属性即可【速度更快，性能更好】)

$(function(){      //1.可以获取当前页的元素      //  jQuery的方案获取的元素      var mydiv = $("#mydiv");      console.debug(mydiv);})

　　1.3 原生的dom对象和jQuery对象互转

　　　　jQuery对象的功能更加强大【object{...}】，是一个伪数组(它不是数组，但是可以当作数组用，数组中装的就是原生对象)

　　　　1、把原生对象转成jQuery对象

$(function(){ 　　console.debug($(mydivDom));})

　　　　2、把jQuery对象转成原生对象

$(function(){  　　 console.debug(mydiv[0]);       console.debug(mydiv.get(0)); })

　　1.4 直接创建dom元素 原本：document.createElement("div");

var div = $("
     
      sdfasdfsdf
     
");

　　1.5 直接调用相应的方法 $.get(..)/$.parseJSON(..)

console.debug($.isNumeric(5));console.debug($.isNumeric("5z"));

二、选择器

　　2.1基本选择器(id,class,标签,多选择器)

　　2.1层级选择器(父子，后代)


     Insert title here
         
             
                  四大名著                
                           
        西游记
                    
        水浒传
                    
        三国演义
                    
        红楼梦
                
       
        
        
      西施
        
      貂蝉
        
      王昭君
        
      杨玉环
    
     
    
             
      白龙马
        
      孙悟空
        
      猪八戒
        
      沙悟净
    
     
    
             
      黄鸟
        
      白鸟
        
      绿鸟
        
      红鸟

　　2.3伪类选择器


     Insert title here
         
             
                  四大名著                
                           
        西游记
                    
        水浒传
                    
        三国演义
                    
        红楼梦
                
       
        
        
      西施
        
      貂蝉
        
      王昭君
        
      杨玉环
    
     
    
             
      白龙马
        
      孙悟空
        
      猪八戒
        
      沙悟净
    
     
    
             
      黄鸟
        
      白鸟
        
      绿鸟
        
      红鸟

　　2.4属性选择器 -> $(div[name])/$(div[name=xx])


     Insert title here
         
             
                  四大名著                
                           
        西游记
                    
        水浒传
                    
        三国演义
                    
        红楼梦
                
       
        
        
      西施
        
      貂蝉
        
      王昭君
        
      杨玉环
    
     
    
             
      白龙马
        
      孙悟空
        
      猪八戒
        
      沙悟净
    
     
    
             
      黄鸟
        
      白鸟
        
      绿鸟
        
      红鸟

三、事件注册

　　$(元素).click(function(){...})

　　$(元素).bind("click",function(){...}) / unbind

　　$(元素).on("click",function(){...}) / off

=============事件委派===========

　　$("#userTbody").on("click",".del",function(){})

　　监听tbody的点击事件,当你点击的位置(元素)符合 .del -> 就触发事件

　　　　　　//on("绑定的事件","需要满足的条件",满足条件执行的函数（方法）)        $("#userTbody").on("click",".del",function(){            //parent():找到元素的父元素            //$(this).parent().parent().remove();            //closest:从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。。            $(this).closest("tr").remove();        })

四、列举

　　1、each() -> 遍历咱们的元素

　　　　jQuery对象.each(function(index,ele){

　　　　　　//index:遍历的下标

　　　　　　//ele:遍历的每一个元素

　　　　})

　　2、length -> 一个jQuery元素(伪数组)的长度

　　　　jQuery对象.length/jQuery.size()

　　3、attr/prop -> 获取与设置某个元素的属性

　　　　prop:支持多选与单选(attr支持有问题)

　　　　var 属性值 = jQuery元素.attr/prop("属性名");

　　　　jQuery元素.attr/prop("属性名","属性值");

　　4、HTML代码/文本/值

　　　　var html = jQuery对象.html() -> 获取一个对象中的所有html的内容

　　　　jQuery对象.html("<div>xxx</div>") -> 设置一个对象中的所有html的内容

　　　　//val只用于设置表单元素(input,textarea,select)的值

　　　　var html = jQuery对象.val()

　　　　jQuery对象.val("<div>xxx</div>")

　　5、css -> 获取与设置元素的某个样式

　　　　jQuery元素.css("样式名","样式值");

　　　　jQuery元素.css("background-color","red");

　　6、文本操作

　　　　jQuery元素.append("元素"); -> 把括号中的元素放到jQuery元素中

　　　　jQuery元素.appendTo("元素"); -> 把jQuery元素追加到元素中

　　　　jQuery元素.empty():清空所有子元素

　　　　jQuery元素.remove():删除自己

　　　　jQuery元素.clone([true/false]):当前元素复制一下 (加true可以连事件一起复制)

　　7、查询

　　　　jQuery元素.closest("条件") -> 从当前元素向上查询,找到第一个满足条件的元素为止

　　　　jQuery元素.parent() -> 找到当前元素的父元素

　　8、ready(fn) :页面载入 [dom就绪后执行相应的代码]

　　　　$(function(){...})

五、代码案例

　　1、案例一：


     用户新增测试    首页    
             
      
               用户录入
       
        用户名:
               E-mail:
               电话:
                       
               
                       
          
     
    
     
    
     
                                                          用户名                         E-mail                         电话                         操作

　　2、案例二：