Jquery、Bootstrap

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()

• 美元符号定义： jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪函数

您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

• 试图隐藏一个不存在的元素
• 获得未完全加载的图像的大小

(function() {}) = $(document).ready(function()

一、 Jquery对象

1.1  DOM 对象转成jQuery对象

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

function myclick(){

    var div1 = document.getElementById("myinput");

    //把dom转换成jQuery对象

    var jdiv1 = $(div1);

    alert(jdiv1.val());
}

1.2 JQuery对象转换成dom对象

function myclick(){

    var div1 = document.getElementById("myinput");

    //把dom转换成jQuery对象

    var jdiv1 = $(div1);

    //把jQuery对象转换成dom对象

    alert(jdiv1\[0\].value);

    alert(jdiv1.get(0).value);

}

二、 JQuery选择器

2.1 基本选择器

1. #id    用法: $(”#myDiv”); 返回值 单个元素的组成的集合

function myclick(){

    //根据id选择器获得jQuery对象

    var jinput = $("#myinput");
    
    alert(jinput.val());
}

2. Element 用法: $(”div”) 返回值  集合元素，元素选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

3. class 用法: $(”.myClass”) 返回值  集合元素

4. selector1, selector2, ..., selectorN 用法: $(”div,span,p.myClass”)   返回值  集合元素，多种选择器一同使用我们需要使用逗号来分隔。

function myclick(){

    var divs = $(".divcss,input,textarea,#div1");

    divs.each(**function**(){

        var divObj = $(**this**);

        alert(divObj.html());

    })
}

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

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

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("\[href$='.jpg'\]") 选取所有 href 值以 ".jpg" 结尾的元素。

2.2 层次选择器

用法$(”form input”) ;  返回值  集合元素，空格代表下级。

用法:$(”form > input”) ; 返回值  集合元素。

2.3 过滤选择器

用法: $(”tr:first”) ; 返回值  单个元素的组成的集合     说明: 匹配找到的第一个元素

:last用法: $(”tr:last”)  返回值  集合元素     说明:匹配找到的最后一个元素.与:first相对应.

三、事件

(function() {})，即$(document).ready(function()，什么时候执行？
答案：DOM加载完毕之后执行。
DOM是什么？DOM就是一个html页面的标签树:

那么什么时候，DOM加载完成了呢？即页面所有的html标签（包括图片等）都加载完了，即浏览器已经响应完了，加载完了，全部展现到浏览器界面上了。

总结
DOM在第一次页面加载完毕后，就在内存里了，无论后面怎么通过ajax的方式去局部修改html页面，都只是对内存中的DOM树进行修改，而DOM在第一次页面加载完毕后就已经加载完毕了。

所以后面js文件（动态加载或者head中加载）再使用到$(function() {})函数肯定会执行的。

1.事件结合选择器会把选择器选出来的一组元素都加上事件

2.在元素上可以不去指定事件

3.事件的方法建议使用匿名方法

4.事件的赋值必须要放在jQuery的主函数内部

四、效果

jQuery toggle() 切换

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){
$("p").toggle();
});

五、jQuery - 获得内容和属性

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

实例

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});

六、jQuery 遍历

向上遍历 DOM 树

这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

• parent()
• parents()
• parentsUntil()

向下遍历 DOM 树

下面是两个用于向下遍历 DOM 树的 jQuery 方法：

• children()
• find()

在 DOM 树中水平遍历

有许多有用的方法让我们在 DOM 树进行水平遍历：

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

四、Ajax

AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(_selector_).load(_URL_,_data_,_callback_);

$("#div1").load("demo_test.txt");

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

$.get(URL,callback);

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

function ajaxInvoke(){

var uname = $("#username").val();

var opt = {

    type:'post',//请求方式

    url:'${path}/login',//请求的地址

    data:{

        username:uname//username=uname

        },

    dataType:'json',//返回值的类型，一般使用两种，text，json

    success:function(responseJSON){//ajax调用成功后的回调方法

        //如果dataType是json那么要求后台一定要返回JSONObject或者JSONArray对象,这个后台的json对象会直接转换成js中的json

        //alert(responseJSON.id+ "  "+responseJSON.name +"   "+responseJSON.age);

        for(var i = 0; i < responseJSON.length; i++){

            alert(responseJSON\[i\].id + "  "\+ responseJSON\[i\].name + "  "+responseJSON\[i\].age);

        }

    },

    error:function(){//调用失败进入的方法

        alert("系统错误");//如果404或者后台报异常就会走入error

        }

    };

    $.ajax(opt);

    }

五、Bootstrap

5.1 Bootstrap网格系统

本章节我们将讲解 Bootstrap 的网格系统（Grid System）。
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

5.2 Bootstrap 模态框（Modal）插件

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

如果您想要单独引用该插件的功能，那么您需要引用modal.js。或者，正如Bootstrap 插件概览一章中所提到，您可以引用_bootstrap.js_或压缩版的_bootstrap.min.js_。

用法

您可以切换模态框（Modal）插件的隐藏内容：

• 通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle="modal"，同时设置data-target="#identifier"或href="#identifier"来指定要切换的特定的模态框（带有 id="identifier"）。

• 通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

  $('#identifier').modal(options)