• jQuery


    回顾JavaScript

    1-JavaScript的主要作用是:操作DOM对象。
     
    2-原生的js代码定位DOM对象 常用的三种方式: 
      1)通过ID属性:    var domObj1 = document.getElementById("id名");       
           2)通过class属性:var domObj2 = document.getElementsByClassName("样式名称");
           3)通过标签名:    var domObj3 = document.getElementsByTagName("标签名称");

    3-缺点:
      1)JavaScript,定位DOM对象命令,过于冗长;
      2)JavaScript,定位DOM对象方式,过于单一;
      3)JavaScript,定位DOM对象中属性操作,过于繁琐;
     
      总之js原生代码的编写十分繁琐,操作不方便,容易影响开发效率。在实际开发中,开发者通常选择使用jQuery这种更便捷的方式去操作dom对象。 (jQuery的本质:在内部封装了相应的JS方法)
     
    4-jQuery定位DOM对象的方式:
            1)$("#id值")
            2)$(".class名")
            3)$("标签名")
     

    一、jQuery

     1-介绍

       jQuery是一款跨主流浏览器的JavaScript库,封装了JavaScript相关方法的调用。
        使用jQuery能简化JavaScript对DOM对象的定位以及DOM对象属性操作开发步骤   
     
         库:相当于java的工具类,库是存放东西的, jQuery是存放js代码的地方, 放的用js代码写的function

    2-使用

    1)下载jQuery工具文件(官网:https://jquery.com
    • 压缩版      (去除空格,体积更小。不方便阅读。但是网络传输速度更快。——项目上线时使用)    
    • 未压缩版  (可读性比较高——项目开发时使用)
    2)jQuery导入到工程中
    <script type="text/javascript" src="">  需要在src值中指定jquery文件在该项目中的相对路径。
         
    </script> 
    3)会将jQuery文件加载到浏览器上
     

    3-jQuery对象与DOM对象

           DOM对象 —— 使用javascript的语法创建的对象叫做dom对象, 也就是js对象。 
                       1) 在浏览器加载网页时,由浏览器负责创建的。
                       2) 一个html标签对应一个DOM对象。
                       3) 可以通过管理DOM对象,来对关联html标签中属性进行操作。
     var obj=  document.getElementById("txt1");  //obj是dom对象,也叫做js对象
     obj.value;
     
          jQuery对象 —— 使用jquery语法表示对象叫做jquery对象, 【注意:jquery表示的对象都是数组。】 
                       1) 是[jquery函数 $() ]负责创建的
                       2) jquery对象就是一个【数组】
                       3) jquery对象中存放的本次定位【dom对象】
                       4) 可以通过jquery对象中【功能函数】,来快速的对定位【dom对象】进行操作管理
     var jobj =  $("#txt1"); //obj就是使用jquery语法表示的对象。 也就是jquery对象。 它是一个数组。现在数组中就一个值。

    4-jQuery对象与DOM对象转换

       dom对象可以和jquery对象相互的转换。

    1) 将jQuery对象转换为DOM对象?—— 语法: 从数组中获取第一个对象, 第一个对象就是dom对象, 使用[0]或者get{0).  
        如:$(dom对象)[0]  或 $(dom对象)
     实质:就是通过循环从数组中提取DOM对象的过程。
    for(var i=0;i<$obj.length;i++){
        var domObj =  $obj[i];
    }
    2) 将DOM对象转换为jQuery对象?——  语法: $(dom对象)实质:就是把一个DOM对象添加到数组中的过程。
    var $obj = $(domObj);

    3) 为什么要进行DOM和jQuery的转换?——目的是要使用对象的方法,或者方法。

       jQuery对象与DOM对象之间属性和函数彼此不能调用。 
         只有DOM对象才可以使用dom对象的属性或者方法。
         只有jQuery对象才可以使用jquery提供的函数

    注意:在实际开发中,便于区分JS对象 和 JQ对象。在定义变量的时候,通常在JQ变量 前 加一个$ 美元符号。
        

             

     JQUERY中最常见的异常:
                    ...............
     

    二、基本选择器

       选择器就是用来定位dom对象的一类字符串。

      DOM对象被定位后,就可以通过jQuery的函数来操作DOM对象。

      定位条件:

                        可以根据ID编号,根据标签类型名,根据标签采用样式选择器
          基本选择器的使用:
     

    1-id选择器

      $("#id编号")  ———— 代替  document.getElementById("id号")

            根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中 并返回。返回这个数组就是【jquery对象】

                                     

     


    2-class选择器

       $(".样式选择器名称") ———— 代替document.getElementsByClassName("样式选择器名")

             使用样式的名称定位dom对象 。将使用了指定的样式选择器的dom对象保存到同一个数组中, 并返回。返回这个数组就是【jquery对象

     

     


    3-标签选择器 

       $("标签类型名") ———— 代替JS中的document.getElementsByTagName()

           将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回 ,返回的这个数组就是【jquery对象】

     

     


    4-所有选择器 

      $("*"):  定位浏览器中所有的DOM对象保存到同一个数组中并返回。返回的这个数组就是【jquery对象】

     

     


    5-组合选择器

         $("id选择器,.class选择器,标签选择器")

            $("条件1,条件2"):只要DOM对象满足其中的一种条件,就会被定位到数组中
                                            相当于mysql or   where sal>=3000 or job='mangaer'


    三、层级选择器

    1 定位条件: 
                         可以根据标签之间父子关系定位
                         可以根据标签之间兄弟关系定位
     
    2 层级选择器 标签之间关系:
       

    3 层级选择器的选择:

    1) $("定位父标签条件>定位子标签条件")
    定位当前父标签下,所有满足条件的【直接子标签】    
    2)  $("定位父标签条件 定位子标签条件")
    定位当前父标签下,所有满足条件的【直接子标签】和【间接子标签】
    3)   $("定位当前标签条件~定位兄弟标签条件")
    定位当前标签【后面】,所有满足条件的兄弟标签
    4)  $("定位当前标签条件+定位兄弟标签条件")
    定位当前标签【后面与之紧邻的】,并且满足条件的所有兄弟标签
    5) $("定位当前标签条件").siblings("定位兄弟标签条件")
    定位当前标签【前面与后面】所有满足条件的兄弟标签
     

    四、表单选择器 (input标签选择器

    1-使用<input>标签的type属性值,定位dom对象的方式。
    2-语法: $(":type属性值")

    3-注意:跟是否有from表单标签无关

     
    0)常见的input标签类型:
                             <input type="text">                    文本框
                             <input type="password">          密码框
                             <input type="radio">                  单选框
                             <input type="checkbox">          复选框
                             <input type="file">                     文件选择框
                             <input type="button">               命令按钮 (该按钮一定会关联一个脚本函数,否则无含义)
                             <input type="submit">              提交按钮 (该按钮用于唤醒浏览器。浏览器则根据form表单中的内容发生请求)
                             <input type="reset">                  重置按钮
     
         
    1)INPUT标签作用:
                              作为浏览器向网站发送请求是携带请求参数
     
    2)INPUT标签的使用:               
                               格式         $(":type属性名字")
               

     过滤器语法

       过滤器是一个用来筛选DOM对象的字符串。用于在定位了DOM对象后,根据一些条件进行筛选DOM对象。
     
      1)对已经定位到jquery对象中DOM对象,进行二次过滤筛选的;
      2)过滤器不能独立使用, 必须和选择器一起使用。且声明在选择器后面;
      3)六种过滤器(三种常见过滤器);
      4)将多个过滤器放到同一个jquery函数,进行层层过滤 ;         

    五、基本过滤器

    1.基本过滤器

    过滤条件:
                    根据已经定位的DOM对象在jquery对象中存储位置进行二次过滤筛选

    使用

           $("选择器:first"):留下满足条件中的第一个DOM对象
                                   例子:$(":button:first"):定位页面中第一个button
           $("选择器:last"):留下满足条件中的最后一个DOM对象
                                   例子:$(":button:last"):定位页面中最后一个button
           $("选择器:eq(下标值)"): 留下满足条件中的指定位置的DOM对象
                                    例子:$("div:eq(2)") 定位页面中第三个DIV
           $("选择器:lt(下标值)"):留下满足条件中的指定位置之前的所有Dom对象
                                     例子:  $(":checkbox:lt(2)"):页面中前两个checkbox
           $("选择器:gt(下标值)"): 留下满足条件中的指定位置之后的所有Dom对象
                                     例子: $(":button:gt(3)"):位置在第四个butotn之后的所有的button
     

     

     


    2.基本属性过滤器

     过滤条件:
                     根据标签在声明时是否为指定属性进行手动赋值
                     根据标签的属性内容与【指定内容】关系进行过滤器
                       
             
      问题1: 哪一个DIV中没有name属性?
                         所有DIV标签都有name属性
      问题2: 哪一个DIV中name属性的值是""空字符串?
                            第一个DIV没有手动为name属性赋值,因此name属性值是默认值,就是""。 (属性的默认值不会为null)
     
     使用
                1). $("选择器[属性名]"):留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象
                                         
                例子: $("div[name]")
     
                                                  <div name="two">2</div>
                                                  <div name="three">3</div>

                  2). $("选择器[属性名='值']"):留下满足定位条件的并且指定属性内容【等于】指定内容DOM
                         
     $("div[name='two']")  
                                         <div name="two">2</div>
                                             
                   $("div[name='']")
                                          <div>1</div>
                                             
      
                   $("div[name!='four']")
                                           <div>1</div>
                                           <div name="two">2</div>
                                           <div name="three">3</div>

     

                        3. $("选择器[属性名^='值']"):留下满足定位条件的并且指定属性内容以【指定内容为开头】所有DOM                      
              例子: $("div[name^='t']")   
                                       <div name="two">2</div>
                                       <div name="three">3</div>
     
     
                         4. $("选择器[属性名$='值']")留下满足定位条件的并且指定属性内容以【指定内容为结尾】所有DOM
                 例子:$("div[name$='e']")  
                                    <div name="three">3</div>

                          5.$("选择器[属性名*='值']")留下满足定位条件的并且指定属性内容【包含】指定内容的所有DOM
              例子: $("div[name*='o']")  
                                     <div name="two">2</div>
                                     <div name="four">4</div>

                          6.$("选择器[属性名1][属性名2*='值'][属性名3^='值']")

    回顾:html标签属性分类:

         表单域标签:     

                        1)基本属性:         id,name,title,rowspan    绝大多数标签都拥有的属性。
     
                        2)  样式属性:         背景,字体,边框
     
                        3)  value属性:      只存在表单域标签 <input>,<select>,<textarea>
     
                        4) 工作状态属性:      chekced,disabled,selected     只存在表单域标签中  
     
                        5) 监听事件属性 : onclick ,onchange....

    六、表单对象属性过滤器   (工作状态属性过滤器的使用 

    1-概述

      根据表单中DOM对象的状态情况,来定位DOM对象的。

    • 启用状态      enabled 
    • 不可用状态  disabled
    • 选择状态      checked —— 例如radio, checkbox  

    2-类型

     1)  $("选择器:enabled"):留下满足条件的并且处于【可用状态】的DOM             

    $(":button:enabled")  // 定位所有处于可用状态的button按钮
    $(":text:enabled")   // 定位所有处于可用状态的文本框 
    2)  $("选择器:disabled"):留下满足条件的并且处于【不可用状态】的DOM                   
    $(":button:disabled"):// 定位所有处于不可用状态的button按钮
    $(":text:disabled")    // 定位所有处于不可用状态的的文本框  
    3)$("选择器:checked"): 留下满足条件的并且处于【选中状态的】DOM             
    $(":checkbox:checked")         //定位复选框中被选中的元素  
    $(":checkbox:checked:first")  // 定位复选框中第一个被选中的元素
    $(":radio:checked")           // 定位单选框被选中的元素 
    4)  $("选择器:selected"):留下满足条件的并且处于【选中状态的】DOM
    $("select>option:selected")    // 定位下拉列表中被选中的元素


    回顾:JavaScript中事件绑定方式

      1.嵌入式绑定

     <input type="button" onclick="fun1()">
      缺点:一次只能为一个标签绑定监听事件
     

      2.基于DOM对象绑定方式

    var array = docuemnt.getElementsByName("ck");
        for(var i=0;i<array.length;i++){
             var domObj =  array[i];
             domObj.onclick = fun1;
    }

    缺点:需要开发人员自行遍历数组,来绑定监听事件


    四、 jQuery监听事件函数

    jQuery监听事件函数名字就是【jquery监听事件函数】去掉on

                  

    1-jQuery给DOM对象绑定事件方式

    方式1- $(选择器).jQuery监听事件名称( 事件的处理函数)

    • $(选择器) —— 定位dom对象, dom对象可以有多个, 这些dom对象都绑定事件了。
    • 事件名称  —— 就是JS事件去掉on的部分。

        例如 js中的单击事件 onclick(),去掉on,得到的就是 jQuery中的事件名称click。(都是小写的)

    • 事件的处理函数 —— 就是一个function定义 ,当事件发生时,会执行这个函数的内容。
    例一: 
    $("#btn").click(funtion(){ //例如为id值为btn的按钮绑定单击事件。 alert("btn按钮单击了") })
    例二: $(
    ":button").click(fun1); // 为页面中所有的btton按钮绑定onclick以及对应处理函数fun1

    方式2-$(选择器).on( 事件名称 , 事件的处理函数)     

    例: <input type="button" id="btn">

    $("#btn").on("click", function(){ 
        alert("btn按钮单击了") 
    } )

    2-常见的jQuery监听事件绑定类型

       $obj.bind("jquery监听事件函数名",处理函数)      //以这种方式绑定监听事件,可以解除的
     
       $obj.unbind("jquery监听事件函数名")                //将指定监听事件从DOM对象身上移除。
     
       $obj.unbind():                                                            //将所有监听事件从DOM对象身上移除。
     
     

    五、jQuery中属性操作函数

    1. val函数: 
      —— 操作数组中 DOM 对象的 value 属性.
    • $obj.val(): 无参数调用形式, 读取数组中第一个 DOM 对象的 value 属性值
    • $obj.val(值):有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值


    2.prop函数:
      —— 工作状态属性  checked,disabled,selected
     
                    1) $obj.prop("checked",true):为jquery对象中所有DOM对象的checked属性值赋值为true
     
                    2) $obj.prop("checked"):读取jquery对象中第一个DOM对象的【checked属性值】
     
     
    3.attr函数
      —— 基本属性  id  name  title  rowspan
    • $(选择器).attr(“属性名”):            获取 DOM 数组第一个对象的属性值
    • $(选择器).attr(“属性名”,“值”):     对数组中所有 DOM 对象的属性设为新值
    $obj.attr("name","ck") //为jquery对象中所有DOM对象的【name属性】统一赋值为[ck]
     
    $obj.attr("title")   //读取jquery对象中第一个DOM对象的【title属性】的值
     
    4.text函数
      —— 操作属性innerText,双目标签的文本显示内容  <div>123<div>     <br/>123
    • $(选择器).text()              无参数调用,读取数组中所有 DOM 对象的文字显示内容,将得到内容拼接为一个字符串返回
    • $(选择器).text(值)           有参数方式,对数组中所有 DOM 对象的文字显示内容进行统一赋值
     $obj.text("123")    //为jquery对象中所有DOM对象的innerText属性赋值为"123"
     
     $obj.text();       //读取jquery对象中所有DOM对象的innerText属性内容,拼接为一个字符串返回操作数组中所有 DOM 对象的【文字显示内容属性】

         

    5.css函数
     
     
    6.each函数
     
      1). 可以对 数组, json ,dom数组循环处理。 数组, json中的每个成员都会调用一次处理函数。
    var arr = { 1, 2, 3} //数组
         var json = {"name":"lisi","age":20 }
         var obj = $(":text");

       语法: $.each( 循环的内容, 处理函数 ) :表示使用jquery的each,循环数组,每个数组成员, 都会执行后面的“处理函数”一次。

         $: 相当于是java的一个类名
          each:就是类中的静态方法。静态方法调用,可以使用 类名.方法名称

         
     
    处理函数:function(index, emelent) :
             index, element都是自定义的形参, 名称自定义。
              index:循环的索引
              element:数组中的成员



         js循环数组:
          for(var i=0;i<arr.length;i++){
                                   var item = arr[i]; //数组成员
                //操作数组成员
                shuchu( i , item);
          }

         function shuchu(index, emlemnt){
            输出index ,element
          }

      2).第二种语法规则:
    循环jquery对象, jquery对象就是dom数组
        jquery对象.each( function(index,element) {} )
     
     
     
    一、show() & hide():
     
         show():  负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示  style="display:block"
     
         hide():   负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏  style="display:none"

     
    二、remove() & empty():
     
         empty:将当前标签子标签进行清除处理
     
         remove:将当前标签及其子标签一并删除

    三、append() & appendTo()
         1.共同点:都是操作标签中innerHTML,为当前标签添加子标签
         2.append():  父标签.append(子标签);父亲给自己找了一个儿子
           appendTo(): 子标签.appendTo(父标签); 儿子各自找了一个爹
     
     
     
     
     
     
     


    回顾:使用原生的js代码 运用ajax技术 实现页面的局部刷新效果。
     


    使用jquery的函数,实现ajax请求的处理。 (重要!!!!)

        没有jquery之前,使用XMLHttpRequest做ajax , 有4个步骤。

      jquery简化了ajax请求的处理,使用三个函数可以实现ajax请求的处理。

         1) $.ajax() : jquery中实现ajax的核心函数。
         2) $.post() : 使用post方式做ajax请求。
         3) $.get() : 使用get方式发送ajax请求。

         $.post()和$.get() 他们在内部都是调用的 $.ajax()


         介绍 $.ajax函数的使用, 函数的参数表示请求的url, 请求的方式,参数值等信息。
        
                     $.ajax()参数是一个json的结构。

          例如: $.ajax(  {名称:值, 名称1:值1..... } )

                 例如: $.ajax(  
                                                       {  async:true ,
                                  contentType:"application/json" ,
                                  data: {name:"lisi",age:20 },
                      dataType:"json",
                      error:function(){ 请求出现错误时,执行的函数  },
                      success:function( data ) {     // data 就是responseText, 是jquery处理后的数据。 },            
                      url:"bmiAjax",       
                                                          type:"get"
                                                       }  )
                                            
                                      


    json结构的参数说明:

    1)async:是一个boolean类型的值, 默认是true ,表示异步请求的。可以不写async这个配置项
                xmlHttp.open(get,url,true),第三个参数一样的意思。

    2)contentType: 一个字符串,表示从浏览器发送服务器的参数的类型。 可以不写。
                        例如你想表示请求的参数是json格式的, 可以写application/json

    3)data: 可以是字符串,数组,json,表示请求的参数和参数值。 常用的是json格式的数据

    4)dataType: 表示期望从服务器端返回的数据格式,可选的有: xml , html ,text ,json
              当我们使用$.ajax()发送请求时, 会把dataType的值发送给服务器, 那我们的servlet能够
                读取到dataType的值,就知道你的浏览器需要的是 json或者xml的数据,那么服务器就可以
                返回你需要的数据格式。

    5)error: 一个function ,表示当请求发生错误时,执行的函数。
            error:function() {   发生错误时执行  }  


    6)sucess:一个function , 请求成功了,从服务器端返回了数据,会执行success指定函数
                  之前使用XMLHttpRequest对象, 当readyState==4 && status==200的时候。
        
          7)url:请求的地址
          8)type:请求方式,get或者post, 不用区分大小写。 默认是get方式。

      主要使用的是 url , data ,dataType, success .



    -------------------
    先使用原生的js代码 运用ajax技术,实现界面的局部刷新效果
    再将代码进行升级,使用jquery 来实现ajax请求。
    ---------------------


    2.6 AJAX
    jQuery 提供多个与 AJAX 有关的方法。通过 jQuery AJAX 方法,您能够使用 HTTP Get
    和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON 同时能够把接收的数据更新
    到 DOM 对象。
     
    2.6.1 $.ajax()
    $.ajax() 是 jQuery 中 AJAX 请求的核心方法,所有的其他方法都是在内部使用此方法。
    语法:
    $.ajax( { name:value, name:value, ... } )
    说明:参数是 json 的数据,包含请求方式,数据,回调方法等
    async : 布尔值,表示请求是否异步处理。默认是 true
    contentType :发送数据到服务器时所使用的内容类型。默认是:
    "application/x-www-form-urlencoded"。
    data:规定要发送到服务器的数据,可以是:string, 数组,多数是 json
    dataType:期望从服务器响应的数据类型。jQuery 从 xml, json, text,, html 这些中测试最可能
    的类型
    "xml" - 一个 XML 文档
    "html" - HTML 作为纯文本
    "text" - 纯文本字符串
    "json" - 以 JSON 运行响应,并以对象返回
    error(xhr,status,error):如果请求失败要运行的函数, 其中 xhr, status, error 是自定义的形参名
    success(result,status,xhr):当请求成功时运行的函数,其中 result, status, xhr 是自定义的形参

    type:规定请求的类型(GET 或 POST 等),默认是 GET, get,post 不用区分大小写
    url:规定发送请求的 URL。
    以上是常用的参数。
    error() , success()中的 xhr 是 XMLHttpRequest 对象。
    2.6.2 $.get()
    $.get() 方法使用 HTTP GET 请求从服务器加载数据。
    语法:$.get(url,data,function(data,status,xhr),dataType)
    url 必需。规定您需要请求的 URL。
    data 可选。规定连同请求发送到服务器的数据。
    function(data,status,xhr)可选。当请求成功时运行的函数。data,status,xhr 是自定义形参名。
    参数说明:
    data - 包含来自请求的结果数据
    status - 包含请求的状态("success"、"notmodified"、"error"、"timeout"、"parsererror")
    xhr - 包含 XMLHttpRequest 对象
    dataType 可选。规定预期的服务器响应的数据类型。默认地,jQuery 会智能判断。可能的
    类型:
    "xml" - 一个 XML 文档
    "html" - HTML 作为纯文本
    "text" - 纯文本字符串北京动力节点 www.bjpowernode.com
    50
    "json" - 以 JSON 运行响应,并以对象返回
    2.6.3 $.post()
    $.post() 方法使用 HTTP POST 请求从服务器加载数据。
    语法:$.post(URL,data,function(data,status,xhr),dataType)
    参数同$get()

     
     
     
     
     
     
     
     
     
     

     

  • 相关阅读:
    新闻发布项目——接口类(newsTbDao)
    新闻发布项目——接口类(commentDao)
    新闻发布项目——接口类(newsTbDao)
    新闻发布项目——接口类(UserDao)
    新闻发布项目——接口类(UserDao)
    新闻发布项目——接口类(UserDao)
    新闻发布项目——实体类(categoryTB)
    新闻发布项目——实体类(categoryTB)
    新闻发布项目——实体类(categoryTB)
    新闻发布项目——实体类(comment)
  • 原文地址:https://www.cnblogs.com/penguin1024/p/15523246.html
Copyright © 2020-2023  润新知