前端开发Jquery基础

2018web前端开发框架|千峰前端开发视频教程|移动前端开发就业前景

首先它是一个JavaScript 库,有助于大大简化 JavaScrip 以及 Ajax 编程。使用 jquery,开发人员可以把握问题的要点,并使用尽可能最少的代码实现想要的功能。
1.永久免费;
2.性能好,最少的代码做最多的事情;
3.它是一个“标准”,大型开发必用;
4.基于jquery开发的插件非常丰富(轮播图插件:swiper与superslider).等。
jquery的过滤筛选:eq()索引从0开始;:first ; :last :even基数行(索引为:0,2,4….);:odd偶数行(索引:1,3,5……..)
filter()与not()两个是反义词,都针对本身dom进行操作,前者对筛选出的dom进行操作,后者对选中之外的dom进行操作。
has()与find();两者都是对后代进行筛选。
has()后代中如果有符合筛选条件的,会将整个后代作为一个整体,对这个整体进行操作;
find()筛选出符合条件的后代,对筛选出的dom单独进行操作。

还有的方法可以设置也可以查看,例如:
   html()不写表示查看,html('content')表示添加;
   css('width')表示查看,css('width','100px')表示设置;
   同样的attr('class')表示查看类名;attr('class','box')表示设置类名。

对类名进行添加也可以使用addClass(‘类名’) ; 使用removeClass(‘类名’)对类名进行删除; toggleClass(‘类名’)类名存在就删除,不存在就添加

一张图可以区分:width() innerWidth() outerWidth() outWidth(true);高度同样适用。

对节点进行操作如:insertBefore()与before(); insertAfter()与after(); appendTo()与append(); prependTo()与prepend() 等。
对节点操作执行的是“剪切”功能。执行后操作的dom对象从原位置剪切到指定的位置。虽然上述操作两个一组,均可以实现相同的功能,
但它们对后续dom对象的操作不一样。

 最后写一下on() 与off(),分别为绑定与取消绑定事件。

描述on()之前要先说下bind()、live()、delegate();
bind是用来绑定一个或多个事件的,live其实bind的一个加强版,用来绑定通过JavaScript或者jquery添加的DOM元素事件,其语法结构是一样;
稍有不同的是bind()是循环绑定给指定的dom元素,这样造成效率低下;live()则是绑定在该dom元素的根元素document上,造成document太冗余;
javascript 代码

$(‘p’).bind(‘mouseenter mouseleave’, function() {
    alert(‘ok’)
})
$(‘p’).live(‘mouseenter mouseleave’, function() {
    alert(‘ok’)
})

delegate用于事件委托,将事件绑定在dom元素的父元素上;也是绑定过JavaScript或者jquery添加的DOM元素事件。

javascript 代码

$(‘div’).delegate(‘p’, ‘click’, function() {
    alert(‘p’)
})

而on是在1.7之后新增的,是把bind,live,delegate全部合并在一起了,高版本的jquery
bind(),live(),delegate()已经被丢弃。

言归正传,来看on()与off() 实例:

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title></title>
    <script src=”js/jquery-1.11.3.js” type=”text/javascript” charset=”utf-8″></script>
    <style type=”text/css”>
        .div1 {
            width: 100px;
            height: 100px;
            background: black;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
    <script type=”text/javascript”>
        //on同时绑定多个事件;mouseover执行一次失效
        $(function () {
            $(‘.div1’).on(‘mouseover click’, function () {
                alert(‘我会弹’);
                $(‘.div1’).off(‘mouseover’);
            });
            //on分别绑定多个事件;mouseover执行一次失效
            $(‘.div2’).on({
                ‘mouseover’: function () {
                    alert(‘鼠标移入事件’);
                    $(‘.div2’).off(‘mouseover’);
                },
                ‘click’: function () {
                    alert(‘鼠标点击事件’);
                }
            })
        });
    </script>
</head>
<body>
    <div class=’div1′></div>
    <div class=’div2′></div>
</body>
</html>

请将代码复制到自己的编译器运行(记得引入jquery类库)。
工作中熟练使用Jquery类库中的方法,可以缩短项目周期,节约时间,减小成本。

前端开发框架 2018|关于前端开发的视频教程|秦皇岛前端开发html教程

» 本文来自:前端开发者 » 《前端开发Jquery基础》
» 本文链接地址:https://www.rokub.com/5182.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!