JavaWeb零基础入门之jQuery

学完之后学习Java Web零基础入门之XML
视频链接:https://www.bilibili.com/video/BV1Y7411K7zz?p=1
参考手册:https://www.w3school.com.cn/html5/index.asp

一、jQuery介绍

jQuery = JavaScript + Query,是辅助JavaScript开发的类库,它的核心思想是写的更少,做的更多,注意:使用jQuery一定要先通过script标签的src属性引入jQuery库,jQuery库的获取方式在文章最后方

二、jQuery核心函数

$是jQuery的核心函数,$()就是调用$这个函数
  1. 传入的参数为函数时,在HTML文档加载完成之后自动的执行这个函数

    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
        
        <script type="text/javascript">
            $(function () {
            
                alert("页面加载完成之后,自动调用");
            })
        script>
    head>
    
  2. 传入的参数为HTML语言时,创建标签对象(jQuery对象)

    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
        <script type="text/javascript">
            $(function () {
            
                //动态创建一个div标签对象,并将其添加到body对象中
                $("
    " + //光标在第二个双引号之前时按回车会自动的加上+号 "span1" + "span2" + "
    "
    ).appendTo("body"); })
    script> head>
  3. 传入的参数为选择器字符串时:

    • $(“#属性值”):id选择器,根据id查询标签对象(jQuery对象)
    • $(“标签名”):标签名选择器,根据指定的标签名查询标签对象(jQuery对象)
    • $(“.属性值”):类选择器,根据class属性值查询标签对象(jQuery对象)
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
        <script type="text/javascript">
            $(function () {
            
                alert($("#id001")); //[object Object]
                alert($(".class002")); //[object Object]
                alert($("button").length); //3
            })
        script>
    head>
    <body>
        <button id="001">button1button>
        <button class="002">button2button>
        <button>按钮名button>
    body>
    
  4. 传入的参数为DOM对象时,会把这个DOM对象转换为jQuery对象

    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
        <script type="text/javascript">
            $(function () {
            
                var btnObj = document.getElementById("001");
                alert(btnObj); //[object HTMLButtonElement]
                alert($(btnObj)); //[object Object]
            })
        script>
    head>
    <body>
        <button id="001">button1button>
    body>
    

三、jQuery对象和DOM对象的联系与区别

1.DOM对象

  1. 通过getElement(s)Byxxx或createElement()得到的标签对象是DOM对象
  2. DOM对象Alert出的效果是:[object HTML标签名 Element]

2.jQuery对象

  1. 通过$函数创建的对象是jQuery对象,如二(2): alert( $("

    ") ); //[object Object]
  2. 通过jQuery包装的DOM对象是jQuery对象,如二(4)
  3. 通过$函数查询到的对象也是jQuery对象,如二(3)
  4. jQuery对象Alert出的效果是:[object Object]

3.jQuery对象的本质

jQuery对象是DOM对象的数组 + jQuery提供的一系列功能函数

4.jQuery对象不能使用DOM对象的属性和方法,DOM对象不能使用jQuery对象的属性和方法

5.DOM对象和jQuery对象的互相转换

  1. DOM对象转换为jQuery对象:

    • 先有DOM对象
    • $(DOM对象)就可转换为jQuery对象
  2. jQuery对象转换为DOM对象:

    • 先有jQuery对象
    • jQuery对象[下标]即可取出对应的DOM对象
      3.JavaWeb零基础入门之jQuery_第1张图片

6.jQuery对象的常用方法:

  1. jQuery对象.click( function(){} );添加点击响应函数
  2. jQuery对象.css(“background-color”,“xxx”);可设置背景颜色
  3. jQuery对象.val();可以获取、赋值表单项的value属性
  4. jQuery对象.each(function(){});遍历DOM对象数组的方法,function中写每次遍历到的对象要执行的方法,function中使用this代表当前遍历到的DOM对象

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="../script/jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      
            var btns = document.getElementsByTagName("button");
            //jQuery对象名之前习惯加$符号
            var $btns = $(btns);
            for (var i = 0; i < $btns.length; i++) {
      
                alert($btns[i]); //输出3个[object HTMLButtonElement]
            }
            $("#button01").click(function () {
      
                alert("Hello!"); //点击按钮之后出现Hello
            })
        })
    script>
head>
<body>
    <button id="button01">button1button>
    <button>button2button>
    <button>button3button>
body>

四、jQuery选择器

详细可参考jQuery文档,文档获取方式在文章末尾

1. 基本选择器

  • #id :根据id查找标签对象
  • element :根据标签名查找标签对象
  • .class :根据class查找标签对象
  • *:查找所有元素的标签对象
  • selector1,selector2…selectorN :合并选择器1,选择器2…选择器N的标签对象并返回

2. 层级选择器

  • ancestor descendant :在给定的祖先元素下匹配所有的后代元素
  • parent > child :在给定的父元素下匹配所有的子元素
  • prev + next :在同级的情况下匹配所有紧接在prev元素后的next元素
  • prev ~ siblings :在同级的情况下匹配prev元素之后的所有siblings元素

3. 基本过滤选择器

注意:标签名前置,即冒号之前为标签名

  • :first :获取匹配的第一个元素
  • :last :获取匹配的最后一个元素
  • :not(selector) :去除所有与给定选择器匹配的元素
  • :even :匹配所有索引值为偶数的元素,从0开始计数
  • :odd :匹配所有索引值为奇数的元素,从0开始计数
  • :eq(index) :匹配一个给定索引值的元素(索引从0开始计数)
  • :gt(index) :匹配所有大于给定索引值的元素(索引从0开始计数)
  • :lt(index) :匹配所有小于给定索引值的元素(索引从0开始计数)
  • :header :匹配如h1、h2、h3之类的标题元素
  • :animated :匹配所有正在执行动画效果的元素

4.内容过滤选择器

注意:标签名前置,即冒号之前为标签名

  • :contains(text) :匹配包含给定文本的元素
  • :has(selector) :匹配含有选择器所匹配的的元素的元素
  • :empty :匹配所有不包含子元素或文本的空元素
  • :parent :匹配含有子元素或文本的元素

5.属性过滤选择器

注意:标签名前置,即中括号之前为标签名

  • [attribute] :匹配包含给定属性的元素
  • [attribute=value] :匹配给定的属性是某个特定值的元素
  • [attribute!= value] :匹配所有不含有指定的属性或属性不等于特定值的元素
  • [attribute^= value]:匹配给定的属性是以某些值开始的元素
  • [attribute$= value] :匹配给定的属性是以某些值结尾的元素
  • [attribute*= value] :匹配给定的属性是以包含某些值的元素
  • [selector1][selector2]…[selectorN] :复合属性选择器,需要满足多个条件时使用

6.表单过滤选择器

注意:标签名前置,即冒号之前为标签名

  • :input :匹配所有input标签元素,不论type为哪种类型
  • :text \ :password \ :radio \ :checkbox \ :submit \ :image \ :reset \ :button \ :file \ :hidden :匹配所有input标签中type为指定类型的元素
  • :enabled :匹配所有可用元素(disabled属性设置为disabled为不可用:无法填入内容或
  • 选中)
  • :disabled :匹配所有不可用元素
  • :checked :匹配所有被选中的元素(复选框、单选框等,不包括select中的option)
  • :selected :匹配所有选中的option元素

五、jQuery元素的筛选

详细可参考jQuery文档,文档获取方式在文章末尾

  • last():获取最后一个元素(功能跟:last一样)
  • first():获取第一个元素(功能跟:first一样)
  • eq():获取给定索引的元素(功能跟:eq()一样)
  • filter(exp):留下匹配的元素
  • is(exp):判断是否匹配给定的选择器,只要有一个匹配就返回true
  • has(exp):返回包含有匹配选择器的元素的元素(功能跟:has一样)
  • not(exp):删除匹配选择器的元素(功能跟:not一样)
  • children(exp):返回匹配给定选择器的子元素(功能跟parent>child一样)
  • find(exp):返回匹配给定选择器的后代元素(功能跟ancestordescendant-样)
  • next():返回当前元素的下一个兄弟元素(功能跟prev + next功能一样)
  • nextAll():返回当前元素后面所有的兄弟元素(功能跟prev~ siblings 功能一样)
  • nextUntil():返回当前元素到指定匹配的元素为止的后面元素
  • parent():返回父元素
  • prev(exp):返回当前元素的上一个兄弟元素
  • prevAll():返回当前元素前面所有的兄弟元素
  • prevUnit(exp):返回当前元素到指定匹配的元素为止的前面元素
  • siplings(exp):返回所有兄弟元素
  • add():把add 匹配的选择器的元素添加咧当前jquery 对象中

六、jQuery的属性操作

不传参数是获取,传递参数是设置

  1. html()方法:可以设置和获取起始标签和结束标签中的内容(包括两边的标签)
  2. text()方法:可以设置和获取起始标签和结束标签中的文本(不包括两边的标签)
  3. val()方法:可以设置和获取表单项的value属性值
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      
            /*不传参数是获取,传递参数是设置*/
            alert($("div").html()); // div标签 div - span
            $("div").html("

新设置的内容

"
); //成功修改为:新设置的内容 alert($("div").text()); // div标签 div - span $("div").text("

新设置的内容

"
); //成功修改为:

新设置的内容

$("button").click(function () { $("#textId").val("新设置的默认值"); }) //点击之后文本框中出现:新设置的默认值 })
script> head> <body> <div> div标签 <span>div - spanspan>div> <input type="text" name="textName" id="textId"/> <button>点击button> body>

代码示例:val()方法可同时设置多个表单项的选中状态

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      
            $(":radio").val(["radio1"]); //radio1被选中
            //val方法内写中括号,其中再写双引号,把要选中的项的value值写入
            $(":checkbox").val(["checkbox3", "checkbox2"]);//两个被选中
            //多个只写一个中括号,多个双引号
            $("#multiple").val(["mul2", "mul4"]);//两个被选中
            $("#single").val(["sin2"]);//2被选中
        })
    script>
head>
<body>
    单选:
    <input name="radio" type="radio" value="radio1" />radio1
    <input name="radio" type="radio" value="radio2" />radio2
    <br/>
    多选:
    <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
    <br/>
    下拉多选 :
    
    <select id="multiple" multiple="multiple" size="3">
        <option value="mul1">mul1option>
        <option value="mul2">mul2option>
        <option value="mul3">mul3option>
        <option value="mul4">mul4option>
    select>
    <br/>
    下拉单选 :
    <select id="single">				
        <option value="sin1">sin1option>
        <option value="sin2">sin2option>
        <option value="sin3">sin3option>
    select>
body>
  1. attr()方法:可以设置和获取属性的值,不推荐操作checked、selected、disabled、readOnly,还可以操作自定义属性。
  2. prop()方法:可以设置和获取属性的值,只推荐操作checked、selected、disabled、readOnly

代码示例:

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      
            //attr获取的使用:括号中的双引号中放属性名
            alert($(":checkbox:first").attr("name")); //checkbox
            //attr赋值的使用:第一个双引号中放属性名,第二个双引号中放指定的值
            $(":checkbox:first").attr("name","abc"); //name属性值修改为abc
            $(":checkbox").prop("checked",false); //两个都未被选中
            //对自定义属性进行操作
            $(":checkbox:first").attr("abc","abcValue");
            //按F12可出现,临时存放一些数据
        })
    script>
head>
<body>
    <input type="checkbox" name="checkbox" value="checkbox1" checked="checked"/>checkbox1
    <input type="checkbox" name="checkbox" value="checkbox2"/>checkbox2
    <div>1234div>
    <div>1234div>
body>

代码示例:全选、全不选、反选

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      					    
            //点击全选按钮之后,四个选项以及全选全部选中
            $("#checkedAllBtn").click(function () {
      
                $(":checkbox").prop("checked",true);
            })
            //点击全不选按钮之后,四个选项以及全不选都不选中
            $("#checkedNoBtn").click(function () {
      
                $(":checkbox").prop("checked",false);
            })
            //点击反选后,四个选项反选,还需判断全选是否需要选中
            $("#checkedRevBtn").click(function () {
      
                //遍历所有的选项,反选
                $(":checkbox[name='items']").each(function () {
      
                    this.checked = !this.checked;
                })
                //判断选项中已经选择的选项的个数是否与整个选项个数相同
                var allCout = $(":checkbox[name='items']").length;
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked", allCout == checkedCount);
            })
            //点击提交之后,alert出所有选中项
            $("#submitBtn").click(function () {
      
                $(":checkbox[name='items']:checked").each(function () {
      
                    alert(this.value);
                })
            })
            //点击全选/全不选之后,对选项全选中或全不选中
            $("#checkedAllBox").click(function () {
      
                //在事件的function函数中,有一个this对象,是当前正在响应事件(标签)的DOM对象
                //将全选全不选框的是否选中状态赋值给所有的选项
                $(":checkbox[name='items']").prop("checked", this.checked);
            })
            //当手动的将所有选项选中时,全选需要被选中
            /*思路:给每个选项绑定单击事件,每选中一个选项时,
              都要判断此时选中的选项个数是否与整个选项个数相同*/
            $(":checkbox[name='items']").click(function () {
      
                var allCount = $(":checkbox[name='items']").length;
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop("checked", allCount == checkedCount);
            })
        })
    script>
head>
<body>
    <form method="post" action="">
        你爱好的运动是:<input type="checkbox" id="checkedAllBox">全选/全不选
        <br/>
        <input type="checkbox" name="items" value="足球"/>足球
        <input type="checkbox" name="items" value="篮球"/>篮球
        <input type="checkbox" name="items" value="羽毛球"/>羽毛球
        <input type="checkbox" name="items" value="乒乓球"/>乒乓球
        <br/>
        <input type="button" id="checkedAllBtn" value="全选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反选"/>
        <input type="button" id="submitBtn" value="提交"/>
    form>
body>

七、DOM的增删改

1. 内部插入

  • appendTo():a.appendTo(b) 把a插入到所有b子元素的末尾,成为最后一个子元素
  • prependTo():a.prependTo(b) 把a插入到所有b子元素的前面,成为第一个子元素
//方法中的参数可以是标签名,也可以是标签对象(jQuery对象)
$("

标题1

"
).appendTo("div"); $("

标题2

"
).prependTo($("div"));

2. 外部插入

  • insertAfter():a.insertAfter(b) 同级的情况下得到ba
  • insertBefore():a.insertBefore(b) 同级的情况下得到ab
$("

标题1

"
).insertAfter($("div")); $("

标题2

"
).insertBefore($("div"));

3. 替换

  • replaceWith():a.replaceWith(b) 用一个b替换掉所有a
  • replaceAll():a.replaceAll(b) 用a替换掉所有b(有几个b就替换几次)
$("div").replaceWith($("

标题1

"
)); $("

标题1

"
).replaceAll($("div"));

4. 删除

  • remove():a.remove() 删除a标签及其所有内容(包括文字或子标签等)
  • empty():a.empty() 清空a标签的内容(包括文字或子标签等),标签留下

5.代码示例

  1. 代码示例:两个复选框的内容从左到右、从右到左的练习
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
        select {
      
            width: 100px;
            height: 140px;
        }
        div {
      
            width: 130px;
            float: left;
            text-align: center;
        }
    style>
    <script type="text/javascript" src="jquery-1.7.2.js">script>
    <script type="text/javascript">
        //给四个按钮赋予相应的功能
        $(function () {
      
            //全部添加到右边
            $("button:eq(1)").click(function () {
      
                $("select:eq(0) option").appendTo($("select:eq(1)"));
                //空格代表所有的select的子元素
            })
            //选中添加到右边
            $("button:eq(0)").click(function () {
      
                $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
            })
            //选中删除到左边
            $("button:eq(2)").click(function () {
      
                $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
            })
            //全部删除到左边
            $("button:eq(3)").click(function () {
      
                $("select:eq(1) option").appendTo($("select:eq(0)"));
            })
        })
    script>
head>
<body>
<div id="left">					     
    <select multiple="multiple" name="sel01">
        <option value="opt01">选项1option>
        <option value="opt02">选项2option>
        <option value="opt03">选项3option>
        <option value="opt04">选项4option>
        <option value="opt05">选项5option>
        <option value="opt06">选项6option>
        <option value="opt07">选项7option>
        <option value="opt08">选项8option>
    select>
    <button>选中添加到右边button>
    <button>全部添加到右边button>
div>
<div id="right">
    <select multiple="multiple" name="sel02">
    select>
    <button>选中删除到左边button>
    <button>全部删除到左边button>
div>
body>
  1. 动态添加、删除表格记录
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="script/jquery-1.7.2.js">script>
    <script type="text/javascript">
        $(function () {
      
            //要求点击第一张表的删除键(a标签)可删除信息(在提示框中出现:是否删除'name'字样)
            //创建一个可复用的删除函数deleteFun
            var deleteFun = function(){
      
                //在事件响应的function函数中,有一个this对象,这个this对象是当前标签的DOM对象
                var $trObj = $(this).parent().parent();/*a标签的父之父是行标签*/
                //find方法用来查找后代(查找行标签的name)
                var name = $trObj.find("td:first").text();
                //confirm是JS提供的确认框函数,接收的参数将提示出来,
                //点击确定返回true,点击取消返回false
                if (confirm("你确定要删除["+name+"]吗?")) {
      
                    $trObj.remove();
                }
                //return false;可以阻止元素的默认行为(a标签默认会跳转)
                return false;
            };
            //给submit按钮绑定单击事件,可以添加到第一张表中
            $("#addEmpButton").click(function () {
      
                //获取姓名、邮箱、工资的内容
                var name = $("#empName").val();
                var email = $("#email").val();
                var salary = $("#salary").val();
                //创建一个行标签,将获取到的内容添加到第一张表中
                var $trObj = $("" +
                    ""+name+"" +
                    ""+email+"" +
                    ""+salary+"" +
                    "Delete" +
                    "");
                //将获得的行标签添加到第一张表中
                $trObj.appendTo($("#employeeTable"));
                //需要给新添加的数据中的a标签(删除键)绑定单击事件
                //如果函数加括号,代表调用,结果是返回值
                //如果函数不加括号,可省略function(){},作用一致
                $trObj.find("a").click(deleteFun);
            });
            $("a").click(deleteFun);
        });
    script>					
head>
<body>
<table id="employeeTable">
    <tr>
        <th>Nameth>
        <th>Emailth>
        <th>Salaryth>
        <th> th>
    tr>
    <tr>
        <td>Tomtd>
        <td>[email protected]td>
        <td>5000td>
        <td><a href="deleteEmp?id=001">Deletea>td>
    tr>
    <tr>
        <td>Jerrytd>
        <td>[email protected]td>
        <td>8000td>
        <td><a href="deleteEmp?id=002">Deletea>td>
    tr>
    <tr>
        <td>Bobtd>
        <td>[email protected]td>
        <td>10000td>
        <td><a href="deleteEmp?id=003">Deletea>td>
    tr>
table>
<div id="formDiv">
    <h4>添加新员工h4>
    <table>
        <tr>
            <td class="word">name: td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            td>
        tr>
        <tr>
            <td class="word">email: td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            td>
        tr>
        <tr>
            <td class="word">salary: td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            td>
        tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                button>
            td>
        tr>
    table>
div>
body>

八、CSS样式操作

  • addClass():添加样式

  • removeClass():删除样式

  • toggleClass():有则删除,无则添加样式

  • offset():获取和设置元素的坐标,设置时必须有两个属性top和left

    设置时的格式:jQuery对象.offset({top:值,left:值});

九、jQuery动画

以下动画方法都可以添加参数:

  1. 第一个参数是动画执行的时长,以毫秒为单位

  2. 第二个参数是回调函数:function(){},即动画完成之后自动执行的函数

  3. 基本动画:

    • show():将隐藏的元素显示

    • hide():将显示的元素隐藏

    • toggle():显示则隐藏,隐藏则显示

  4. 淡入淡出动画:

    • fadeIn:淡入
    • fadeOut():淡出
    • fadeToggle():淡入/淡出切换
    • fadeTo():在指定时长内将透明度修改到指定的值,0代表透明,1代表可见,0.5代表半透明
      第一个参数指定时长(ms),第二个参数设置透明度,第三个参数设置回调函数

十、jQuery事件操作

1.$(function(){});window.onload = function(){};的区别:

  1. 触发时间:
    • jQuery是浏览器的内核解析完页面的标签(如body中的标签),创建好DOM对象之后就会立马执行,此时页面上没有任何内容
    • JS是浏览器的内核解析完标签创建好DOM对象之后等标签显示时的内容(如图片,网页等)加载完成之后执行,此时页面上已经有body中的内容
  2. 触发顺序:jQuery先、JS后
  3. 各有多个时执行的次数:
    • jQuery所有function函数都会按照顺序执行
    • JS只会执行最后一个function函数

十一、jQuery中其他的事件处理方法

  • click():可以绑定单击事件(参数中传function(){}),可以触发单击事件(参数中无function)
  • mouseover():鼠标移入事件
  • mouseout():鼠标移出事件
  • bind():可以给元素一次性绑定一个或多个事件,第一个参数加双引号,其中放空格隔开的多个事件,第二个参数是function(){},即事件响应后的代码
  • one():用法与bind一致,但是one方法绑定的事件只会响应一次
  • unbind():与bind方法相反的操作,解除事件的绑定
  • live():用来绑定事件,即使这个元素先前并未绑定,而是后面动态创建出来的也自动绑定

十二、事件的冒泡

  1. 事件的冒泡是指父子元素绑定同一个事件时,当触发子元素的事件时,父元素的同一个事件也随之自动的响应,如:

    //span是div的字标签,点击span时,先出现“我是span”提示框,再自动出现“我是div”提示框
    $("div").click(function(){
           
      alert('我是div');
    });
    $("span").click(function(){
           
      alert('我是span');
    });
    
  2. 阻止事件的冒泡发生:在子元素的事件函数体内return false;

十三、事件对象

  1. 事件对象:包含触发的事件的所有信息的一个对象
  2. 获取事件对象的方式:在给元素绑定事件时函数格式为function(event){},参数中的名字可任意,一般取名为event,这个event就是事件对象
//1.原生JS代码获取事件对象
document.getElementById("xxx").onclick=function(event){
     		
  console.log(event);//点击后event事件对象可打印在控制台
}
			
//2.jQuery代码获取事件对象
$("xxx").click(function(event){
     
	console.log(enent);
});
			
//3.使用bind对多个事件绑定同一个函数时,获取当前事件对象对方式
$("xxx").bind("mouseover mouseout",function(event){
     
	if(event.type == "mouseover"){
     
		console.log("鼠标移入");
	}else if(event.type == "mouseout"){
     
		console.log("鼠标移出");
	}
});
  1. 代码示例:图片跟随
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="script/jquery-1.7.2.js">script>
<script type="text/javascript">
   $(function(){
      
      $("#small").bind("mouseover mouseout mousemove",function (event) {
      
         if (event.type == "mouseover") {
      
            $("#showBig").show();
         } else if (event.type == "mousemove") {
      
            console.log(event);
            $("#showBig").offset({
      
               //将大图的坐标跟随鼠标的坐标即可实现大图随着鼠标移动
               //pageX、pageY为鼠标在页面上的坐标
               //+10的原因是让大图与鼠标保持一定的距离
               /*原因是从小图左上角向右下角滑动时,鼠标滑动过快会导致
                 光标在大图上,无法识别在小图上移动,故保持一定距离*/
               left: event.pageX + 10,
               top: event.pageY + 10
            });
         } else if (event.type == "mouseout") {
      
            $("#showBig").hide();			
         }
      });
   });
script>
head>
<body>
   
   <img id="small" src="img/small.jpg" />
   
   <div id="showBig">
      <img src="img/big.jpg">
   div>
body>
html>

十四、jQuery库和文档

1.jQuery库

  1. jquery-1.7.2.js
  2. jquery-1.7.2.min.js

2. jQuery文档

jQueryAPI_1.7.1_CN.chm

3.下载链接

链接: https://pan.baidu.com/s/1W6cHC6flWg7PrxVkdI8Trg 密码: pb0b

你可能感兴趣的:(JavaWeb学习,找工作前的自救,jquery,dom,javascript)