JQ自行封装方法初实验

插件

使用插件的步骤

1. 引入jQuery文件
2. 引入插件(如果有用到css的话,需要引入css)
3. 使用插件

jquery.lazyload.js

懒加载插件

jquery.ui.js插件

基本使用:

2.  1.  引入jQueryUI的样式文件
2.  引入jQuery
3.  引入jQueryUI的js文件
4.  使用jQueryUI功能

使用jquery.ui.js实现新闻模块的案例

制作jquery插件

原理:jquery插件其实说白了就是给jquery对象增加一个新的方法,让jquery对象拥有某一个功能。

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

制作手风琴插件


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
            width: 1300px;
        }

        #box {
            width: 1200px;
            height: 400px;
            border: 1px solid grey;
            margin: 100px auto;
        }

        #box li {
            width: 240px;
            height: 400px;
            /*border: 1px solid #000;*/
            float: left;
        }
        li:nth-child(1){
            background: url("images/1.jpg");
        }
        li:nth-child(2){
            background: url("images/2.jpg");
        }
        li:nth-child(3){
            background: url("images/3.jpg");
        }
        li:nth-child(4){
            background: url("images/4.jpg");
        }
        li:nth-child(5){
            background: url("images/5.jpg");
        }
    style>
head>
<body>
<div id="box">
    <ul>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
        <li>li>
    ul>
div>

body>
html>
<script src="js/jquery-1.12.4.js">script>
<script src="jquery%20Accordion.js">script>
<script>
//    var arr=["cyan","red","black","blue","yellow"];
//    var $li=$("li");
//    $li.each(function (index, ele) {
//        $(ele).css("background",arr[index]);
//    })
//    $li.mouseenter(function () {
//        $(this).stop().animate({width:800}).siblings().stop().animate({width:100});
//    })
//    $li.mouseleave(function () {
//        $("li").stop().animate({width:240});
//    })
//var colors=["cyan","red","black","blue","yellow"];
    $("div").Accordion([],100);
script>

记得换图片路径和取消注释。。

你可能感兴趣的:(日记)