前端基础之JQuery

一. 什么是JQuery？

［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。

［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器

［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

二. 什么是JQuery对象？

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

$("#test").html() 
   
         意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 

         这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML; 

         虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

         约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$. 

var $variable = jQuery 对象
var variable = DOM 对象

$variable[0]：jquery对象转为dom对象      $("#msg").html(); $("#msg")[0].innerHTML

jQuery的基础语法：$(selector).action() 

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

参考：http://jquery.cuishifeng.cn

三. 选择器与筛选

3.1 选择器

a. 基本选择器

$("#myELement") 　　选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 　　 选择所有的div标签元素，返回div元素数组
$(".myClass") 　　 选择使用myClass类的css的所有元素
$("*") 　　 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
$(".class,p,div") 　　选择p或div或class="class"的标签

View Code

b. 层级选择器

$(form input)           选择所有from表单下的input元素
$("#main > *")           选择id值为main的所有子元素
$("label + input")     选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div")       同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签

View Code

c. 属性筛选器

$("div[id]")                          选择所有含有id属性的div元素 
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素 
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 
$("input[name*='man']")          选择所有的name属性包含'news'的input元素 
$("input[id][name$='man']")    可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man结尾的元素

View Code

d. 表单选择器

$(":input")                    选择所有的表单输入元素，包括input, textarea, select 和 button 
$(":text")                     选择所有的text input元素 
$(":password")                 选择所有的password input元素 
$(":radio")                    选择所有的radio input元素 
$(":checkbox")                 选择所有的checkbox input元素 
$(":submit")                   选择所有的submit input元素 
$(":image")                    选择所有的image input元素 
$(":reset")                    选择所有的reset input元素 
$(":button")                   选择所有的button input元素 
$(":file")                     选择所有的file input元素 
$(":hidden")                      选择所有类型为hidden的input元素或表单的隐藏域

View Code

$(":enabled")             选择所有的可操作的表单元素 
$(":disabled")            选择所有的不可操作的表单元素 
$(":checked")            选择所有的被checked的表单元素 
$("select option:selected") 选择所有的select 的子元素中被selected的元素 
$("[type='text']")----->$(":text")         注意只适用于input标签  : $("input:checked")

$(”input[@ name =S_03_22]“).parent().prev().text()             选取一个 name 为”S_03_22″的input text框的上一个td的text值
 
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)             名字以”S_”开始，并且不是以”_R”结尾的

$(”input[@ name =radio_01][@checked]“).val();                 一个名为 radio_01的radio所选的值

View Code

3.2 筛选器

a. 基本筛选器

$("tr:first")       选择所有tr元素的第一个tr元素
$("tr:last")        选择所有tr元素的最后一个tr元素
$("input:not(:checked) + span")        选择所有input标签且不包含checked元素,且有兄弟标签为span元素的input元素
$("li:eq(2)")       选择第二个li元素
$("li:even")        选择每个相隔的(偶数)的<li>元素
$("li:odd")         选择每个相隔的(奇数)的<li>元素
$("li:gt(1)")       选择大于第一个<li>的<li>元素
$("li:lt(1)")       选择小于第一个<li>的<li>元素

View Code

b. 过滤筛选器

$("li").eq(2)       过滤第2个的li标签
$("li").first()     过滤第1个的li标签
$("ul li").hasClass("test")     ul下过滤class='test'的li元素

View Code

c. 查找筛选器

// 查找子标签
$("div").children(".test")
$("div").find('.test')
// 向下查找兄弟标签
$(".test").next()           查找class=".test"类标签下面的第一个兄弟标签
$(".test").nextAll()        查找class=".test"类标签下面的所有兄弟标签
$(".test").nextUntil('.outer')      查找class=".test"类标签下面的兄弟标签直到查找class=".outer"类标签为止
// 向上查找兄弟标签
$("p").prev(".selected")            找到每个段落紧邻的前一个同辈元素中类名为selected的元素
$("p").prevAll()                    找到每个段落紧邻的所有同辈元素中类名为selected的元素
$("p").prevUntil()
// 查找所有兄弟标签
$("div").siblings()
// 查找父标签
$(".test").parent()
$(".test").parents()
$(".test").parentUntil()

View Code

3.3 选择器列表

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

四. 事件，属性，css，文档处理

4.1. 事件

方法	描述
bind()	向匹配元素附加一个或更多事件处理器
blur()	触发、或将函数绑定到指定元素的 blur 事件
change()	触发、或将函数绑定到指定元素的 change 事件
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error()	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus()	触发、或将函数绑定到指定元素的 focus 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件

页面载入

ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})　
# 一般在head标签中添加js或jquery代码时候，需要等待文档对象完全加载完成后进行处理时使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>test</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
        $(function () {
            $('h1').css('backgroundColor','wheat');
        });
    </script>
</head>
<body>
    <h1>This is a H1 title</h1>
</body>
</html>

示例

事件绑定

//语法:  标签对象.事件(函数)    
eg: $("p").click(function(){})

事件委派

$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数。
#一般用于将事件同步至新建标签时使用

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>

<script src="jquery.min.js"></script>
<script>
    $("ul li").click(function(){
        alert(123)
    });

    $("#add_li").click(function(){
        var $ele=$("<li>");
        $ele.text(Math.round(Math.random()*10));
        $("ul").append($ele);

    });


    $("ul").on("click","li",function(){
        alert(456);
    });
    
</script>

示例

事件切换

hover事件：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

over:鼠标移到元素上要触发的函数。

out:鼠标移出元素要触发的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        .test{
            width: 200px;
            height: 200px;
            background-color: #2e6da4;
        }
    </style>
</head>
<body>
    <div class="test"></div>
<script src="jquery-3.1.1.js"></script>
<script>
    $('.test').mouseover(function () {
       console.log('over');
    });
    $('.test').mouseout(function () {
       console.log('out');
    });
</script>

</body>
</html>

示例

4.2 属性操作

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

HTML代码：

$("").html([val|fn])

文本：

$("").text([val|fn])

值：

$("").val([val|fn|arr])

attr属性方法

$("").attr();
$("").removeAttr();
$("").prop(); 设置或返回匹配元素的属性和值。
$("").removeProp(); 从所有匹配的元素中移除指定的属性。

prop与attr的区别：
在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此需要使用prop方法去操作才能获得正确的结果。

4.3 文档处理

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

五. each循环、文档节点操作、动画效果、css操作

5.1 each循环

我们知道，$("p").css("color","red")是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦！

jquery支持两种循环方式:

方式一:
格式：$.each(obj,fn)
li=[10,20,30,40];
$.each(li,function(i,x){
    console.log(i,x)
});

方式一

方式二：

格式：$("").each(fn)

$("tr").each(function(){
     console.log($(this).html());
});
其中,$(this)代指当前循环标签。

方式二

each扩展:

/*
        function f(){

        for(var i=0;i<4;i++){

            if (i==2){
                return
            }
            console.log(i)
        }

    }
    f();  // 这个例子大家应该不会有问题吧!!!
//-----------------------------------------------------------------------


    li=[11,22,33,44];
    $.each(li,function(i,v){

        if (v==33){
                return ;   //  ===试一试 return false会怎样?
            }
            console.log(v)
    });

//------------------------------------------


    // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行

    //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
    //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
         for(var i in obj){

             ret=func(i,obj[i]) ;
             if(ret==false){
                 return ;
             }

         }
    // 这样就很灵活了:
    // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
    // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false


// ---------------------------------------------------------------------

each扩展

5.2 文档节点处理

1.创建一个标签对象
    $("<p>")
2.内部插入对象(父子关系节点)
    $("").append(content|fn)      ----->$("p").append("<b>Hello</b>");　　  对象前面插入
    $("").appendTo(content)       ----->$("p").appendTo("div");　　　　　　  对象后面插入
    $("").prepend(content|fn)     ----->$("p").prepend("<b>Hello</b>");　　 对象前面插入
    $("").prependTo(content)      ----->$("p").prependTo("#foo");          对象后面插入
3.外部插入对象(兄弟关系节点)
    $("").after(content|fn)       ----->$("p").after("<b>Hello</b>");
    $("").before(content|fn)      ----->$("p").before("<b>Hello</b>");
    $("").insertAfter(content)    ----->$("p").insertAfter("#foo");
    $("").insertBefore(content)   ----->$("p").insertBefore("#foo");
4. 替换
    $("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
5. 删除
　  $("").empty() 清空左右
    $("").remove([expr])
6. 复制
 　 $("").clone([Even[,deepEven]])

5.3 动画效果

显示与隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>

        // ready方法用于等待文档对象加载完成后出发的函数
        $(document).ready(function () {
            $("#hide").click(function () {
                $("p").hide(1000);      // 1000单位为毫秒，隐藏
            });

            $("#show").click(function () {
                $("p").show(1000);      // 1000单位为毫秒，显示
            });

//用于切换被选元素的 hide() 与 show() 方法。
            $("#toggle").click(function () {
                $("p").toggle();        // toggle方法用于切换
            });
        });

    </script>

</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>

</body>
</html>

View Code

滑动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content {
            text-align: center;
            background-color: lightblue;
            border: solid 1px red;
            display: none;
            padding: 50px;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#slideDown").click(function () {
                $("#content").slideDown(1000);
            });
            $("#slideUp").click(function () {
                $("#content").slideUp(1000);
            });
            $("#slideToggle").click(function () {
                $("#content").slideToggle(1000);
            })
        });
    </script>
</head>
<body>

<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>

</body>
</html>

View Code

淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#in").click(function () {
                $("#id1").fadeIn(1000);     //淡入
            });
            $("#out").click(function () {
                $("#id1").fadeOut(1000);    //淡出
            });
            $("#toggle").click(function () {
                $("#id1").fadeToggle(1000); //切换
            });
            $("#fadeto").click(function () {
                $("#id1").fadeTo(1000, 0.4);    //使用淡出效果来隐藏一个id="id1"的div元素，fadeTo() 方法将被选元素的不透明度逐渐地改变为指定的值。

            });
        });
    </script>

</head>
<body>
    <button id="in">fadein</button>
    <button id="out">fadeout</button>
    <button id="toggle">fadetoggle</button>
    <button id="fadeto">fadeto</button>
    <div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>

View Code

回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
    $("button").click(function () {
        $("p").hide(1000, function () {
            alert($(this).html());
        });
    });
</script>
</body>
</html>

View Code

5.4 css操作

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

位置操作

$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1 {
            width: 200px;
            height: 200px;
            background-color: wheat;
        }
    </style>
</head>
<body>
    <h1>this is offset</h1>
    <div class="test1"></div>
    <p></p>
    <button>change</button>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var $offset = $(".test1").offset();
    var lefts = $offset.left;
    var tops = $offset.top;
    $("p").text("Top:" + tops + " Left:" + lefts);
    $("button").click(function () {
        $(".test1").offset({left: 200, top: 400})
    })
</script>
</html>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }
        .box1 {
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: darkcyan;
        }
        .parent_box {
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="parent_box">
        <div class="box2"></div>
    </div>
    <p></p>
</body>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var $position = $(".box2").position();
    var $left = $position.left;
    var $top = $position.top;
    $("p").text("TOP:" + $top + "LEFT" + $left)
</script>
</html>

position

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

    <style>
        body {
            margin: 0;
        }

        .returnTop {
            height: 60px;
            width: 100px;
            background-color: peru;
            position: fixed;
            right: 0;
            bottom: 0;
            color: white;
            line-height: 60px;
            text-align: center;
        }

        .div1 {
            background-color: wheat;
            font-size: 5px;
            overflow: auto;
            width: 500px;
            height: 200px;
        }

        .div2 {
            background-color: darkgrey;
            height: 2400px;
        }
        
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<div class="div1 div">
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
    <h1>hello</h1>
</div>
<div class="div2 div"></div>
<div class="returnTop hide">返回顶部</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(window).scroll(function () {
        var current = $(window).scrollTop();
        console.log(current);
        if (current > 100) {

            $(".returnTop").removeClass("hide")
        }
        else {
            $(".returnTop").addClass("hide")
        }
    });
    $(".returnTop").click(function () {
        $(window).scrollTop(0)
    });
</script>
</body>
</html>

scrollTop

尺寸操作

$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
        }

        .box1 {
            width: 200px;
            height: 200px;
            background-color: wheat;
            padding: 50px;
            border: 50px solid rebeccapurple;
            margin: 50px;
        }

    </style>
</head>
<body>
    <div class="box1">
        DIVDIDVIDIV
    </div>
    <p></p>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    var $height = $(".box1").height();
    var $innerHeight = $(".box1").innerHeight();
    var $outerHeight = $(".box1").outerHeight();
    var $margin = $(".box1").outerHeight(true);
    $("p").text($height + "---" + $innerHeight + "-----" + $outerHeight + "-------" + $margin)
</script>
</body>
</html>

示例

六. 插件机制

6.1 jQuery.extend(object)

扩展jQuery对象本身。用来在jQuery命名空间上增加新函数。

在jQuery命名空间上增加两个函数:

<script>
    jQuery.extend({
      min: function(a, b) { return a < b ? a : b; },
      max: function(a, b) { return a > b ? a : b; }
});
    jQuery.min(2,3); // => 2
    jQuery.max(4,5); // => 5
</script>

2. jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）

增加两个插件方法：

<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<script src="jquery.min.js"></script>
<script>
    jQuery.fn.extend({
      check: function() {
         $(this).attr("checked",true);
      },
      uncheck: function() {
         $(this).attr("checked",false);
      }
    });

    $(":checkbox:gt(0)").check()
</script>

</body>

七. 示例练习

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

    <style>
          .menu{
              height: 500px;
              width: 20%;
              background-color: gainsboro;
              text-align: center;
              float: left;
          }
          .content{
              height: 500px;
              width: 80%;
              background-color: darkgray;
              float: left;
          }
         .title{
             line-height: 50px;
             background-color: wheat;
             color: rebeccapurple;}


         .hide{
             display: none;
         }


    </style>
</head>
<body>

<div class="outer">
    <div class="menu">
        <div class="item">
            <div class="title">菜单一</div>
            <div class="con">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单二</div>
            <div class="con hide">
                <div>222</div>
                <div>222</div>
                <div>222</div>
            </div>
        </div>
        <div class="item">
            <div class="title">菜单三</div>
            <div class="con hide">
                <div>333</div>
                <div>333</div>
                <div>333</div>
            </div>
        </div>

    </div>
    <div class="content"></div>

</div>
<script src="jquery.min.js"></script>
<script>
           $(".item .title").mouseover(function () {
                $(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");

//                $(this).next().removeClass("hide");
//                $(this).parent().siblings().children(".con").addClass("hide");
           })
</script>

</body>
</html>

左侧菜单

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

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .tab_outer{
            margin: 20px auto;
            width: 60%;
        }
        .menu{
            background-color: #cccccc;
            /*border: 1px solid red;*/
            line-height: 40px;
            text-align: center;
        }
        .menu li{
            display: inline-block;
            margin-left: 14px;
            padding:5px 20px;

        }
        .menu a{
            border-right: 1px solid red;
            padding: 11px;
        }
        .content{
            background-color: tan;
            border: 1px solid green;
            height: 300px;

        }
        .hide{
            display: none;
        }

        .current{
            background-color: #2868c8;
            color: white;
            border-top: solid 2px rebeccapurple;
        }
    </style>
</head>
<body>
      <div class="tab_outer">
          <ul class="menu">
              <li relation="c1" class="current">菜单一</li>
              <li relation="c2" >菜单二</li>
              <li relation="c3">菜单三</li>
          </ul>
          <div class="content">
              <div id="c1">内容一</div>
              <div id="c2" class="hide">内容二</div>
              <div id="c3" class="hide">内容三</div>
          </div>

      </div>
</body>


<script src="jquery.min.js"></script>
    <script>
          $(".menu li").click(function(){

               var index=$(this).attr("relation");
               $("#"+index).removeClass("hide").siblings().addClass("hide");
               $(this).addClass("current").siblings().removeClass("current");

          });


    </script>
</html>

tab切换

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

</head>
<body>

     <button>全选</button>
     <button>取消</button>
     <button>反选</button>
     <hr>
     <table border="1">
         <tr>
             <td><input type="checkbox"></td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
             <td>111</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
             <td>222</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
             <td>333</td>
         </tr>
         <tr>
             <td><input type="checkbox"></td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
             <td>444</td>
         </tr>
     </table>

<script src="jquery.min.js"></script>
    <script>

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

               if($(this).text()=="全选"){    // $(this)代指当前点击标签

                   $("table :checkbox").prop("checked",true)
               }
                else if($(this).text()=="取消"){
                   $("table :checkbox").prop("checked",false)
               }
                else {
                   $("table :checkbox").each(function(){

                     $(this).prop("checked",!$(this).prop("checked"));

                 });
               }

            });

    </script>
</body>
</html>

table正反选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .back{
            background-color: wheat;
            height: 2000px;
        }

        .shade{
            position: fixed;
            top: 0;
            bottom: 0;
            left:0;
            right: 0;
            background-color: darkgray;
            opacity: 0.4;
        }

        .hide{
            display: none;
        }

        .models{
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            height: 200px;
            width: 200px;
            background-color: white;

        }
    </style>
</head>
<body>
<div class="back">
    <input id="ID1" type="button" value="click" onclick="action1(this)">
</div>

<div class="shade hide"></div>
<div class="models hide">
    <input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>


<script src="jquery.min.js"></script>
<script>

    function action1(self){
        $(self).parent().siblings().removeClass("hide");

    }
    function action2(self){
        //$(self).parent().parent().children(".models,.shade").addClass("hide")

        $(self).parent().addClass("hide").prev().addClass("hide")

    }
</script>
</body>
</html>

模态对话框

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

</head>
<body>
            <div class="outer">
                <div class="item">
                        <input type="button" value="+">
                        <input type="text">
                </div>
            </div>


<script src=jquery.min.js></script>
    <script>

            function add(self){
                // 注意:if var $clone_obj=$(".outer .item").clone();会一遍二,二变四的增加
                 var $clone_obj=$(self).parent().clone();
                 $clone_obj.children(":button").val("-").attr("onclick","removed(this)");
                 $(self).parent().parent().append($clone_obj);
            }
           function removed(self){

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

           }

/*
        $("[value='+']").click(function(){

             var $clone_obj=$(this).parent().clone();
                 $clone_obj.children(":button").val("-").attr("class","mark");
                 $(this).parent().parent().append($clone_obj);

        });

        $(".outer").on("click",".item .mark",function(){

            console.log($(this));  // $(this):  .item .mark标签
            $(this).parent().remove()

        })

*/

    </script>
</body>
</html>

复制样式条

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

<form class="Form" id="form">

    <p><input class="v1" type="text" name="username" mark="用户名"></p>
    <p><input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

<script src="jquery.min.js"></script>
<script>


    $("#form :submit").click(function(){
          flag=true;

          $("#form .v1").each(function(){

          $(this).next("span").remove();// 防止对此点击按钮产生多个span标签

          var value=$(this).val();

          if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var ele=document.createElement("span");
                 ele.innerHTML=mark+"不能为空!";
                 $(this).after(ele);
                 $(ele).prop("class","error");// DOM对象转换为jquery对象
                 flag=false;
                 return false ; //-------->引出$.each的return false注意点
            }

        });

        return flag
    });

</script>
</body>
</html>

注册验证

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $(this).on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        }).mouseup(function(){
            $(this).off('mousemove');
        });
    })
</script>
</body>
</html>

拖动面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="jquery-3.1.1.js"></script>
    <title>Title</title>

    <style>
            .outer{
                width: 790px;
                height: 340px;
                margin: 80px auto;
                position: relative;
            }

            .img li{
                 position: absolute;
                 list-style: none;
                 top: 0;
                 left: 0;
                 display: none;
            }

           .num{
               position: absolute;
               bottom: 18px;
               left: 270px;
               list-style: none;
           }

           .num li{
               display: inline-block;
               width: 18px;
               height: 18px;
               background-color: white;
               border-radius: 50%;
               text-align: center;
               line-height: 18px;
               margin-left: 4px;
           }

           .btn{
               position: absolute;
               top:50%;
               width: 30px;
               height: 60px;
               background-color: lightgrey;
               color: white;

               text-align: center;
               line-height: 60px;
               font-size: 30px;
               opacity: 0.7;
               margin-top: -30px;

               display: none;
           }

           .left{
               left: 0;
           }

           .right{
               right: 0;
           }

          .outer:hover .btn{
              display: block;
          }

        .num .active{
            background-color: red;
        }
    </style>

</head>
<body>


      <div class="outer">
          <ul class="img">
              <li style="display: block"><a href=""><img src="img/1.jpg" alt=""></a></li>
              <li><a href=""><img src="img/2.jpg" alt=""></a></li>
              <li><a href=""><img src="img/3.jpg" alt=""></a></li>
              <li><a href=""><img src="img/4.jpg" alt=""></a></li>
              <li><a href=""><img src="img/5.jpg" alt=""></a></li>
              <li><a href=""><img src="img/6.jpg" alt=""></a></li>
          </ul>

          <ul class="num">
              <!--<li class="active"></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
              <!--<li></li>-->
          </ul>

          <div class="left  btn"> < </div>
          <div class="right btn"> > </div>

      </div>
<script src="jquery-3.1.1.js"></script>
<script>
    var i=0;
//  通过jquery自动创建按钮标签

    var img_num=$(".img li").length;

    for(var j=0;j<img_num;j++){
        $(".num").append("<li></li>")
    }

    $(".num li").eq(0).addClass("active");


// 手动轮播

    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass("active").siblings().removeClass("active");

        $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)

    });


// 自动轮播
    var c=setInterval(GO_R,1500);

    function GO_R() {

        if(i==img_num-1){
            i=-1
        }
         i++;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)

    }

    function GO_L() {
        if(i==0){
            i=img_num
        }
         i--;
         $(".num li").eq(i).addClass("active").siblings().removeClass("active");
         $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);  // fadeIn,fadeOut单独另开启的线程

    }
    $(".outer").hover(function () {
        clearInterval(c)
    },function () {
        c=setInterval(GO_R,1500)
    });

// button 加定播 
    $(".right").click(GO_R);
    $(".left").click(GO_L)

</script>
</body>
</html>

轮播图

posted @ 2017-08-07 17:10 囍。阅读(523) 评论(0) 编辑收藏举报

刷新页面返回顶部

囍。

前端基础之JQuery

一. 什么是JQuery？

二. 什么是JQuery对象？

三. 选择器与筛选

3.1 选择器

a. 基本选择器

b. 层级选择器

c. 属性筛选器

d. 表单选择器

3.2 筛选器

a. 基本筛选器

b. 过滤筛选器

c. 查找筛选器

3.3 选择器列表

四. 事件，属性，css，文档处理

4.1. 事件

页面载入

事件绑定

事件委派

事件切换

4.2 属性操作

4.3 文档处理

五. each循环、文档节点操作、动画效果、css操作

5.1 each循环

5.2 文档节点处理

5.3 动画效果

5.4 css操作

六. 插件机制

6.1 jQuery.extend(object)

2. jQuery.fn.extend(object)

七. 示例练习

公告