Jquery的基本入门

来源：互联网发布：达特康票务网络系统编辑：程序博客网时间：2024/06/15 05:29

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对象中的valuealert($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>

jquery代码

$(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"));});});

省市联动

<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($(""));    });});})

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提交表单

    javascript] view plain copy        $.ajax({                  type: "POST",                  url:"SearchInfo/QueryMoreInfo",                  data:$('#fm').serialize(),// 序列化表单值                  async: false,                  error: function(request) {                      alert("Connection error");                  },                  success: function(data) {                      window.location.href="跳转页面"                  }           });

案例三：
三级联动效果

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+")");jquery中将json字符串转换成对象alert($.parseJSON(str1));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>");        });    }});});});

阅读全文

0 0