04 . 前端之JQuery

JQuery简介

# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,
# 能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
什么是JQuery?
# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少,做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中.

# JQuery库包含以下功能:

# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities

# 除此之外,JQuery还提供了大量的插件
为什么使用JQuery?
# 目前网络上有大量开源的JS框架,但是JQuery是目前最流行的JS框架,而且提供了大量的扩展.
# 很多大公司都在使用JQuery,例如:
# Google,Microsoft,IBM,Netflix

# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!
JQuery版本

1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)

 

2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)

 

3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

 

维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持*

JQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

 

$(“#i1”).html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。 相当于: document.getElementById(“i1”).innerHTML;

 

虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理 DOM对象也没不能使用 jQuery里的方法。

 

一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例,jQuery对象和DOM对象的使用:

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

Example DOM和JQuery对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
   <link rel="stylesheet" href="csswenjian"/>
   <style>

   </style>
<body>
   <div id="i1">123</div>

   <script src="jquery-1.12.4.js"></script>
   <script>
       $("#i1")
   </script>
</body>
</html>
# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id="i1">•123</div>

$('#i1')          
jQuery.fn.init [div#i1, context: document, selector: "#i1"]

$('#i1')[0]
<div id="i1">•123</div>

# JQuery对象[0] => DOM对象
# Dom对象   => $(Dom对象)
JQuery安装

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法:

 

jquery.com 下载 jQuery 库

 

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

HTML标签引用JQuery
有两个版本的 jQuery 可供下载:

* Production version - 用于实际的网站中,已被精简和压缩。
* Development version - 用于测试和开发(未压缩,是可读的代码)

以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。

jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
   <link rel="stylesheet" href="csswenjian"/>
   <style>

   </style>
<body>
   <div id="i1">123</div>

   <script src="jquery-1.12.4.js"></script>
   <script>
       $("#i1")
   </script>
</body>
</html>

# 将下载的文件放在网页的同一目录下,就可以使用JQuery
CDN引用JQuery

如果您不希望下载并存放 jQuery,那么也可以通过 CDN(内容分发网络) 引用它。

 

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

 

如果你的站点用户是国内的,建议使用百度、又拍云、新浪等国内CDN地址,如果你站点用户是国外的可以使用谷歌和微软。 如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery,请使用以下代码之一:

Staticfile CDN:

<head>  
<script  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  </script>  
</head>

百度CDN

<head>  
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script>  
</head>

新浪CDN

<head>  
<script  src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  </script>
</head>

Google CDN

<head>  
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>  
</head>
# Google产品在中国很不稳定

Microsoft CDN

<head>  
<script  src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
</head>

 

# 使用CDN的JQuery,有一个很大的优势:
# 许多用户访问其他站点时,已经从上面各种CDN加载过JQuery,所以结果是,他们访问你站点时,
# 会从缓存中加载JQuery,这样可以减少加载时间,同时,大多数CDN都可以确保当用户向其请求文件时,
# 会从离最近的服务器上返回响应,这样也可以提高加载速度.

# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

JQuery基础语法

# 通过JQuery,可以选取(查询,query)HTML元素,并对他们执行"操作"(actions).

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<script>
   $(document).ready(function () {
       // alert("文档加载完毕");
       // 当前函数执行完执行alert弹出框
       $("p").click(function () {
           $(this).hide();
       // 隐藏p元素  
      })
  });
</script>
</body>
</html>
查找标签

1. 基本选择器 id选择器:

$("#id")

标签选择器

$("tagName")

Class选择器

$(".className")

配合使用

$("div.c1")
// 找到c1 class类的div标签

所有元素选择器

$("*")

组合选择器

$("#id,.className,tagName")

层级选择器 x和y可以为任何选择器

$("x y");// x的所有后代y(子子孙孙)
$("x > y");// x的所有儿子y(儿子)
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

Example1

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <p class="pclass">p1</p>
   <p id="pid">p2</p>
   <button>
       click
   </button>
   <script>
       $(document).ready(function () {
           $("button").click(function () {
               $("p").text("p元素被修改了");
               $(".pclass").text("p元素通过class被修改了");
               $("#pid").text("p元素通过pid被修改了");
          });
      });
   </script>
</body>
</html>

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素,从 0 开始计数
:odd // 匹配所有索引值为奇数的元素,从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

 

事件
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
   $(document).ready(function () {
       // $("button").click(function () {
       //     $(this).hide();
           // 单击事件
       // });

       // $("button").dblclick(function () {
           // $(this).hide();
           // 双击事件
       // });

       $("button").mouseenter(function () {
           $(this).hide();
           // 当鼠标放到按钮上触发此事件,
           // mouseleave是鼠标移开按钮触发的事件
      });
  })
</script>
</body>
</html>
事件之绑定,解除绑定
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
   $(document).ready(function () {
       // $("#clickBind").click(function () {
           // alert("hello")
           // 当我们的事件很多时,这样写非常消耗内存
       // });

       $("#clickBind").bind("click",clickHandler1);
       $("#clickBind").bind("click",clickHandler2);
       // $("#clickBind").unbind("click"); //这种解除绑定会解除所有
       $("#clickBind").unbind("click",clickHandler1()); //解除单一绑定


       $("#clickBind").on("click",clickHandler1);  // bind底层都是使用on,off实现
       $("#clickBind").off("click",clickHandler2);
  });

   function clickHandler1(e) {
       console.log("clickHandler1")
  }
   function clickHandler2(e) {
       console.log("clickHandler2")
  }
</script>
</body>
</html>
自定义事件
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <button id="ClickMeBtn">Click</button>
   <script>
       var ClickMeBtn
       $(document).ready(function () {
           ClickMeBtn = $("#ClickMeBtn");
           ClickMeBtn.click(function () {
               var e = jQuery.Event("MyEvent");
               ClickMeBtn.trigger(e);
          });

           ClickMeBtn.bind("MyEvent",function(event) {
               console.log(event);
          })
      })
   </script>
</body>
</html>

Example2

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

Example3 多选,全选,反选

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>

   <input type="button" value="全选" onclick="ChackAll()" />
   <input type="button" value="反选" onclick="ReverseAll()" />
   <input type="button" value="取消" onclick="CancleAll()" />


   <table border="1">
       <thead>
           <tr>
               <th>选项</th>
               <th>IP</th>
               <th>Port</th>
           </tr>
       </thead>

       <tbody >
           <tr>
               <td><input type="checkbox"></td>
               <td>1.1.1.1</td>
               <td>80</td>
           </tr>

           <tr>
               <td><input type="checkbox"></td>
               <td>1.1.1.2</td>
               <td>3306</td>
           </tr>
       </tbody>
   </table>

   <script src="jquery-1.12.4.js"></script>
   <script>
       function ChackAll() {
           $(':checkbox').prop('checked',true);
      }

       function CancleAll() {
           $(':checkbox').prop('checked',false);
      }

       function ReverseAll() {
           $(':checkbox').each(function (k) {
               // this代表当前循环的每一个元素
               // 反选,循环出来每个元素,
               //     console.log(k,this)
               //     if(this.checked){
               //         this.checked = false;
               //     }else{
               //         this.checked = true;
               //     }
               // })


               // if ($(this).prop('checked')) {
               //     $(this).prop('checked', false);
               // } else {
               //     $(this).prop('checked', true);
               // }
               //三元运算 var v = 条件? 真值:假值
               var v = $(this).prop('checked')?false:true;
               $(this).prop('checked',v);
          })
      }
   </script>
</body>
</html>

/*
$(':checkbox').prop('checked'); 获取值
$('checkbox').prop('checked',true); 设置值

JQuery方法内置循环: $(':checkbox').xxxx

$(':checkbox').each(function(k)){
// k当前索引
// this,DOM,当前循环的元素 $(this)
}
*/

Example4 筛选器

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .header{
           background-color: aliceblue;
      }

       .content{
           min-height: 50px;
      }

       .hide{
           display: none;
      }
   </style>
</head>
<body>
   <div style="height: 400px; width: 200px; border: 1px solid green">
       <div class="item">
           <div class="header">标题1</div>
           <div id="i1" class="content hide">内容</div>
       </div>

       <div class="item">
           <div class="header">标题2</div>
           <div class="content hide">内容</div>
       </div>

       <div class="item">
           <div class="header">标题3</div>
           <div class="content hide">内容</div>
       </div>
   </div>
       <script src="jquery-1.12.4.js"></script>
       <script>
           // jquery绑定事件
           $('.header').click(function () {
               // 当前点击标签 $(this)
               // 获取某个标签的下一个标签
               // 获取某个标签的父标签,然后获取所有兄弟标签.
               // 找到后将content加上hide给关掉
               // 添加样式和移除样式
               // $('.i1').addClass('hide')
               // $('#i1').removeClass('hide')
               // var v = $('this + div');
               // $('label + input')
               // console.log(v);

               // 筛选器
               // $(this).next()   下一个
               // $(this).prev() 上一个
               // $(this).parent() 父
               // $(this).children() 孩子
               // $('#i1').sibling() 兄弟
               // ('#i1').find('#i1') 子子孙孙查找

               // $(this).next().removeClass('hide');
               // $(this).parent().siblings().find('.content').addClass('hide')
               // 链式编程
               var v = $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
          })
       </script>
</body>
</html>

Example模态编程框

 

属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button


$(":checkbox") //找到所有的checkbox

操作标签

jQuery隐藏/显示
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
   <style>
       div{
           background: #ece023;
           width: 50px;
           height: 50px;
           margin: 2px;
           float: left;
      }
   </style>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>

<script>
   for(var i = 0;i<5;i++){
       $("<div>").appendTo(document.body);
  }
   $("div").click(function () {
       $(this).hide(2000,function () {
           $(this).remove();
      });
  })
</script>

<script>
   $(document).ready(function () {
       $("#hide").click(function () {
           $("p").hide(1000);
           //1000毫秒隐藏
      });

       $("#show").click(function () {
           $("p").show(1000);
           //1000毫秒显示周期
      });

       $("#toggle").click(function () {
           $("p").toggle(1000);
           // 一个按钮实现显示/隐藏两个功能
      });
  });
</script>
</body>
</html>
jQuery淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
   <script>
       $(document).ready(function () {
           $("#in").on("click",function () {
               $("#div1").fadeIn(1000);
               $("#div2").fadeIn(1000);
               $("#div3").fadeIn(1000);
          });
           $("#out").on("click",function () {
               $("#div1").fadeOut(1000);
               $("#div2").fadeOut(1000);
               $("#div3").fadeOut(1000);
          });
           $("#toggle").on("click",function () {
               $("#div1").fadeToggle(1000);
               $("#div2").fadeToggle(1000);
               $("#div3").fadeToggle(1000);
          });
           $("#to").on("click",function () {
               $("#div1").fadeTo(1000, 0.2);
               $("#div2").fadeTo(1000, 0.4);
               $("#div3").fadeTo(1000, 0.7);
          });
      });
   </script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeOut</button>
<button id="toggle">toggle</button>
<button id="to">fadeto</button>
<div id="div1" style="width: 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>1</div>
<div id="div2" style="width: 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>2</div>
<div id="div3" style="width: 80px;height: 80px; display: none; color: rgb(17, 119, 0);">>3</div>
</body>
</html>
jQuery滑动
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
   <style>
       #content, #flipshow, #flighide, #fliptoggle {
           padding: 5px;
           text-align: center;
           background-color: aqua;
           border: solid 1px antiquewhite;
      }

       #content {
           padding: 50px;
           display: none;
      }
   </style>
</head>
<body>
<div id="flipshow">出现</div>
<div id="flighide">隐藏</div>
<div id="fliptoggle">隐藏/出现</div>
<div id="content">hello</div>
<script>
   $(document).ready(function () {
       $("#flipshow").click(function () {
           $("#content").slideDown(1000);
      });

       $("#flighide").click(function () {
           $("#content").slideUp(500);
      });

       $("#fliptoggle").click(function () {
           $("#content").slideToggle(500);
      });
  });
</script>
</body>
</html>

回调

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>隐藏</button>
<p>hello world</p>
<script>
   $(document).ready(function () {
       $("button").click(function () {
           // $("p").hide(1000,function () {
           //     alert("动画结束,这个方法称为回调")

           $("p").css("color", "red").slideUp(1000).slideDown(1000);
      });
  });
</script>
</body>
</html>
JQuery的HTML操作
jQuery的HTML捕获
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="text">this is my webpage</p>
<button id="btn1">点击</button>
<p><input type="text" id="it" value="youmen"></p>
<p><a href="http://www.baidu.com" id="aid">百度一下</a></p>
<button id="btn2">百度</button>

<script>
   $(document).ready(function () {
       // $("#btn1").click(function () {
       //     alert("text:" + $("#text").text());
       // });

       $("#it").click(function () {
           alert("text:"+$("#it").val());
      });

       $("#btn2").click(function () {
           //获取属性
           alert("text:"+$("#aid").attr("href"));
           alert("text:"+$("#aid").attr("id"));
      });

       // $("#btn1").click(function () {
       //     alert("text:"+$("#text").html());
       // });
  });
</script>
</body>
</html>
处理HTML捕获内容
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <p id="p1">Hello Web</p>
   <p id="p2">Hello World</p>
   <input type="text" id="i3" value="hello">
   <button id="btn1">click1</button>
   <button id="btn2">click2</button>
   <button id="btn3">click3</button>

   <a id="aid" href="http://www.baidu.com">最初是百度,然后换成39.108.140.0:520</a>
   <button id="btn4">跳转</button>

   <br/>
   <p id="p5">hello</p>
   <button id="btn5">按钮</button>

   <script>
       $(document).ready(function () {
           $("#btn1").click(function () {
               $("#p1").text("YouMen");
               // 将捕获到的内容进行修改
          });

           $("#btn2").click(function () {
               $("#p2").html("<a href='http://baidu.com'>百度一下</a>")
               // 修改标签
          });
           
           $("#btn3").click(function () {
              $("#i3").val("幽梦");
              // 对输入框内容进行修改
          });

           $("#btn4").click(function () {
               $("#aid").attr({
                   "href":"http://39.108.140.0:520",
                   "title":"hello"
              },);
               // 修改属性
          });

           $("#btn5").click(function () {
               $("#p5").text(function (i,ot) {
                   return "old:" +ot+"new:这是新的内容"+(i);
              });
          });
      });
   </script>
</body>
</html>
JQury添加,删除元素

添加,插入元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <p id="p1">幽梦</p>
   <p id="p2"></p>
   <button id="btn1">添加</button>
   <button id="btn2">插入</button>

   <script>
       $(document).ready(function () {
           $("#btn1").click(function () {
               $("#p1").append("this is my webpage add content,");
               // $("#p1").prepend("this is my webpage add content,");
          });

           $("#btn2").click(function () {
               // $("#p2").before("hello");
               $("#p2").after("world");
          });
      })
   </script>
</body>
</html>

删除元素

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="div" style="
         height: 200px;
         width: 200px;
         border: 1px solid dimgray;
          color: rgb(0, 0, 204);">;>
  hello
   <p>hello</p>
   <p>world</p>
</div>
<button id="btn1">删除</button>

<script>
   //remove empty
   $(document).ready(function () {
       $("#btn1").click(function () {
           // $("p").remove();
           // $("p").empty();
           $("div").empty();
           // $("div").remove();
           // empty一般只会删除内容相关,remove删除元素
      });
  });
</script>
</body>
</html>
JQuery的CSS方法
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
   <style>
       .style1 {
           width: 100px;
           height: 100px;
           background-color: #cccccc;
      }

       .style2 {
           width: 100px;
           height: 100px;
           background-color: darkseagreen;
      }
   </style>
</head>
<body>
<div>
  sdaf
</div>

<script>
   $(document).ready(function () {
       // $("div").css("width","100px");
       // $("div").css("hight","100px");
       // $("div").css("background","#FF0000");

       // $("div").css({
       //     width: "100px", height: "100px", backgroundColor: "#00FF00"
       // });
       $("div").addClass("style1");
       $("div").click(function () {
           $(this).toggleClass("style2");
      });
  });
</script>
</body>
</html>
jQuery的盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
   <style>
       #div{
           width: 100px;
           height: 100px;
           margin: 50px;
           padding: 50px;
           border: 2px solid darkseagreen;
           background-color: aqua;
      }
   </style>
</head>
<body>
   <div id="div"></div>

   <script>
       $(document).ready(function () {
           //innerHeight 指内边距+外边距+Height
           alert($("#div").innerHeight());
      })
   </script>
</body>
</html>

JQuery的元素遍历与过滤

JQuery向下遍历元素
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #div1{
           width: 500px;
           height: 200px;
           background-color: #cccccc;
           border: 3px solid darkseagreen;
      }

       #div2{
           width: 400px;
           height: 150px;
           margin-top: 10px;
           margin-left: 10px;
           border: 30px solid chocolate;
      }

       p{
           margin-left: 10px;
           margin-top: 10px;
           width: 150px;
           height: 80px;
           border: 3px solid green;
      }
   </style>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <div id="div1">div1
       <div id="div2"> div2
           <p>
               <a>
                  Hello
               </a>
           </p>
       </div>
   </div>

   <script>
       // children
       // find
       $(document).ready(function () {
           // $("#div1").children().css({border:"3px solid red"})
           $("#div1").find("p").css({border: "3px solid gold"})
      })
   </script>
</body>
</html>
向上遍历
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #div1{
           width: 500px;
           height: 200px;
           background-color: #cccccc;
           border: 3px solid darkseagreen;
      }

       #div2{
           width: 400px;
           height: 150px;
           margin-top: 10px;
           margin-left: 10px;
           border: 30px solid chocolate;
      }

       p{
           margin-left: 10px;
           margin-top: 10px;
           width: 150px;
           height: 80px;
           border: 3px solid green;
      }
   </style>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <div id="div1">div1
       <div id="div2"> div2
           <p>
               <a>
                  Hello
               </a>
           </p>
       </div>
   </div>

   <script>
       // parent() 只能寻找到他的直接父类
       // parents()
       // parentUntil()
       $(document).ready(function () {
           $("a").parent().css({border:"3px solid #FF0000"})
           // $("p").parents("#div1").css({border:"3px solid #FF0000"})
           $("p").parentsUntil("#div1").css({border:"3px solid #FF0000"})
      })
   </script>
</body>
</html>
同级遍历
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
   <style>
       .bd * {
           display: block;
           border: 3px solid gray;
           color: gray;
           padding: 5px;
           margin: 15px;
      }
   </style>
</head>
<body>
<div class="bd">
   <p>P</p>
   <h2>H2</h2>
   <h3>H3</h3>
   <h4>H4</h4>
   <h5>H5</h5>
   <h6>H6</h6>
</div>

<script>
   // sibings()
   // next()
   // nextAll()
   // nextUntil()
   // prev() 跟上面区别在于一个向上一个向下
   // preUntil()
   $(document).ready(function () {
       // $("h4").siblings().css({border: "3px solid #FF0000"});
       // 修改同级所有元素
       // $("h4").next().css({border: "3px solid #FF0000"});
       // $("h4").nextAll().css({border: "3px solid #FF0000"});
       // $("h4").nextUntil("h6").css({border: "3px solid #FF0000"});
       // 从你寻找的元素到指定元素期间的遍历


  });
</script>
</body>
</html>
jQuery之过滤
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
   <div>
       <p>div1</p>
   </div>

   <div>
       <p id="pid">div2</p>
   </div>

   <div>
       <p id="pid2">div3</p>
   </div>

   <div>div4</div>

<script>
   /*
  * fisrt() 只对第一个生效
  * last() 最后一个生效
  * eq() 从0开始指定,0指定1,1指定2
  * filter() 规定一个同样的标准
  * not() 过滤,相反的效果
  */

   $(document).ready(function () {
       // $("div p").first().css("background-color","red");
       // $("div p").eq(1).css("background-color","red");
       // $("div p").filter("p").css("background-color","red");
       $("div p").not(".pid").css("background-color","red");
  });
</script>
</body>
</html>
小案例

用户输入为空提示报错信息

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="../static/jquery.js"></script>
   <style>
       .c1 {
           color: red;
           font-size: 12px;
      }
   </style>
</head>
<body>
<div>
  用户名: <input type="text" id="username">
   <span class="c1"></span>
</div>

<div>
  密码: <input type="password" id="password">
   <span class="c1"></span>
</div>
<button id="btn">提交</button>

<script>
   $('#btn').click(function () {
       var user = $('#username').val();
       var pwd = $('#password').val();
       if (user.length == 0) {
           $('#username').siblings('.c1').text("用户名不能为空");
      } else {
           $('#username').siblings('.c1').text('');
      }

       if (pwd.length == 0) {
           $("#password").siblings('.c1').text("密码不能为空");
      } else {
           $("#password").siblings('.c1').text('');
      }
  })
</script>
</body>
</html>

 

全选,反选,新增,编辑

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .c1 {
           position: fixed;
           top: 0;
           left: 0;
           bottom: 0;
           right: 0;
           background-color: rgba(0, 0, 0, 0.5);
           z-index: 99;
      }

       .c2 {
           height: 200px;
           width: 300px;
           background-color: white;
           position: absolute;
           top: 50%;
           left: 50%;
           margin-top: -100px;;
           margin-left: -150px;
           z-index: 100;
      }

       .hide {
           display: none;
      }
   </style>
   <script src="../static/jquery.js"></script>
</head>
<body>

<button id="add">新增</button>
<button id="chose_all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>

<table border="1">
   <thead>
   <tr>
       <th>#</th>
       <th>主机</th>
       <th>IP</th>
       <th>端口</th>
   </tr>
   </thead>

   <tbody>
   <tr>
       <td>
           <input type="checkbox">
       </td>
       <td>nginx</td>
       <td>1.1.1.1</td>
       <td>80</td>
       <td>
           <button class="fire">开除</button>
           <button class="edit">编辑</button>
       </td>
   </tr>

   <tr>
       <td>
           <input type="checkbox">
       </td>
       <td>mysql</td>
       <td>1.1.1.2</td>
       <td>3306</td>
       <td>
           <button class="fire">开除</button>
           <button class="edit">编辑</button>
       </td>
   </tr>

   <tr>
       <td>
           <input type="checkbox">
       </td>
       <td>php</td>
       <td>1.1.1.3</td>
       <td>9000</td>
       <td>
           <button class="fire">开除</button>
           <button class="edit">编辑</button>
       </td>
   </tr>
   </tbody>
</table>

<div class="cc hide">
   <div class="c1"></div>
   <div class="c2">
       <div>
          主机: <input type="text" id="username">
       </div>

       <div>
          IP: <input type="text" id="ip">
       </div>

       <div>
          端口: <input type="text" id="port">
       </div>

       <div>
           <button id="sub">提交</button>
           <button id="cannel">取消</button>
       </div>
   </div>
</div>

<script>
   // 全选
   $('#chose_all').click(function () {
       $(":checkbox").prop("checked", true);
  });

   // 取消
   $('#cancel').click(function () {
       $(":checkbox").prop("checked", false);
  });

   // 反选
   $('#reverse').click(function () {
       var a = $(':checkbox');
       for (var i = 0; i < a.length; i++) {
           var status = a.eq(i).prop('checked');
           //     if (status == true){
           //         a.eq(i).prop('checked',false);
           //     }else {
           //         a.eq(i).prop('checked',true);
           a.eq(i).prop('checked', !status);
      }
  });

   var editBtn;
   var flag;

   // 新增
   // 1. 点击新增按钮,弹出模态对话框
   $('#add').click(function () {
       $('.cc').removeClass('hide');
       $('#username').val('');
       $('#ip').val('');
       $('#port').val('');
       flag = 1;
  });

   // 2. 用户输入内容,点击确定按钮,生成一条记录添加到table标签的最后面,并且关闭模态对话框
   $('#sub').click(function () {
       if (flag == 1) {
           // 2.1 获取用户输入内容
           var username = $('#username').val();
           var ip = $('#ip').val();
           var port = $('#port').val();

           // 2.2 创建tr标签,然后将用户输入的数据放到tr对应的td标签里面去
           var newTr = '<tr><td><input type="checkbox"></td><td>' + username + '</td><td>' + ip + '</td><td>' + port + '</td><td><button class="fire">开除</button> <button class="edit">编辑</button></td></tr>';

           // 2.3 将新创建的tr标签添加到table标签的tbody的最后
           $('tbody').append(newTr);
      } else {
           var username = $('#username').val();
           var ip = $('#ip').val();
           var port = $('#port').val();

           // 获取该行的数据
           editBtn.parent().prev().text(username);
           editBtn.parent().prev().prev().text(ip);
           editBtn.parent().prev().prev().text(port);
      }
       $('.cc').addClass('hide');
  });

   // 点击取消,关闭模态对话框
   $("#cannel").click(function () {
       $('.cc').addClass('hide');
  });

   // 删除
   $('tbody').on('click', '.fire', function () {
       $(this).parent().parent().remove();
  });

   // 编辑
   // 1. 弹出模态对话框,并且将之前的数据获取到,然后赋值给输入框
   $('tbody').on('click', '.edit', function () {
       flag = 2;
       editBtn = $(this);
       $('.cc').removeClass('hide');
       // 获取该行数据
       var username = $(this).parent().prev().text();
       var ip = $(this).parent().prev().prev().text();
       var port = $(this).parent().prev().prev().text();

       // 赋值给模态对话框的input标签
       $('#username').val(username);
       $('#ip').val(ip);
       $('#port').val(port);
  });
</script>
</body>
</html>

 

 

JQuery Ajax

 

JQuery UI

JQueryUI简介

JQuery UI 是以JQuery为基础的JavaScript网页用户界面的开源库,包含底层用户交互,动画和特效和可更换主题的可视控件,我们可以直接用它来构建具有很好交互性的web应用程序.

 

包含了许多维持状态的小部件(Widget),因此,他与典型的JQuery插件使用模式略有不同,所有的JQuery UI小部件(Widget)使用相同的模式,所有,只要你学会其中一个,你就知道如何使用其他的小部件(Widget)

 

支持版本 IE6.0+Firefox 3 + Safari 3.1 + Opera9.6和GoogleChrome

 

JQuery UI主要分为3个部分: 交互,小部件和效果库 a: 交互 交互部件是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortabie等

 

b: 小部件 主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner等

 

c: 效果 用于提供丰富的动画效果,包括: Add Class,Color Animation,Togller等.

JQuery UI的使用
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="./jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.css"></script>
   <script src="jquery-ui.min.js"></script>
   <link type="text/css" href="jquery-ui.min.css" rel="stylesheet">

</head>
<body>
<button>百度一下</button>
<a href="http://www.baidu.com" id="a_btn">百度一下</a>

<script>
   $(document).ready(function () {
       $("#a_btn").button();
  });
</script>
</body>
</html>
JQuery Draggable

拖动

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link type="text/css" rel="stylesheet" href="jquery-ui.min.css"></link>
</head>
<body>
   <div style="width: 100px; height: 100px;border: 20px solid #FF0000;" id="div">
   
   </div>

<script>
   $(document).ready(function () {
       $("#div").draggable();
  })
</script>
</body>
</html>

放置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
   <div style="width: 100px;height: 100px; border: 2px solid #7e55ff;" id="div1"></div>
   <div style="width: 200px;height: 200px; border: 2px solid #7e55ff;" id="div2"></div>

<script>
   $(document).ready(function () {
       $("#div1").draggable();
       $("#div2").droppable();

       $("#div2").on("drop",function (event,ui) {
           $("#div2").text("drop事件");
      });
  });
</script>
</body>
</html>

可拖动大小

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
   <div style="width: 100px; height: 100px; color: rgb(0, 0, 204);">id="div1"></div>

   <script>
       $(document).ready(function () {
           $("#div1").resizable();
      })
   </script>
</body>
</html>

可选列表

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
   <style>
       .ui-selected{
           background: #31b0d5;
      }
   </style>
</head>
<body>
   <strong>世界上最美丽的人是?</strong>
   <ul id="select">
       <li id="right">A.me</li>
       <li>B.我</li>
       <li>C.I</li>
   </ul>
   <a href="#" id="btn">提交</a>

   <script>
       $(document).ready(function () {
           $("#btn").button();
           $("#select").selectable();
           $("#btn").on("click",function () {
               if($("#right").hasClass("ui-selected")){
               alert("恭喜您答对了!");
          }
          });
      });
   </script>
</body>
</html>

sortable

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link type="text/css" rel="stylesheet" href="jquery-ui.min.css">
</head>
<body>
   <ul id="sortable">
       <li>苹果</li>
       <li>橘子</li>
       <li>香蕉</li>
       <li>桃子</li>
   </ul>
   <script>
       $(document).ready(function () {
           $("#sortable").sortable();
      });
   </script>
</body>
</html>
JQuery UI小部件

多个下拉框菜单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
   <h3>选项一</h3>
   <div>
       <p>
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
       </p>
   </div>

   <h3>选项二</h3>
   <div>
       <p>
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
       </p>
   </div>

   <h3>选项三</h3>
   <div>
       <p>
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
       </p>
   </div>
</div>


<script>
   $(document).ready(function () {
       $("#div1").accordion();
  });
</script>
</body>
</html>

自动补全

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="div1">
   <h3>选项一</h3>
   <div>
       <p>
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
       </p>
   </div>

   <h3>选项二</h3>
   <div>
       <p>
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
       </p>
   </div>

   <h3>选项三</h3>
   <div>
       <p>
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
          hellohellohellohellohellohellohellohello
       </p>
   </div>
</div>


<script>
   $(document).ready(function () {
       $("#div1").accordion();
  });
</script>
</body>
</html>

日期控件

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
   <p>Date:<input type="text" id="datepicker"></p>
   <a href="#" id="btn">按钮</a>

   <script>
       $(function () {
           $("#datepicker").datepicker();
           $("#btn").button();
      })
   </script>
</body>
</html>

对话框

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
   <div id="div">
       <p>这是一个对话框Dialog</p>
   </div>
   <a id="btn">按钮</a>

   <script>
       $(function () {
           $("#btn").button().on("click",function () {
               $("#div").dialog();
          });
      });
   </script>
</body>
</html>

进度条

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
   <div id="pb"></div>

   <script>
       var pb;
       var max=100;
       var current=0;
       $(document).ready(function () {
           pb=$("#pb");
           pb.progressbar({max:100});
           setInterval(changepd,100);
      });

       function changepd() {
           current++;
           if(current>=100){
               current = 0;
          }
           pb.progressbar("option","value",current);
      }
   </script>
</body>
</html>

menu菜单 垂直菜单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
   <style>
       #menu{
           width: 150px;
      }
   </style>
</head>
<body>
   <ul id="menu">
       <li>
           <a href="#">Java</a>
           <ul>
               <li><a href="#">JAVAEE</a>JAVA</li>
               <li><a href="#">JAVASE</a></li>
               <li><a href="#">JAVAME</a></li>
           </ul>
       </li>
       <li>C</li>
       <li>C++</li>
       <li>Go</li>
   </ul>

   <script>
       $(document).ready(function () {
           $("#menu").menu({position:{at:"right bottom"}});
      });
   </script>
</body>
</html>

水平菜单

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
   <style>
       .ui-menu:after{
           content: ".";
           display: block;
           clear: both;
           visibility: hidden;
           line-height: 0;
           height: 0;
      }

       .ui-menu .ui-menu-item{
           display: inline-block;
           float: left;
           margin: 0;
           padding: 10px;
           width: auto;
      }
   </style>
</head>
<body>
   <ul id="menu">
       <li>
           <a href="#">Java</a>
           <ul>
               <li><a href="#">JAVAEE</a></li>
               <li><a href="#">JAVASE</a></li>
               <li><a href="#">JAVAME</a></li>
           </ul>
       </li>
       <li>C</li>
       <li>C++</li>
       <li>Go</li>
   </ul>

   <script>
       $(document).ready(function () {
           $("#menu").menu({position:{at:"left bottom"}});
      });
   </script>
</body>
</html>
样式操作

样式类

addClass();  //添加指定的CSS类名
removeClass();  //移除指定的CSS类名
hasClass(); //判断样式存不存在
toggleClass(); //切换CSS类名,如果有就移除,如果没有就添加.

slider(拖动条)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
<span id="span">0</span>
<div id="slider"></div>

<script>
   var valueSpan,slider;
   $(document).ready(function () {
       slider=$("#slider");
       valueSpan=$("#span");

       // slider.slider({
       //     change:function (event,ui) {
       //         valueSpan.text(slider.slider("option","value"));
       //     }
       // });

       slider.slider({
           slide:function (event,ui) {
               valueSpan.text(slider.slider("option","value"));
          }
      })
  });
</script>
</body>
</html>

Example 开关灯和模态框 CSS

css("color","red")   //DOM操作: tag.style.color="red"

$("p").css("color","red"); //将所有p标签的字体设置为红色.

输入框

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
</head>
<body>
   <input id="input">
   <button id="btn">getValue</button>
<script>
   $(function () {
       $("#input").spinner();
       $("#input").spinner("value","18");
       $("#btn").on("click",function () {
           alert($("#input").spinner("value"));
      });
  });
</script>
</body>
</html>

spinner(下拉菜单/列表)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.1.min.js"></script>
   <script src="jquery-ui.min.js"></script>
   <link href="jquery-ui.min.css" type="text/css" rel="stylesheet">
   <script>
       $(function () {
           $("#tabs").tabs();
      });
   </script>
</head>
<body>
<div id="tabs">
   <ul>
       <li><a href="#hello1">hello</a></li>
       <li><a href="#hello2">hello</a></li>
       <li><a href="#hello3">hello</a></li>
   </ul>
   <div id="hello1">
       hello1
       hello1
       hello1
       hello1
   </div>
   <div id="hello2">
       hello2
       hello2
       hello2
       hello2
   </div>
   <div id="hello3">
       hello3
       hello3
       hello3
       hello3
   </div>
</div>

</body>
</html>
位置操作
offset()    //获取匹配元素在当前窗口的相对偏移或设置元素位置
position() //获取匹配元素相对父元素的偏移
scrollTop() //获取匹配元素相对滚动条顶部的偏移
scrollLeft() //获取匹配元素相对滚动条左侧的偏移

# offset()方法允许我们检索一个元素相对于文档(document)的当前位置
# 和.position()的差别在于: .position()是相对于父级元素的位移.

Example1

 

 

 

文本操作

HTML代码

# html()        //取得第一个匹配元素的html内容
# html(val) //设置所有匹配元素的html内容

文本值

# $('this').text()      //取得所有匹配元素的内容
# $('this').text(val) //设置所有匹配元素的内容

# $('this').val("YouMen") //val能修改input里面输入的内容

val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值

Example1 模态编程框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .hide{
          display: none;
      }
      .modal{
          position: fixed;
          top: 50%;
          left: 50%;
          width: 500px;
          height: 400px;
          margin-left: -250px;
          margin-top: -250px;
         
          z-index: 10;
      }
      .shadow{
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          opacity: 0.6;
         
          z-index: 9;
      }
  </style>
</head>
<body>
  <a onclick="addElement();">添加</a>

  <table border="1" id="tb">
      <tr>
          <td target="hostname">1.1.1.11</td>
          <td target="port">80</td>
          <td target="ip">80</td>
          <td>
              <a class="edit">编辑</a> | <a class="del">删除</a>
          </td>
      </tr>
      <tr>
          <td target="hostname">1.1.1.12</td>
          <td target="port">80</td>
          <td target="ip">80</td>
          <td>
              <a class="edit">编辑</a> | <a class="del">删除</a>
          </td>
      </tr>
      <tr>
          <td target="hostname">1.1.1.13</td>
          <td target="port">80</td>
          <td target="ip">80</td>
          <td>
              <a class="edit">编辑</a> | <a class="del">删除</a>
          </td>
      </tr>
      <tr>
          <td target="hostname">1.1.1.14</td>
          <td target="port">80</td>
          <td target="ip">80</td>
          <td>
              <a class="edit">编辑</a> | <a class="del">删除</a>
          </td>

      </tr>
  </table>

  <div class="modal hide">
      <div>
          <input name="hostname" type="text" />
          <input name="port" type="text" />
          <input name="ip" type="text" />
      </div>

      <div>
          <input type="button" value="取消" onclick="cancelModal();" />
          <input type="button" value="确定" onclick="confirmModal();" />
      </div>
  </div>

  <div class="shadow hide"></div>

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

      $('.del').click(function () {
          $(this).parent().parent().remove();
      });

      function confirmModal() {

          var tr = document.createElement('tr');
          var td1 = document.createElement('td');
          td1.innerHTML = "11.11.11.11";
          var td2 = document.createElement('td');
          td2.innerHTML = "8001";

          $(tr).append(td1);
          $(tr).append(td2);

          $('#tb').append(tr);

          $(".modal,.shadow").addClass('hide');
//           $('.modal input[type="text"]').each(function () {
//               // var temp = "<td>..."
//
//
//
//           })
      }

      function addElement() {
          $(".modal,.shadow").removeClass('hide');
      }
      function cancelModal() {
          $(".modal,.shadow").addClass('hide');
          $('.modal input[type="text"]').val("");
      }

      $('.edit').click(function(){
          $(".modal,.shadow").removeClass('hide');
          // this
          var tds = $(this).parent().prevAll();
          tds.each(function () {
              // 获取td的target属性值
              var n = $(this).attr('target');
              // 获取td中的内容
              var text = $(this).text();
              var a1 = '.modal input[name="';
              var a2 = '"]';
              var temp = a1 + n + a2;
              $(temp).val(text);
          });


//           var port = $(tds[0]).text();
//           var host = $(tds[1]).text();
//
//           $('.modal input[name="hostname"]').val(host);
//           $('.modal input[name="port"]').val(port);
          // 循环获取tds中内容
          // 获取 <td>内容</td> 获取中间的内容
          // 赋值给input标签中的value

      });
  </script>
</body>
</html>

Example2 开关

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .hide{
          display: none;
      }
  </style>
</head>
<body>
  <input id="i1" type="button" value="开关" />
  <div class="c1">YouMen</div>

  <script src="jquery-1.12.4.js"></script>
  <script>
      $('#i1').click(function () {
          if($('.c1').hasClass('hide')){
              $('.c1').removeClass('hide');
          }else{
              $('.c1').addClass('hide');
          }
      })
  </script>
</body>
</html>
属性操作

用于ID等或自定义属性

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop() // 获取属性
removeProp() // 移除属性

注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug,在3.x版本的jQuery中则没有这个问题。为了兼容性,我们在处理checkbox和radio的时候尽量使用特定的prop(),不要使用attr(“checked”, “checked”)。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>
$(":checkbox[value='1']").prop("checked", true);
$(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别

# attr全称attribute(属性)
# prop全称property(属性)
# 虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,
# 而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。
文档处理

Example 多个菜单多个内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
      .hide{
          display: none;
      }
      .menu{
          height: 38px;
         
          line-height: 38px;
      }

      .active{
         
      }

      .menu .menu-item{
          float: left;
          border-right: 1px solid red;
          padding: 0 5px ;
          // 小手
          cursor: pointer;
      }
      .content{
          min-height: 500px;
          border: 1px solid #eeeeee;
      }
  </style>
</head>
<body>
  <div style="width: 700px; margin: 0 auto;">
      <div class="menu">
          <div class="menu-item active" a="1">菜单一</div>
          <div class="menu-item" a="2">菜单二</div>
          <div class="menu-item" a="3">菜单三</div>
      </div>

      <div class="content">
          <div b="1">内容一</div>
          <div class="hide" b="2">内容二</div>
          <div class="hide" b="3">内容三</div>
      </div>
  </div>

  <script src="jquery-1.12.4.js"></script>
  <script>
      $('.menu-item').click(function () {
          $(this).addClass('active').siblings().removeClass('active');
          var target = $(this).attr('a');
          $('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
      })
  </script>
</body>
</html>
posted @ 2020-05-22 20:49  常见-youmen  阅读(328)  评论(0编辑  收藏  举报