的框架的实现,JQuery手写一个简单的轮播图

效果图:

JQuery手写三个粗略的分页,jquery手写

效果图:

图片 1

大概思路:使用ul进行初始布局,每一次点击事件改变li里的值。
完整的代码在gitup上:https://github.com/anxizhihai/Paging.git
css部分:

图片 2

图片 3

html部分:

图片 4

的框架的实现,JQuery手写一个简单的轮播图。JQuery部分:

图片 5

图片 6

图片 7

效果图:
大约思路:使用ul进行起首布局,每3回点击事件更改li里的值。
完整的代码在gitup上:https…

做出来的样式:

JQuery的好处

  1. 敏捷上手(学费低)
  2. 付出效用高(选用器、批量操作 DOM、链型操作……)
  3. 一种类的包装(动画、ajax)
  4. 浏览器包容(1.x版本 包容IE六、七、八)
  • JQuery 一.11.3.js(壹.x出色版本)
    • 品质倒霉(源代码文件略大)
  • JQuery 二.2.肆(2.x杰出版本)
    • 质量略好(源代码文件略小)
    • 不是 HTML5 的实现
  • 2.x本子对于一.x本子的话,API向下包容
  • div.animate({left: 200}, 1000)在2.二.4版本之后编写翻译不会报错,但是没有动画效果(即为API向下包容)
  • 二.x版本比一.x版性情能好
  • IE八及以下版本不协理HTML伍,所以二.x版本屏弃包容

图片 8

图片 9图片 10

完结团结的jQuery

大概思路:使用ul进行初始布局,每一次点击事件改变li里的值。
完整的代码在gitup上:https://github.com/anxizhihai/Paging.git
css部分:

未曾切图,就随意找了部分图形来兑现效益,那些小星星萌不萌。

第一步:分析

this is span</div>
<div class="my-div">this is first div</div>
<div class="my-div">this is second div</div>

// 第一个问题:想想这句话实际上是执行了什么样的操作?
$(".my-div")
// 解决了第一个问题后,想想如何进行批量操作?
$(".my-div").css("color","red")
$(".my-div").html("--------------")

// 分析
// 通过原生方法只能执行下面操作
        //通过ID找到唯一元素
document.getElementById()
        //通过标签名找到所有标签名对应的元素
        .getElementsByTagName()
        //通过name属性找到所有对应的元素
        .getElementsByName()
        //是通过selector选择器找到所有符合选择器的元素(方便、快捷、HTML5支持)
        .querySelectorAll()

// mineJQuery
var $ = function(selector){
    // $选择符已经定义完毕
    return document.querySelectorAll(selector)
    // return 了一个数组[div.my-div, div.my-div]
    // 数组对象没有方法,那.css该如何进行批量操作?

    // 除非进行一个 for 循环,接着上面的问题。
    for (var i = 0; i < $(".my-div").length; i++) {
        $(".my-div")[i].style.color = "red";
    }
    // 如果这样操作则使用 jQuery 一点意义都没有 
}

相关文章