一、元素查找

1、选择器

id=d------------------------------------------>$("#d")

class=c1------------------------------------->$(".c1")

<div></div>-------------------------------->$("div")

<div><p></p></div>--------------------->$("div p") div下的p标签

<div></div><p></p>--------------------->$("div,p") div标签和p标签

<div class="c1"></div>-------------------->$("div[class='c1']")

2、筛选器

1>  parent([expr])寻找其父级元素

2>  children([expr]) 寻找子集元素

3>  next([expr]) 寻找当前元素的下一个兄弟元素

4>  prev([expr])寻找当前元素的上一个兄弟元素

5>  siblings([expr])寻找除他以外的所有兄弟元素集合

6>  find(expr|obj|ele)寻找当前标签的后代标签（子子孙孙）

7>  hasClass(class)  检查当前的元素是否含有某个特定的类，如果有，则返回true

二、操作

1、属性

1>  attr(name|properties|key,value|fn)  用于获取或者修改属性值

2>  removeAttr(name)  用于删除某一种属性

3>  prop(name|properties|key,value|fn)

4>  removeProp(name)

2、Css

1>   addClass(class|fn) 为class类添加某一种属性

2>   removeClass([class|fn])  为class类删除某一种属性

3、HTML代码/文本/值

1>  html([val|fn])   取得匹配元素的html内容(文本内容+标签)

2>  text([val|fn])  取得匹配元素的文本内容

4、文档处理

1>  append(content|fn)  向每个匹配的元素内部后面追加内容

2>  prepend(content)    向每个匹配的元素内部前面追加内容

5、 删除

1>  empty()表示只清空匹配标签中间的HTML

2>  remove([expr]) 表示把匹配到的标签整体移除

6、复制

clone([Even[,deepEven]])   克隆匹配的DOM元素并且选中这些克隆的副本

三、循环的俩种方式

each(callback)

1>  $("匹配一个可迭代的元素集合").each（function(){}）

2> $.each("可迭代的元素集合"，function(){})

   <script>

       $.each(["a","b","c"],function (x,y) {         //其中的x为获取的索引位置，y为按索引获取的对应元素

           console.log(x,y)

       })

        $(["a","b","c"]).each(function (x,y) {

            console.log(x,y)

        })

    </script>

四、常用几种方法

1> size()   jQuery 对象中元素的个数  当前匹配的元素个数。与length将返回相同的值。

2> length   jQuery 对象中元素的个数

3>  each(callback)   循环

五、实例

1、复制标签（克隆）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

    <div class="outer">

           <div class="section">

               <div class="icons" style="display: inline-block">

                   <a onclick="add(this)"><button>+</button></a>

               </div>

               <div class="inputs" style="display: inline-block">

                   <input type="checkbox">

                   <input type="text" value="IP">

               </div>

           </div>

    </div>

    <script>

        function add(self) {

            var item = $(self).parent().parent().clone();   //通过你现在点击的标签找上上级标签进行克隆，不能直接通过class="section"，因为你克隆的标签里面也有这个属性

            $(".outer").append(item);

            item.find("a").children().text("-");

            item.find("a").attr("onclick","remove1(this)");   //这里的函数名不能用关键字

        }

        function remove1(self) {

            var item = $(self).parent().parent().remove();

        }

    </script>

</body>

</html>

克隆

2、放大镜

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            width: 350px;

            height: 350px;

            border: 5px dashed gold;

        }

        .box .small_box {

            position: relative;

        }

        .box .small_box .float{

            width: 175px;

            height: 175px;

            background: rgba(0,0,0,.2);

            position: absolute;

            display: none;

        }

        .box .big_box{

            position: absolute;

            left: 370px;

            top: 0;

            width: 350px;

            height: 350px;

            overflow: hidden;

            border: 5px dashed gold;

            display: none;

        }

        .box .big_box img{

             position: absolute;

         }

    </style>

</head>

<body>

    <div class="box">

        <div class="small_box">

            <div class="float"></div>

            <img src="small.jpg" alt="小图">

        </div>

        <div class="big_box">

            <img src="big.jpg" alt="">

        </div>

    </div>

    <script>

        $(".box").mouseover(function () {     //鼠标放上去隐藏的显现

            $(this).find(".float").css("display","block"); // 通过修改display为block后显现

            $(this).find(".big_box").css("display","block");

        })

        $(".box").mouseout(function () {     //鼠标离开后再隐藏

            $(this).find(".float").css("display","none");

            $(this).find(".big_box").css("display","none");

        })

        $(".small_box").mousemove(function (e) {

            var _event = e || windows.event    //这个是用来区别ie 和其他浏览器的一个判断

            var small_box_height = $(".small_box").height();

            var small_box_width  = $(".small_box").width();

            var float_height = $(".float").height();

            var float_width  = $(".float").width();

            var float_height_half = $(".float").height()/2;

            var float_width_half  = $(".float").width()/2;

            var mouse_left = e.clientX - float_width_half;

            var mouse_top = e.clientY - float_height_half;

            if(mouse_left<0){mouse_left=0}  // 当鼠标x坐标等于飘移盒子宽度的一般，固定盒子的x坐标一直等于盒子宽的一半

            else if(mouse_left>small_box_width - float_width){mouse_left=small_box_width - float_width}

            if(mouse_top<0){mouse_top=0}

            else if(mouse_top>small_box_height - float_height){mouse_top=small_box_height - float_height}

            $(".float").css("left",mouse_left + "px");

            $(".float").css("top",mouse_top + "px");

            var move_x = ($(".big_box img").width()- $(".big_box").width())/($(".small_box").width()- $(".float").width())

            //这个比例是通过各自视口可移动的像素比例得到的，（大图的宽-大图可视窗口宽）/(原图的宽-原图可视窗口的宽度)

            var move_y = ($(".big_box img").height()- $(".big_box").height())/($(".small_box").height()- $(".float").height())

            $(".big_box img").css("left",-move_x*mouse_left + "px");

            $(".big_box img").css("top",-move_y*mouse_top + "px");

         })

    </script>

</body>

</html>

放大镜

jquery前期总结，及实例的更多相关文章

  1. 很不错的jQuery学习资料和实例

    这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...

  2. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  3. jQuery懒加载插件jquery.lazyload.js使用说明实例

    jQuery懒加载插件jquery.lazyload.js使用说明实例很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片.懒加载原理:浏览器会自动对页面中 ...

  4. jquery-1 jquery几个小实例

    jquery-1  jquery几个小实例 一.总结 一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...

  5. 前端基础教程-jQuery EasyUI 的EasyLoader实例

    兄弟连前端分享-jQuery EasyUI 的EasyLoader实例 to move panel to other position $('#p').panel('move',{ left:100, ...

  6. validate jquery 注册页面使用实例 详解

    官方使用文档:http://jqueryvalidation.org/documentation/ 参考资料:http://www.w3cschool.cc/jquery/jquery-plugin- ...

  7. jQuery的事件委托实例分析

    事件委托主要是利用事件冒泡现象来实现的,对于事件委托的精准的掌握,可以有利于提高代码的执行效率.先看一段代码实例: <!DOCTYPE html> <html> <hea ...

  8. jQuery&nbsp;Ajax&nbsp;实例&nbsp;全解析

    jQuery Ajax 实例 全解析 jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我 ...

  9. jQuery的基础语法实例

    jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...

随机推荐

  1. golang gorilla websocket例子

    WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端. WebSocket通信协议于2011年被IETF定 ...

  2. Qt 中的事件处理（二）

    1. 回顾事件传递的过程 ①源头:操作系统   操作系统检测到用户的动作时,就会产生一个系统消息,系统消息就会被发送到正在运行的Qt应用程序中, ②应用程序收到系统消息后, 他会将系统消息翻译成对应的 ...

  3. c++中计算程序执行时间

    #include<iostream> #include<time.h> using namespace std; int main() { clock_t t1 = clock ...

  4. 黄聪：PHP JSON_ENCODE 不转义中文汉字的方法

    ios程序中不识别读取到的JSON数据中 \u开头的数据. PHP 生成JSON的时候,必须将汉字不转义为 \u开头的UNICODE数据. 网上很多,但是其实都是错误的,正确的方法是在json_enc ...

  5. Intellij Idea编译项目下的.java文件时的编码问题

    Intellij Idea编译项目下的.java文件时的编码问题 原创 2015年07月22日 21:45:14 10510 由<编译.java文件时的编码问题>可知,在编译.java文件 ...

  6. IDEA创建简单servlet程序

    创建项目 创建完后的目录结构为: web项目配置 在WEB-INF目录下新建两个文件夹,分别命名未classes和lib(classes目录用于存放编译后的class文件,lib用于存放依赖的jar包 ...

  7. C++进阶--拥有资源句柄的类(浅拷贝，深拷贝，虚构造函数)

    // Person通过指针拥有string class Person { public: Person(string name) { pName_ = new string(name); } ~Per ...

  8. Sublime Text 3中文乱码问题解决(最新)

    Sublime Text 3是我MacBook Pro最喜欢的代码编辑器,没有之一,因为她的性感高亮代码配色,更因为它的小巧,但是它默认不支持GBK的编码格式,因此打开GBK的代码文件,如果里面有中文 ...

  9. 算法：整数与ip地址转换

    直接上代码(不要直接拷贝,中间少了一行啊):   #include <string>   #include <iostream>   using namespace std; ...

  10. uoj #14.【UER #1】DZY Loves Graph

    http://uoj.ac/problem/14 由于加入的边权递增,可以直接运行kruskal并支持撤销,但这样如果反复批量删边和撤销,时间复杂度会退化,因此需要对删边操作加上延时处理,只有在删边后 ...