jQuery

最近的项目用到jQuery,但之前我对前端的东西不是很熟，故参照W3CSchool的教程进行总结和笔记记录，加深印象。

---

1. jQuery是一个轻量级的javaScript函数库

• jQuery包含以下特性

  • HTML元素的选取
  • HTML元素的操作
  • CSS操作
  • HTML事件函数
  • JavaScript特效和动画
  • HTML DOM遍历和修改
  • AJAX
  • Utilities

• jQuery库位于单个JavaScript文件中，其中包含所有jQuery函数。引入jQuery库：
  /*
  
  */
  实际开发中可以这样引入

  <%    String path = request.getContextPath(); %> <script type="text/javascript" src="<%=path%>/edview/js/jquery/jquery.js"></script> //<%=path%>后面是jQuery.js实际的存放位置

  如果不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google or Microsoft 加载 CDN jQuery 核心文件。请参考问W3CSchool教程。

---

2.文档就绪函数

$(document).ready(function(){    --- jQuery functions go here ----});

---

实例中所有的jQuery函数都应该在文档就绪函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

---

3.jQuery选择器

• 元素选择器（使用css选择器来选取HTML元素）

  • $(“p”) 选取

    元素。

  • $(“p.intro”) 选取所有 class=”intro” 的

    元素。

  • $(“p#demo”) 选取 id=”demo” 的第一个

    元素

• jQuery 属性选择器（使用 XPath 表达式来选择带有给定属性的元素）

  • $(“[href]”) 选取所有带有 href 属性的元素。

  • $(“[href=’#’]”) 选取所有带有 href 值等于 “#” 的元素。

  • $(“[href!=’#’]”) 选取所有带有 href 值不等于 “#” 的元素。

  • ("[href=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。

• jQuery CSS 选择器

  • $(“p”).css(“background-color”,”red”);

---

4.jQuery事件

• 事件处理函数是当 HTML 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。

• jQuery的书写原则

  • 把所有 jQuery 代码置于事件处理函数中
  • 把所有事件处理函数置于文档就绪事件处理器中
  • 把 jQuery 代码置于单独的 .js 文件中
  • 如果存在名称冲突，则重命名 jQuery 库

---

5. jQuery效果函数

隐藏、显示、切换、以及动画效果。常见的：

• show();
• hide();
• toggle();

---

6. jQuery Callback回调函数

• A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.回调函数就是一个函数被当做参数传入另一个函数中，当另一个函数执行完成后，该函数被执行。例：

  $("p").hide(1000,function(){    alert("The paragraph is now hidden");});

• 回调函数的理解

  var fn = new Function("arg1", "arg2", "return arg1 * arg2;");fn(3, 4);   //12上面这段代码中函数的参数是字符串，最后一段字符串实际上是一段js代码，因此上一段代码中，参数function()实际上相当于一段可执行的字符串，最后会被执行。

• 应用。在涉及到动画等函数处理时，回调函数很有用。例：

  /*<p>The paragraph</p>*/    $(document).ready(function(){          $("button").click(function(){              $("p").hide(4000);             alert("The paragraph is now hidden");          });    });

  点击button后，弹出标签被隐藏的信息，但实际上p标签在4秒后隐藏，可能还未隐藏，这是就发生了逻辑上的错误，因此需要把alert(“The paragraph is now hidden”)写到callback函数中，如下

      $(document).ready(function(){          $("button").click(function(){              $("p").hide(1000,function(){                    alert("The paragraph is now hidden");                });          });    });

---

7.jQuery操作HTML

• 改变HTML内容

  $(selector).html(content);  //html()函数改变所匹配的HTML元素的内容（innerHTML）

• 添加HTML内容

  $(selector).append(content); //append()函数向所匹配的HTML元素内部追加内容

---

8.jQuery CSS函数

• $(selector).css(name,value) //为所有匹配元素的给定CSS属性设置值
• $(selector).css({properties}) //为所有匹配元素的一系列CSS属性设置值

• $(selector).css(name) //返回指定CSS属性的值

  $("p").css("background-color","yellow");$("p").css({"background-color":"yellow","font-size":"200%"});$(this).css("background-color");

• jQuery 拥有两种供尺寸操作的重要函数：

  $(selector).height(value) $(selector).width(value) 

---

9.jQuery AJAX函数

• jQuery提供了供AJAX开发的丰富函数库

• jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数

  $(selector).load(url,data,callback)

• $.ajax(options) 是低层级 AJAX 函数的语法，提供了比高层级函数更多的功能，但是同时也更难使用。
  option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数

          var params = {//三个参数为                'task_Name': task_Name,                'business_Type':business_Type,                'send_Schedule':send_Schedule,                };        $.ajax({            url:  path + '/task/queryAllTaskList',            type : 'post', /*请求方式*/            dataType : 'json', /*被返回的数据的类型 (html,xml,json,jasonp,script,text)*/            data : params,/*键值对的参数*/            success : function(data) {//data是请求后                showTerminalTalble(data.taskList);                if(null == data.errMsg || data.errMsg == "") {                    if(updatePageNum){                        paginationUtil.showPageCountSelect(data.totalNum);                    }                    if(clickbtn){                        paginationUtil.setPageNum(1);                    }                    } else {                    $("#taskTable").html("");                    $.jBoxUtil.noticeError({content: data.errMsg});                }            },            error : function(data) {                //var b=1;            }        });      }

---