jQuery入门--1

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