【转】 web前端基础知识-(五)jQuery

【转】 web前端基础知识-(五)jQuery

通过之前的学习我们已经了解了html、css、javascript的相关知识;本次我们就共同学习进阶知识:jQuery~

一、什么是jQuery?

jQuery其实就是一个轻量级的javascript函数库,通过它我们可以"写的少做的多";

jQuery库包含以下功能:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

二、jQuery使用

jQuery目前分为1.x 2.x和3.x版本,这里咱们以1.12版本为例;

中文文档链接:http://jquery.cuishifeng.cn/

1. 准备工作

1. 网上下载1.12.4,网盘链接:https://pan.baidu.com/s/1hsiFumw 密码: bfmw

2. 将js文件放到同级目录,导入js:

<javascript src="jquery-1.12.4.js"></javascript>

2. 查找元素

2.1 选择器

2.1.1 #id选择器

id是唯一的,可通过#id查找元素;

实例:

1)新建一个html文件,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1"><a>我是i1</a></div>
        <div id="i2"><span>我是I2</span></div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

2)在谷歌浏览器中打开html文件,F12切换到console下,输入以下代码:

$('#i1');

效果如图所示:

【转】     web前端基础知识-(五)jQuery

2.1.2 .class选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下:

$(".c1")

实例:

1)在上述html文件中添加一行:

<div class="c1"><span>我是c1</span></div>

2)在谷歌浏览器中打开html文件,F12切换到console下,输入以下代码:

$('.c1');

效果如下:

【转】     web前端基础知识-(五)jQuery

2.1.3 标签选择器

当然,我们也可以直接查找指定的标签;

拿以上html文件为例,查找a标签:

$('a');

2.1.4 组合选择器

以上方式也可结合使用;

实例:

1)添加html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1">按id查找</div>
        <div><a>标签a查找</a></div>
        <div class="c1"><span>我是c1</span></div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

2)组合查找:

$('#i1,a,.c1');

效果如下:

【转】     web前端基础知识-(五)jQuery

2.1.5 层级选择器

新建html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1">
            <a>我是a1</a>
            <div>
                <a>标签a2查找</a>
                <a>标签a3查找</a>
            </div>
        </div>
        <div id="i2">
            <a>标签a查找</a>
        </div>
        <div class="c1">
            <span>我是c1</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html>

后代选择器

$('#i1 a');

结果如下:

【转】     web前端基础知识-(五)jQuery

子选择器:

$('#i1>a');

结果如下:

【转】     web前端基础知识-(五)jQuery

2.1.6 属性选择器

上面的这些基本能够满足咱们常用需求,但是如果我在html文件中再加上两句呢?请帮忙查找代码中含有cc的对象:

<div cc>我是cc</div>
<div cc="boy">我是boy</div>

此时,jQuery引入了一种属性选择器:

$('[cc]');

想要查询指定的属性值:

$('[cc="boy"]');

2.1.7 基本筛选器

$('a:first').text(); //查找符合条件的a标签中的第一个元素
$('a:last').text();  //查找符合条件的a标签中的最后一个元素
$('a:eq(0)').text(); //查找符合条件的a标签中下标为0的元素
$('a:eq(1)').text(); //查找符合条件的a标签中下标为1的元素
$('a:eq(2)').text(); //查找符合条件的a标签中下标为2的元素
$('a:eq(3)').text(); //查找符合条件的a标签中下标为3的元素

【转】     web前端基础知识-(五)jQuery

2.1.8 其他

$("input[type='text']") #查找input标签中type=text的元素
$(':text') #查找text元素
$(':enabled')
$(':disabled')
$('::checked')
$('::selected')

总结:

结合以上内容,咱们来实现一个全选反选和取消的实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <input type="button" value="全选" onclick="chooseALL()"/>
        <input type="button" value="反选" onclick="convertALL()"/>
        <input type="button" value="取消" onclick="cancelALL()"/>
        <thead>
            <tr>
                <th>选项</th>
                <th>姓名</th>
                <th>地址</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>CC</td>
                <td>北京</td>
                <td>男</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script><!--导入jQuery文件-->
    <script>
        function chooseALL() {
            $('#tb :checkbox').prop('checked',true);//全选函数:找到tb下的checkbox元素,并都置为checked
        }
        function convertALL() {
            $(':checkbox').each(function () {
                var v=$(this).prop('checked')?false:true;//反选函数-三元运算符:$(this)表示当前选择的元素;如果当前的元素被选中则取消勾选,如果当前的元素未被勾选则选中;
                $(this).prop('checked',v)
            })
        }
//        function convertALL() {
//            $(':checkbox').each(function () {
//                if ($(this).prop('checked')) {
//                    $(this).prop('checked', false);
//                } else {
//                    $(this).prop('checked', true);
//                }//反选函数:$(this)表示当前选择的元素;如果当前的元素被选中则取消勾选,如果当前的元素未被勾选则选中;
//            })
//        }
        function cancelALL() {
            $('#tb :checkbox').prop('checked',false);//取消函数:查找tb下的checkbox元素,若被选中则取消勾选
        }
    </script>
</body>
</html>

2.2 筛选

筛选器是对选择器选定的jQuery对象做进一步选择。

2.2.1 next

获取指定元素的下一个兄弟元素

$(".p2").next();

2.2.2 nextAll

获取其后的所有兄弟元素

$(".p2").nextAll();

2.2.3 nextUntil

获取其后的元素,直到参数能匹配上的为止,不包括结束条件那个

$(".p2").nextUntil('.p4');

2.2.4 prev

获取指定元素的前一个兄弟元素

$(".p3").prev();

2.2.5 prevAll

获取指定元素前面的所有兄弟元素

$(".p3").prevAll();

2.2.6 prevUntil

获取指定元素前面的所有兄弟元素,直到参数里的条件能够匹配到的。 注意参数条件本身不会被匹配

$(".p4").prevUntil("p1");

2.2.7 parent

获取指定元素的直接父元素

html文件:

<div style="position:relative">    
    <p>//我是span的直接父元素,我会被匹配到
    <span>我是一个span</span>
  </p>
</div>

console输出:

$("span").parent();

2.2.8 parents

获取指定元素的所有祖先元素,一直到<body></body>

$("span").parents();

2.2.9 parentsUntil

获取指定元素的祖先元素,直到参数里能匹配到的为止

$("span").parentUntil("div");

2.2.10 children

筛选获取指定元素的资源

语法:children(expr);  获取指定元素的资源,expr为子元素筛选条件

$("div").children(".p2");

2.2.11 siblings

获取指定元素的兄弟元素,不分前后

语法:siblings(expr);  expr为筛选条件,不符合条件的不会选中;

html文件:

<div>
    <p>我是第一个P</p>        //会被选中,我是.p2的兄弟元素
    <p class="p2">我是第二个P</p>  //不会被选中,我是自己
    <p>我是第三个P</p>        //会被选中,我是.p2的兄弟元素
    <p class="p4">我是第四个P</p>  //会被选中,我是.p2的兄弟元素
</div>

console输出:

$(".p2").siblings();

2.2.12 find

从指定元素中查找子元素

语法:find(expr|obj|ele)  expr:匹配表达式 | obj用于匹配的jQuery对象 | DOM元素

$("div").find(".p2"); 

2.2.13 eq

筛选指定索引号的元素

语法:eq(index|-index)  索引号从0开始,若为负值,则从最后一个开始倒数,最后一个从-1开始

$("p").eq(1);  //如果选择器改为  $("p").eq(-1),则我是第四个P会被选中

<!--html文件如下:-->    
  <div>
    <p>我是第一个P</p>
    <p>我是第二个P</p>  //会被选中,索引值为1
    <p>我是第三个P</p>
    <p>我是第四个P</p>
  </div>  

2.2.14 first

筛选出第一个匹配的元素

$("p").first();

2.2.15 last

筛选出最后一个匹配的元素

$("p").last();

2.2.16 hasClass

检查匹配的元素是否含有指定的类

语法:hasClass(class)  class为类别名  //返回布尔值

html文件:

<div>
    <p>我是第一个P</p>
    <p class="p2">我是第二个P</p>
    <p>我是第三个P</p>
    <p>我是第四个P</p>
</div>

console下输出:

if($("p").hasClass("p2"))
  {
    alert("我里面含有class=p2的元素");  //会弹出,p里的确存在class="p2"的元素
  }

3. 操作元素

3.1 文本操作

html文档如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div id="i1">
            <a>我是a1</a>
            <div>
                <a>标签a2查找</a>
                <a>标签a3查找</a>
            </div>
        </div>
        <input type="text" value="测试"/>
        <div cc>我是cc</div>
        <div cc="boy">我是boy</div>
        <div id="i2">
            <a>标签a4查找</a>
        </div>
        <div class="c1">
            <span>我是c1</span>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
</body>
</html> 

1)text() 方法返回被选元素的文本内容。

$("#i1").text();

效果如下:

【转】     web前端基础知识-(五)jQuery

2)text("XXXX") 设置被选元素的文本内容;

$("#i1").text("我是修改后的内容");

效果如下:

【转】     web前端基础知识-(五)jQuery

3)html() 方法返回被选元素的内容 (inner HTML)。如果该方法未设置参数,则返回被选元素的当前内容。

$("#i1").html();

效果如下:

【转】     web前端基础知识-(五)jQuery

4)html("XXXX") 方法设置被选元素的内容 (inner HTML)

$("#i1").html("<a>修改html内容</a>");
$("#i1").html();

效果如下:

【转】     web前端基础知识-(五)jQuery

5)val()返回或设置被选元素的值。元素的值是通过 value 属性设置的。该方法大多用于 input 元素。

$(":text").val(); //返回指定元素的值
$(":text").val("修改后的测试内容"); //设置指定元素的值

效果如下:

【转】     web前端基础知识-(五)jQuery

3.2 样式操作

1)addClass()

向匹配的元素添加指定的类名,多个类名以空格隔开;

$("#i1").addClass("c1");
$("#i1").addClass("c2 c3");

2)removeClass()

从所有匹配的元素中删除全部或指定的类;多个类名以空格隔开;

$("#i1").removeClass("c1");
$("#i1").removeClass("c1 c3")

3)toggleClass()

从匹配的元素中删除或者添加一个类;该方法检查每个元素中指定的类。如果不存在则添加类,如果已设置则删除之。

//如某个div已存在c1类
$("#i1").toggleClass("c1"); //删除c1类
$("#i1").toggleClass("c2 c3");//添加c2 c3类

3.3 属性操作

1)attr() 设置或返回被选元素的属性值,专门用于自定义属性;

html文件如下:

<div>
    <div id="i1" cc="c1">
        我是C1
    </div>
    <div id="i2" cc="love">
        我是C2
    </div>

console输出:

$("#i1").attr("cc"); //获取元素cc的属性值
$("#i1").attr("cc","修改后的c1"); //修改元素cc的值
$("#i1").attr("cc"); 

2)removeAttr() 删除被指定元素

$("#i1").removeAttr("cc"); //删除指定元素cc
$("#i1").attr("cc"); //返回被指定元素的属性值,结果为undefined

3)prop() 设置或返回被选元素的属性和值;专门用于checkbox,radio

html文件:

<div>
    <input type="checkbox" id="c1"/> 北京
    <input type="checkbox" id="c2"/> 上海
</div>

console输出:

$("#c1").prop("checked");  //北京未被选中,返回false
$("#c1").prop("checked",true);  //设置北京被选中

3.4 文档处理

1)append()

方法在被选元素的结尾(仍然在内部)插入指定内容。

html文件:

<div>
    <p id="p1"> 北京</p>
    <p id="p2"> 上海</p>
</div>

console输出:

$("p").append("--------我是添加的内容"); 

2)prepend()

方法在被选元素的开头(仍然在内部)插入指定内容。

console输出:

$("p").prepend("--------我是添加的内容"); 

3)after()

在被选元素后插入指定的内容。

$("p").after("--------我是添加的内容"); 

4)before()

在被选元素前插入指定的内容。

$("p").before("--------我是添加的内容"); 

5)remove()

移除被选元素,包括所有文本和子节点;不会保留元素占用的位置;

$("p").remove(); 

6)empty()

从被选元素移除所有内容,包括所有文本和子节点;只是清除内容,会保留元素占用的位置

$("p").empty(); 

7)clone()

生成被选元素的副本,包含子节点、文本和属性。

$("p").append($("p").clone()); 

3.5 CSS处理

css() 返回或设置匹配的元素的一个或多个样式属性。

html文件:

<p id="p1" style="color: blue;height:20px;"> 北京</p>

console输出:

$("p").css('color'); //获取p标签的color属性值
$("p").css('color','red'); //设置P标签的color属性值为red

总结:

结合以上例子,我们来实现一个点赞的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="day17-test/jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            addFavor(this);
        });
        function addFavor(self) {
            var fontSize=15;
            var top=0;
            var right=0;
            var opacity=1;
            var tag=document.createElement('span');
            $(tag).text("+1");
            $(tag).css("color","green");
            $(tag).css("position","absolute");
            $(tag).css("fontSize",fontSize+"px");
            $(tag).css("top",top+"px");
            $(tag).css("right",right+"px");
            $(tag).css("opacity",opacity);
            $(self).append(tag);
            var obj=setInterval(function () {
                fontSize = fontSize + 5;
                top = top - 5;
                right = right - 5;
                opacity = opacity - 0.1;
                $(tag).css("fontSize",fontSize+"px");
                $(tag).css("top",top+"px");
                $(tag).css("right",right+"px");
                $(tag).css("opacity",opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            },100);
        }
    </script>
</body>
</html>

3.6 位置

3.6.1 offset

获取匹配元素在相对浏览器窗口的偏移量;

返回一个对象,包括两个属性。left:相对浏览器窗口左边的距离。top:相对浏览器顶部的距离。

$("#div1").offset().left;  //返回id为div1相对于浏览器窗口最左边的距离

$("#div1").offset().top;  //返回id为div1相对于浏览器窗口最顶部的距离

3.6.2 position

获取匹配元素在相对父元素的偏移量;

返回一个对象,包括两个属性。left:相对父元素最左边的距离。top:相对父元素最右边的距离。只对可见元素有效。

html文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position:relative;background-color:red;height:200px;width:100px;">
        <div>
            <div id='i1' style='position:absolute;height:80px;border:1px;background-color:blue;top:8px;left:10px;'>测试</div>
        </div>
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
</html>

console输出:

$("#i1").position();

3.6.3 scrollTop

scrollTop()获取匹配元素距离滚动条顶部的距离,说白了就是边框的最顶部与当前显示出来的最顶部的距离。

scrollTop(val)设置匹配元素距离滚动条顶部的距离;

//html文件内容:
<div style="background-color:red;height:2000px;width:2000px;"></div>

//console输出:
$(window).scrollTop();
$(window).scrollTop(0);

3.6.4 scrollLeft

scrollLeft() 获取匹配元素距离滚动条顶部的距离,说白了就是边框的最左边与当前显示出来的最左边的距离。

scrollLeft(val) 设置匹配元素距离滚动条顶部的距离;

//html文件内容:
<div style="background-color:red;height:2000px;width:2000px;"></div>

//console输出:
$(window).scrollLeft();
$(window).scrollLeft(0);

3.6.5 height

height() 获取匹配元素的高度值  //不包括padding,不包括边框 val可以是字符串"300px"、也可以是数字300,还可以是一个函数,返回值作为参数

height(val)    设置匹配元素的高度值

3.6.6 width

width()     获取匹配元素的宽度值  //不包括padding,不包括边框

width(val)     设置匹配元素的宽度值

3.6.7 innerHeight

innerHeight()    获取匹配元素的高度值   //包括padding但不包括border

innerHenght(val)  设置匹配元素的高度值

3.6.8 innerWidth

innerWidth()     获取匹配元素的宽度值  //包括padding但不包括border

innerWidth(val)     设置匹配元素的宽度值

3.6.9 outerHeight

outerHeight()    获取元素的高度值  //包括padding和border

outerHeight(val)    设置元素的高度值

3.6.10 outerWidth

outerWidth()    获取匹配元素的宽度值  //(包括padding和border)

outerWidth()     设置匹配元素的宽度值

3.7 事件

3.7.1 事件列表

1.blur()        当失去焦点时触发。包括鼠标点击离开和TAB键离开。
2.change()      当元素获取焦点后,值改变失去焦点事触发。
3.click()       当鼠标单击时触发。
4.dblclick()      当鼠标双击时触发。
5.error()      当javascript出错或img的src属性无效时触发。
6.focus()       当元素获取焦点时触发。注意:某些对象不支持。
7.focusin()      当元素或其子元素获取焦点时触发,与focus()区别在于能够检测其内部子元素获取焦点的情况。
8.focusout()     当元素或者其子元素失去焦点时触发,与focusout()区别在于能够检测内部子元素失去焦点的情况。 
9.keydown()       当键盘按下时触发。
10.keyup()      当按键松开时触发。
11.mousedown()   当鼠标在元素上点击后触发。
12.mouseenter()   当鼠标在元素上穿过时触发。mouseenter与mouseover的区别是,鼠标从mouseover的子元素上穿过时也会触发而mouseenter不会。
13.mouseleave()   当鼠标从元素上移出时触发。
14.mousemove()   当鼠标在元素上移动时触发。.clientX 和 .clientY分别代表鼠标的X坐标与Y坐标。
15.mouseout()    当鼠标从元素上移开时触发。
16.mouseover()   当鼠标移入元素时触发。
17.mouseup()    当鼠标左键按下释放时触发。
18.resize()     当浏览器窗口大小改变时触发。 $(window).resize();
19.scroll()     当滚动条发生变化时触发。
20.select()     当input里的内容被选中时触发。
21.submit()     提交选中的表单。
22.unload()     当页面卸载时触发。 

3.7.2 事件常用方法

1)bind() 绑定事件

语法:bind(type,[data],fn)

type参数可以是上面的22个方法(注意:不能带括号); 参数data是属性值传递给事件对象的额外数据,fn是处理函数。可以bind多个事件,也可以为同一事件绑定多个函数。

//html文件
<div id="d1">我是d1,点我!</div>
//console输出
$("#d1").bind("click",function(){ alert("你好!"); });

2)unbind() 移除事件

语法:unbind([type],[fn])    

移除元素已经绑定的事件;type:指定要移除的事件,fn指定要移除的方法。当没有参数时,所有的事件都移除。

$("#d1").unbind();//移除id为d1元素的所有绑定事件
$("#d1").unbind("click");//移除id为d1元素的click事件
$("#d1").unbind("click",fn1);//移除id为d1元素单击事件中的fn1函数,如果该事件绑定了多个函数,对其他函数没影响。

3)delegate()

为指定的元素添加一个或多个事件,并绑定处理函数,一个事件也可以绑定多个函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="d1">
        <p>我是p1
            <a>我是a1</a>
            <a>我是a2</a>
            <a>我是a3</a>
        </p>
    </div>
    <div id="d2">
        <p>我是d2</p>
        <a>我是a4</a>
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    $("#d1").delegate('a','click',function(){alert("123")});
</script>
</html>

4)undelegate()

删除有delegate()函数绑定的一个或多个事件处理函数;

$("#d1").undelegate('a','click');

5)on()--官方推荐用法

函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外,你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()等事件函数。

on()支持直接在目标元素上绑定事件,也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

$("#d1").on('click','a',function(){alert("123")});

6)off()

跟on()成对匹配使用,移除指定元素的绑定事件

$("#d1").off('click','a');
$("#d1").off('click','a',function(){alert("123")});

3.7.3 其他

1)阻止事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="text" id="i1"/>
        <a href="http://www.baidu.com">
            <input type="button" id="b1" value="提交"/>
        </a>
    </div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    $("#b1").bind("click",function () {
        val= $("#i1").val();
        if (val== ""){
            $("#i1").css("color","red");
            $("#i1").val("输入不能为空");
            return false;
        }
        else{
            return true;
        }
    })
</script>
</html>        

 

2)外部js引用时自动执行

在实际工作中我们会大量引用外部js,难免碰到同名的情况,为了解决这个问题,我们就需要在引用时自动执行文件;

$(function(){					
    $(...)					
})

3.8 jQuery扩展

上一篇:第八周练习


下一篇:洛谷P1031题解