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

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