前端学习之jquery

一 属性操作

html()：

console.log($("div").html());

$(".test").html("<h1>hello</h1>");   拿到的是标签

test():

console.log($("div").text());

$(".test").text("<h1>hello</h1>");   整个纯文本

val():val针对的是固有属性value

console.log($(":text").val());

console.log($(":checkbox").val());

console.log($(":button").val())//val针对的是固有属性value

tab切换案例：

<style>

        *{

            margin: 0;

            padding: 0;

        }

        .outer{

            width: 80%;

            margin: 0 auto;

        }

        .nav li{

            float: left;

            list-style: none;

            width: 100px;

            height: 40px;

            background-color: #6AA1EA;

            text-align: center;

            line-height: 40px;

            border-right: 2px solid green;

        }

        .content{

            width: 306px;

            height: 400px;

            background-color: #99cc99;

            margin-top: 40px;

        }

        ul .active{

            background-color: #99aecb;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

<div class="outer">

    <ul class="nav">

       <li f="con1" class="active">菜单一</li>

       <li f="con2">菜单二</li>

       <li f="con3">菜单三</li>

    </ul>

    <div class="content">

        <div class="con1">111</div>

        <div class="con2 hide">222</div>

        <div class="con3 hide">333</div>

    </div>

</div>

<script src="jquery-3.2.1.js"></script>

<script>

      var outer=document.getElementsByClassName("outer")[0];

      var lis=outer.getElementsByTagName("li");

      for(var i=0;i<lis.length;i++){

          lis[i].onclick=function () {

          $(this).addClass("active").siblings().removeClass("active");

          var $name=$(this).attr("f");

          $("."+$name).removeClass("hide").siblings().addClass("hide")

          }

      }

</script>

tab切换案例

二 jquery循环方式

方法一：

//$.each(arr,funtion(){})  //循环语法

arr=[123,456,"hello"];

obj={"name":"egon","age":22};

$.each(arr,function (i,j) {

    console.log(i,j)

})

$.each(obj,function (i,j) {

    console.log(i,j)

})

方法二：

$().each(function () {

})

<ul>

    <li>111</li>

    <li class="item">222</li>

    <li>333</li>

</ul>

$("ul li").each(function () {

    console.log($(this))

    if ($(this).hasClass("item")){

        alert($(this).text())

    }

})

table正反选示例：

<body>

<h1>表格示例</h1>

    <button>全选</button>

    <button>反选</button>

    <button>取消</button>

<hr>

<table border="2px">

    <tr>

        <td><input type="checkbox" class="item"></td>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

      <tr>

        <td><input type="checkbox" class="item"></td>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

      <tr>

        <td><input type="checkbox" class="item"></td>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

     <tr>

        <td><input type="checkbox" class="item"></td>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

</table>

<script src="jquery-3.2.1.js"></script>

<script>

    var eles=document.getElementsByTagName("button");

//    var inps=document.getElementsByClassName("item");

    for(var i=0;i<eles.length;i++){

        eles[i].onclick=function () {

           if (this.innerText=="全选"){

//               for(var j=0;j<inps.length;j++){

//                   inps[j].checked=true

//               }

            $(":checkbox").prop("checked",true);

           }

           else if (this.innerText=="取消"){

             $(":checkbox").prop("checked",false);

           }

           else{

               $(":checkbox").each(function () {

                    $(this).prop("checked",!$(this).prop("checked")); //最新优化

//                   if ($(this).prop("checked")){

//                       $(this).prop("checked",false)

//                   }

//                    else {

//                       $(this).prop("checked",true)

//                   }

               })

           }

        }

    }

</script>

</body>

table 正反选示例

三 动画效果

hide()与show()隐藏与显示

<p>hello</p>

<img src="top.jpg" width="400px" height="200px">

<button id="hide">隐藏</button>

<button id="=show">显示</button>

<button id="toggle">切换</button>

<script src="jquery-3.2.1.js"></script>

<script>

    //用于切换备选元素的 hide()与show()方法。

    // 标签对象.事件(function(){})

    $("#hide").click(function () {

        $("img").hide(1000);

    });

    $("#show").click(function () {

        $("img").show(1000);

    });

    $("#toggle").click(function () {

        $("img").toggle(1000);

    })

</script>

滑动效果：

slideDown()  slideUp()  slideToggle()

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    #con{

        line-height: 80px;

        background-color: #015e98;

    }

    </style>

</head>

<body>

<div id="con">滑动效果</div>

<button id="slideDown">slideDown</button>

<button id="slideUp">slideUp</button>

<button id="toggle">toggle</button>

<script src="jquery-3.2.1.js"></script>

<script>

   $("#slideDown").click(function () {

       $("#con").slideDown(1000)

   });

   $("#slideUp").click(function () {

       $("#con").slideUp(1000)

   });

    $("#toggle").click(function () {

       $("#con").slideToggle(1000)

   })

</script>

</script>

</body>

淡入淡出透明度：

fadeIn()  fadeout()

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

     #con{

         height: 200px;

         width: 200px;

         background-color:#ccecef;

     }

    </style>

</head>

<body>

<div id="con"></div>

<button id="fadeIn">fadeIn</button>

<button id="fadeOut">fadeOut</button>

<button id="fadeToggle">fadeToggle</button>

<button id="fadeTo">fadeTo</button>

<script src="jquery-3.2.1.js"></script>

<script>

    $("#fadeIn").click(function () {

        $("#con").fadeIn(2000)

    });

    $("#fadeOut").click(function () {

        $("#con").fadeOut(2000)

    });

    $("#fadeToggle").click(function () {

        $("#con").fadeToggle(2000)

    })

$("#fadeTo").click(function () {

    $("#con").fadeTo(1000,0.4)  //透明度

})

</script>

回调函数：当某一个动作执行完成之后自动触发的函数

四 文档操作

内部插入：

(append)  ( prepend) //父节点添加子节点

<script>

   $("button").click(function () {

       $("div").append("<h1>hello</h1>");//插入的位置不一样 一个在后面

       $("div").prepend("<h1>hi</h1>"); //一个在前面插入

   })

</script>

（appendTo）（perpendTo） //子节点插入父节点

<script>

   $("button").click(function () {

   var $ele=$("<p>hello</p>");

  $ele.appendTo("div") //子节点插入父节点

  $ele.prependTo("div")//

});

</script>

外部插入：兄弟之间插入

after（） before()

$("div").after("<p>pppppp</p>");

$("div").before("<p>pppppp</p>")

insertAfter（）   insertBefore（）

var $ele=$("<p>hello</p>");

//   $ele.insertAfter("div")

      $ele.insertBefore("div")

替换replaceWith()

$("div").replaceWith("<h1>egon</h1>")

删除

//$("div").empty()  //清空文本内容

 $("div").remove()  //清空整个标签

复制（克隆）

<div class="box">

    <div class="item">

        <input type="button" value="+">

        <input type="text">

    </div>

</div>

<script src="jquery-3.2.1.js"></script>

<script>

    $(":button").click(function () {

       //var $clone=$(".box .item").clone(); //1变2 2变4

      var $clone=$(this).parent().clone();

      $clone.children(":button").val("-").attr("onclick","removeA(this)");

      $clone.children();

        $(".box").append($clone)

    });

    function removeA(self) {

        console.log($(self).parent());

        $(self).parent().remove()

    }

</script>

前端学习之jquery/下的更多相关文章

  1. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  2. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  3. 前端学习之-- Jquery

    Jquery学习笔记 中文参考文档:http://jquery.cuishifeng.cn Jquery是一个包含DOM/BOM/JavaScript的类库引入jquery文件方法:<scrip ...

  4. 前端学习之jquery（二）

    操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...

  5. web前端学习总结--JQuery

    jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...

  6. 前端学习之三——jquery选择器

    Jquery中的选择器分为几大类:基本过滤选择器,层次选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象选择器和表单对象属相过滤选择器. 1.非基本过滤选择器,一般需 ...

  7. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  8. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

随机推荐

  1. TypeScript入门（一）

    TypeScript是微软官方的一种语言,是JavaScript的超集.它遵循的ECMA Script 6.0是下一代的JavaScript.浏览器还没有完全支持ES6,而ES5是弱类型的语言,还没有 ...

  2. WebPack介绍

    一.Webpack 是什么 Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,Instagram 工程师认为这个方案很棒, 似乎还把作者招过去了.在 Webpack 当中, ...

  3. 【Python】 关于import和package结构

    关于import语句 python程序需要使用某个第三方模块的话要用import语句,其实就是把目标模块的内容加载到内存里.当然,在加载之前,python会按照一定的顺序寻找sys.path中的目录. ...

  4. 网络通信 --> ZMQ安装和使用

    ZMQ安装和使用 ZMQ 并不像是一个传统意义上的消息队列服务器,事实上,它也根本不是一个服务器,它更像是一个底层的网络通讯库,在 Socket API 之上做了一层封装,将网络通讯.进程通讯和线程通 ...

  5. linux --> 获取系统启动时间

    获取系统启动时间 一.前言 时间对操作系统来说非常重要,从内核级到应用层,时间的表达方式及精度各部相同.linux内核里面用一个名为jiffes的常量来计算时间戳.应用层有time.getdaytim ...

  6. 配置COCO API（安装COCO）

    仍旧是win10,Python3.5 从GitHub下载coco源码,解压到任意文件夹.(或者创建一个工程)coco源码链接 https://github.com/cocodataset/cocoap ...

  7. 第1次作业：no blog no fun

    1.先回答老师的问题 第一部分:结缘计算机       读了进入2012 -- 回顾我走过的编程之路后,我试着回顾了我的编程生涯的开始.我最原始的记忆就是老爸教我用电脑玩连连看,那时候的显示器应该是C ...

  8. 2017C语言程序设计预备作业

    Deadline:2017-9-30 23:00 一.学习使用MarkDown 本学期的博客随笔都将使用MarkDown格式,要求熟练掌握MarkDown语法,学会如何使用标题,插入超链接,列表,插入 ...

  9. 201621123040《Java程序设计》第十周学习总结

    1.本周学习总结 2.书面作业 2.1常用异常 2.1.1自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 算术异常ArithmeticException(除数为0的情况) 类 ...

  10. 20162318 实验三《 敏捷开发与XP实践》实验报告

    北京电子科技学院(BESTI) 实 验 报 告 课程:程序设计与数据结构 班级:1623班 姓名:张泰毓 指导老师:娄老师.王老师 实验日期:2017年5月12日 实验密级:非密级 实验器材:带Lin ...