本文链接： https://blog.csdn.net/rr19941112/article/details/77338302

Jquery

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

Jquery使用方式

导入jquery的js文件
```
jquery-1.11.0.min.js
```

在html或者jsp进行关联

<script src="../js/jquery-1.11.0.min.js"></script>

Jquery使用

jquery基本操作

获取jquery中dom对象

//获取dom对象
var $username = $("#username");
//弹出dom对象中的value
alert($username.val())

事件派发

$(function() {
        $("#mbt").click(function() {
            alert("哈哈哈，被点击了")
        });
});

各种事件

页面加载事件

onload = function() {
        alert(12);
}

$(function() {
        alert ("hahaha");
})

获取焦点失去焦点

$(function() {
        $("#username").blur(function() {
            alert("失去焦点");
        }).focus(function() {
            alert("获取到焦点");
        });
    });

$(function() {
    $("#e01").mouseover(function() {

        alert("鼠标移上");

    }).mouseout(function() {
        alert("鼠标移出")
    });
});

JQuery选择器

选择器效果
基本选择器
- 标签选择器
```
$("div")
```
- id选择器
```
$("#div1"）
```
- 类选择器
```
$(".div1")
```
- 所有元素的选择器
```
$("*")
```
- 组合选择器
```
$("div,#div1")
```

层级选择器

    $("div p")
    $("div .mini")

选择自己
```
$(this)
```
属性选择器
```
$("[href]");
```
奇数偶数选择器
```
$("tr:even");
$("tr:odd");
```
类型选择器
```
$(":button")
```
属性选择器
```
$([name='username'])
```

jquery基本效果

显示隐藏
```
hide()

show()

toggle()    
```
淡入淡出
```
fadeIn()
fadeOut()
fadeToggle()
```
滑动
```
slideDown()
slideUp()
slideToggle()
```

Jquery工具

jQuery HTML

jQuery 捕获和设置

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性 -
 attr() alert($("#w3s").attr("href"));
设置属性
$("#a").attr("href", "http://www.baidu.com");

JQuery 添加元素

append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

JQuery 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("p").remove(".italic");

案例演示

全选全不选
prop() 方法

prop() 方法设置或返回被选元素的属性和值。


<table id="tab1" border="1" width="800" align="center">
<tr>
    <td colspan="5"><input type="button" value="添加" /> <input type="button" value="删除"></td>
</tr>
<tr>
    <th><input type="checkbox" id="selectAll"></th>
    <th>分类ID</th>
    <th>分类名称</th>
    <th>分类描述</th>
    <th>操作</th>
</tr>
<tr>
    <td><input type="checkbox" class="itemSelect"></td>
    <td>1</td>
    <td>手机数码</td>
    <td>手机数码类商品</td>
    <td>
        <a href="">修改</a>|
        <a href="">删除</a>
    </td>
</tr>
<tr>
    <td><input type="checkbox" class="itemSelect"></td>
    <td>2</td>
    <td>电脑办公</td>
    <td>电脑办公类商品</td>
    <td>
        <a href="">修改</a>|
        <a href="">删除</a>
    </td>
</tr>
<tr>
    <td><input type="checkbox" class="itemSelect"></td>
    <td>3</td>
    <td>鞋靴箱包</td>
    <td>鞋靴箱包类商品</td>
    <td>
        <a href="">修改</a>|
        <a href="">删除</a>
    </td>
</tr>
<tr>
    <td><input type="checkbox" class="itemSelect"></td>
    <td>4</td>
    <td>家居饰品</td>
    <td>家居饰品类商品</td>
    <td>
        <a href="">修改</a>|
        <a href="">删除</a>
    </td>
</tr>

$(".itemSelect").prop("checked",$(this).prop("checked"));

左右移动

<table>
<tr>
    <td>
        <select id="left" multiple="true" style="width:100px" size="10">
            <option>呜呜</option>
            <option>哈哈</option>
            <option>吼吼</option>
            <option>呵呵</option>
            <option>嘿嘿</option>
            <option>嘻嘻</option>
            <option>呼呼</option>
            <option>喵喵</option>
        </select>
    </td>
    <td>
        <input type="button" value=">" id="toRight1"><br>
        <input type="button" value=">>" id="toRight2"><br>
        <input type="button" value=">>>" id="toRight3"><br><br>
        <input type="button" value="<" id="toLeft1"><br>
        <input type="button" value="<<" id="toLeft2"><br>
        <input type="button" value="<<<" id="toLeft3">
    </td>
    <td>
        <select id="right" multiple="true" style="width:100px" size="10">

        </select>
    </td>
</tr>

省市联动

<select name="pro">
        <option >-请选择-</option>
        <option value="0">黑龙江</option>
        <option value="1">吉林</option>
        <option value="2">辽宁</option>
        <option value="3">河南</option>
    </select>
<select name="city">
        <option >-请选择-</option>     
</select>

// 定义二维数组:
var arr = new Array(4);
arr[0] = new Array("哈尔滨","齐齐哈尔","大庆","佳木斯");
arr[1] = new Array("长春市","吉林市","四平市","通化市");
arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
arr[3] = new Array("郑州市","洛阳市","安阳市","南阳市");



$(function() {
$("#pro").change(function() {
    //获取当前所选择的城市信息
    var pro = $(this).val();
    //初始化city的信息
    $("#city").html($("<option>").html("-请选择-"));
    //获取数组
    var cityArr = arr[pro];
    //遍历数组
    for(var i = 0; i < cityArr.length; i++) {
        $("#city").append("<option>" + cityArr[i] + "</option>")
    }


    //cities.each(function(){
    //  $city.append("<option>"+this+"</option>");
        //$city.html($(""));
    });
});
})

$(function() {

$("#toRight1").click(function() {
    $("#left>option:selected:first").appendTo($("#right"));
});


$("#toRight2").click(function() {
    $("#left>option:selected").appendTo($("#right"));
});

$("#toRight3").click(function(){
    $("#right").append($("#left>option"));
});

});

JQuery中的AJAX

load

//通过load加载本地文件
$("#div1").load("index.jsp");

get

//地址，回调
$.get(URL,callback);

$.get("${pageContext.request.contextPath}/servlet/AJaxServlet?username=zhangsan",function(data, status) {
        alert(data + "----" + status);
});

post
//地址，参数，回调
$.post(URL,data,callback);

$.post("${pageContext.request.contextPath}/servlet/AJaxServlet", {
    username : "zhangsan",
    password : 123
},
function(data, status) {
    alert(data + "----" + status);
});

ajax
$.ajax({name:value, name:value, … })

JQuery案例

案例一：

验证用户名是否存在
案例二:

ajax提交表单
案例二：

三级联动效果

js中json

JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';


JSON对象:
var str2 = { "name": "cxh", "sex": "man" };


JSON对象
var s = {
    "name" : "Jack",
    "age" : 30,
    "isMan" : true,
    "school" : {
        "name" : "Lonton University",
        "location" : "English"
    }
};
alert(s.school.name);



JSON字符串转换为JSON对象
var m = '{"username" : "zhangsan","password" : "lisi"}';
var mobject=eval("("+m+")");

JSON对象转换成JSON字符串（需要导入json.js包）
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符

案例

JQuery实现三级联动:

-请选择- -请选择- -请选择-

<input  type="submit" />

//1--先将省加载进来
$(function() {
    $.ajax({
        type : "POST",
        url : "${pageContext.request.contextPath }/user_province.action",
        dataType : "json",
        success : function(data) {
            //alert(data);
            //1--获取pro选择框
            $("#proId").html("<option value=0>-请选择-</option>");
            //2-遍历data，设置pro展示的城市
            $.each(data, function() {
                $("#proId").append(
                        "<option value=" + this.provinceid + ">"
                                + this.name + "</option>");

            });
        }
    });


$("#proId").change(function(){

$.ajax({
    type : "POST",
    url : "${pageContext.request.contextPath }/user_city.action",
    //data 根据省的id 获取城市  
    data:"pid="+$(this).val(),
    dataType : "json",
    success : function(data) {
        //alert(data);
        //1--获取pro选择框
        $("#cityId").html("<option value=0>-请选择-</option>");
        //2-遍历data，设置pro展示的城市
        $.each(data, function() {
            $("#cityId").append(
                    "<option value=" + this.cityid + ">"
                            + this.name + "</option>");
        });
    }
});
});

$("#cityId").change(function(){

$.ajax({
    type : "POST",
    url : "${pageContext.request.contextPath }/user_xcity.action",
    //data 根据省的id 获取城市  
    data:"cid="+$(this).val(),
    dataType : "json",
    success : function(data) {
        //alert(data);
        //1--获取pro选择框
        $("#xcityId").html("<option value=0>-请选择-</option>");
        //2-遍历data，设置pro展示的城市
        $.each(data, function() {
            $("#xcityId").append(
                    "<option value=" + this.xcityid + ">"
                            + this.name + "</option>");
        });
    }
});
});
});

Jquery的基本选择器_二级联动_全选反选_左右移动_AJAX