JQuery

学习参考网址http://jquery.cuishifeng.cn/

python中叫模块，在DOM/BOM/Javascript中叫类库

现在的JQ版本有：1.x 2.x 3.x

建议使用1.X的版本 （向下兼容）

JQ与DOM的转换：

　　JQ对象【0】    ==》 DOM对象

　　$(DOM对象)    ==》JQ对象

一、查找元素

　　　　相对DOM查找个元素需要10多行代码，JQ就简单很多

　　　　选择器，直接找到某个或者某类标签

1、id

　　写法 $('#id')

2、class

　 写法 $('.c1')

3、标签

　 写法 $('a') $('div')

4、组合

　　写法 $('a,div,.c1')   同时查找，检索这三个标签的任意一个满足即可，获取

5、层级 　

　　写法　$('a div .c1') 空格分开，表示这几个标签下必须同时满足，才获取，并且是下面的子子孙孙

　　另一种写法 $('a>dev') 表示只找a标签下的div

6、基本筛选器

　　：first　　：last　　：eq(index索引值从0开始)

7、属性

　　$('[alex]')　　　　　　具有alex属性的所有标签

　　$('[alex="123"]') 　　alex属性等于123的标签

8、实例：多选，反选，全选

　　知识点：(1) $('#tb :checkbox').prop('checked'); 获取值

　　　　　　　  $('#tb :checkbox').prop('checked', true); 设置值

　　　　　　(2) jQuery方法内置循环： $('#tb :checkbox').xxxx

　　　　　　(3) $('#tb:checkbox').each(function(k){

// k当前索引
                  // this，DOM，当前循环的元素 $(this)
          })

　　　　　　(4) var v = 条件？条件为真赋予v的值：条件为假赋予v的值

9、筛选　　

　　$('#i1').next()　　　　　　　　#标签id为#i1的下一个标签
　　$('#i1').nextAll()　　　　　　　#标签id为#i1下的所有标签

　　$('#i1').nextUntil('#ii1')　　　 #标签id为#i1和标签id=#ii1之间的所有标签，不包括i1和ii1　　

　　$('#i1').prev()　　　　　　　　#标签id为#i1的上一个标签
　　$('#i1').prevAll()　　　　　　　与next类似
　　$('#i1').prevUntil('#ii1')　　

　　$('#i1').parent()　　　　　　　　#标签id为#i1的父标签
　　$('#i1').parents()
　　$('#i1').parentsUntil()　　

　　$('#i1').children()　　　　　　　#标签id为#i1的子孙标签
　　$('#i1').siblings()　　　　　　　#标签id为#i1的兄弟标签
　　$('p').find(‘span’)　　　　　　　#标签p内的span标签
　　$('li:eq(1)')　　　　　　　　　　#一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
　　$('li').eq(1)　　　　　　　　　　#同上，获取匹配的第二个元素

　　first()　　　　　　　　　　　　　#获取匹配的第一个元素
　　last()　　　　　　　　　　　　　#获取匹配的最后个元素
　　hasClass(class)　　　　　　　　#检查当前的元素是否含有某个特定的类，如果有，则返回true

二、操作元素

1、文本操作：　　

　　$(..).text() 　　　　　　　　# 获取文本内容
　　$(..).text(“<a>1</a>”) 　　# 设置文本内容
　　$(..).html()　　　　　　　　#获取文本内容包括标签
　　$(..).html("<a>1</a>")　　#设置文本内容，解析对应的标签
　　$(..).val()　　　　　　　　　#获取文本框中的值
　　$(..).val(..)　　　　　　　　#设定文本框的值

2、样式操作：

　　addClass　　　　　　　　为每个匹配的元素添加指定的类名。
　　removeClass　　　　　　从所有匹配的元素中删除全部或者指定的类
　　toggleClass　　　　　　 如果存在（不存在）就删除（添加）一个类。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <input id="i1" type="button" value="开关"/>

        <a class="c1 hide">fdasfdasdfasfsafasdfasfdasfas</a>

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

    <script>

        $('#i1').click(function () {

//            if ($('.c1').hasClass('hide')) {

//                $('.c1').removeClass('hide');

//            } else {

//                $('.c1').addClass('hide');

//            }

            //以下代码等同于上面的注释代码

            $('.c1').toggleClass('hide')

        })

    </script>

</body>

</html>

3、属性操作：

　　# 专门用于做自定义属性
　　　　$(..).attr('n')　　　　　　　　　　返回被选元素的属性值。
　　　　$(..).attr('n','v')　　　　　　　　 设置被选元素的属性值。
　　　　$(..).removeAttr('n')    　　　　  删除被选元素的属性值。
　　　　
　　# 专门用于checkbox,radio（1,2版本一定要用这个prop，用attr不行）

　　　　<input type='checkbox' id='i1' />
　　　　$(..).prop('checked')    　　　　  获取在匹配的元素集中的属性值。
　　　　$(..).prop('checked', true)　　　 设置在匹配的元素的属性值

　　PS:
　　　　index 获取索引位置　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .hide{

            display: none;

        }

        .menu{

            height: 38px;

            background-color: #eeeeee;

            line-height: 38px;

        }

        .active{

            background-color: brown;

        }

        .menu .menu-item{

            float: left;

            border-right: 1px solid red;

            padding: 0 5px;

            cursor: pointer; //鼠标变为小手

        }

        .content{

            min-height: 100px;

            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')

            //索引方法

            $(".content").children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')

        })

    </script>

</body>

</html>

　　　　　　

4、文档处理：

　　　　append　　　　　　　　　　　　
　　　　prepend
　　　　after　　　　　　　　　　　　　　在每个匹配的元素之后插入内容
　　　　before　　　　　　　　　　　　　在每个匹配的元素之前插入内容
　　　　remove　　　　　　　　　　　　 从DOM中删除所有匹配的元素
　　　　empty　　　　　　　　　　　　　删除匹配的元素集合中所有的子节点
　　　　clone　　　　　　　　　　　　　克隆匹配的DOM元素并且选中这些克隆的副本

5、css处理：

　　$('t1').css('样式名称', '样式值')
　　点赞实例应用：
　　　　- $('t1').append()
　　　　- $('t1').remove()
　　　　- setInterval
　　　　- 透明度 1 > 0
　　　　- position
　　　　- 字体大小，位置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .container{

            padding: 50px;

            border: 1px solid #dddddd;

        }

        .item{

            position: relative;

            width: 30px;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

    <div class="container">

        <div class="item">

            <span>赞</span>

        </div>

    </div>

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

    <script>

        $('.item').click(function () {

            AddFavor(this);

        });

        function AddFavor(self) {

            //DOM对象

            var fontSize = 15;

            var top = 0;

            var right = 0;

            var opacity = 1;

            var tag = document.createElement('span');

            $(tag).text('+1');

            $(tag).css('color','red');

            $(tag).css('position','absolute');

            $(tag).css('fontSize',fontSize + 'px');

            $(tag).css('right',right + 'px');

            $(tag).css('top', top + 'px');

            $(tag).css('opacity', opacity);

            $(self).append(tag);

            var obj = setInterval(function () {

                fontSize = fontSize + 10;

                top = top - 10;

                right = top - 10;

                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + 'px');

                $(tag).css('right',right + 'px');

                $(tag).css('top', top + 'px');

                $(tag).css('opacity', opacity);

                if(opacity < 0){

                    clearInterval(obj);

                    $(tag).remove()

                }

            },50)

        }

    </script>

</body>

</html>

6、位置：

　　$(window).scrollTop() 获取
　　$(window).scrollTop(0) 设置
　　scrollLeft([val])

　　offset().left 指定标签在html中的坐标
　　offset().top 指定标签在html中的坐标

　　position() 指定标签相对父标签(relative)标签的坐标
　　　　<div style='position:relative'>
　　　　　　<div>
　　　　　　　　<div id='i1' style='position:absolute;height:80px;border:1px'></div>
　　　　　　</div>
　　　　</div>
　　$('i1').height() 　　　　 　　　　  # 获取标签的高度 纯高度
　　$('i1').innerHeight()　　 　　　　 # 获取边框 + 纯高度 + ？
　　$('i1').outerHeight() 　　 　　      # 获取边框 + 纯高度 + ？
　　$('i1').outerHeight(true) 　　　　 # 获取边框 + 纯高度 + ？
　　　　　　　　　　　　　　　　　# 纯高度，边框，外边距，内边距

请看下三个图：

图1：

图2：

图3：

7、事件 　　

　　DOM： 三种绑定方式
　　　　jQuery：
　　　　　　$('.c1').click()
　　　　　　$('.c1').....

　　　　　　$('.c1').bind('click',function(){
　　　　　　})

　　　　　　$('.c1').unbind('click',function(){
　　　　　　})
　　　　　　*******************
　　　　　　$('.c').delegate('a', 'click', function(){
　　　　　　})
　　　　　　$('.c').undelegate('a', 'click', function(){
　　　　　　})

　　　　　　$('.c1').on('click', function(){
　　　　　　})
　　　　　　$('.c1').off('click', function(){
　　　　　　})

　　　　　阻止事件发生
　　　　　　　return false

　　　　# 当页面框架加载完成之后，自动执行
　　　　　　$(function(){
　　　　　　　　$(...)
　　　　　　})

8、jQuery扩展：

　　　　　　 - $.extend $.方法
　　　　　　 - $.fn.extend $(..).方法
　　　　　　(function(){
　　　　　　　　var status = 1;
　　　　　　　　// 封装变量
　　　　　　})(jQuery)

　　

　　

jQuery运维开发之第十七天的更多相关文章

  1. 来不及说什么了，Python 运维开发剁手价仅剩最后 2 天

    51reboot 运维开发又双叒叕的搞活动了—— Python 运维开发 18 天训练营课程, 剁手价1299 最后2天 上课方式:网络直播/面授(仅限北京) DAY1 - DAY4 Python3 ...

  2. 重磅|0元学 Python运维开发，别再错过了

    51reboot 运维开发又双叒叕的搞活动了,鉴于之前 51reboot 的活动反馈,每次活动结束后(或者已经结束了很长时间)还有人在问活动的事情.这一次小编先声明一下真的不想在此次活动结束后再听到类 ...

  3. python bottle框架（WEB开发、运维开发）教程

    教程目录 一:python基础(略,基础还是自己看书学吧) 二:bottle基础 python bottle web框架简介 python bottle 框架环境安装 python bottle 框架 ...

  4. Python 开发个人微信号在运维开发中的使用

    一.主题:Python 开发个人微信号在运维开发中的使用 二.内容: 企业公众号 介绍开发微信公众号的后台逻辑,包括服务器验证逻辑.用户认证逻辑 个人微信号 面对企业微信的种种限制,可以使用 Itch ...

  5. DEVOPS 运维开发系列

    DEVOPS 运维开发系列四:ITIL事态管理流程.事态监控系统设计以及基于Devops的效率提升实践 - watermelonbig的专栏 - CSDN博客https://blog.csdn.net ...

  6. Python运维开发基础10-函数基础【转】

    一,函数的非固定参数 1.1 默认参数 在定义形参的时候,提前给形参赋一个固定的值. #代码演示: def test(x,y=2): #形参里有一个默认参数 print (x) print (y) t ...

  7. Python运维开发基础09-函数基础【转】

    上节作业回顾 #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen # 实现简单的shell命令sed的替换功能 import ...

  8. Python运维开发基础08-文件基础【转】

    一,文件的其他打开模式 "+"表示可以同时读写某个文件: r+,可读写文件(可读:可写:可追加) w+,写读(不常用) a+,同a(不常用 "U"表示在读取时, ...

  9. Python运维开发基础07-文件基础【转】

    一,文件的基础操作 对文件操作的流程 [x] :打开文件,得到文件句柄并赋值给一个变量 [x] :通过句柄对文件进行操作 [x] :关闭文件 创建初始操作模板文件 [root@localhost sc ...

随机推荐

  1. the partition number

    有一个容量为n的背包,有1, 2, 3, ..., n这n种物品,每种物品可以无限使用,求装满的方案数. 法一: http://mathworld.wolfram.com/PartitionFunct ...

  2. Java 23种设计模式详尽分析与实例解析之二--结构型模式

    Java设计模式 结构型模式 适配器模式 模式动机:在软件开发中采用类似于电源适配器的设计和编码技巧被称为适配器模式.通常情况下,客户端可以通过目标类的接口访问它所提供的服务.又是,现有的类可以满足客 ...

  3. PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码

    PHP程序中使用PDO对象实现对数据库的增删改查操作(PHP+smarty) dbconn.php <?php //------------------------使用PDO方式连接数据库文件- ...

  4. 一次完整的HTTP请求所经历的7个步骤(转)

    HTTP通信机制是在一次完整的HTTP通信过程中,Web浏览器与Web服务器之间将完成下列7个步骤: 1. 建立TCP连接 在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该 ...

  5. 标记偏置 隐马尔科夫 最大熵马尔科夫 HMM MEMM

    隐马尔科夫模型(HMM): 图1. 隐马尔科夫模型 隐马尔科夫模型的缺点: 1.HMM仅仅依赖于每个状态和它相应的观察对象: 序列标注问题不仅和单个词相关,并且和观察序列的长度,单词的上下文,等等相关 ...

  6. #IOS-navigation中左滑pop的三种方法

    IOS-navigation中左滑pop的三种方法 系统自带pop方法 如果我们没有对navigation中的back按钮进行自定义,我们可以直接使用系统自带的左滑pop方法.但是如果我们对back按 ...

  7. 我开启httpd服务的时候 显示Could not reliably determine the server`s fully qualified domain name,

    vi /etc/httpd/conf/httpd.conf加入一句 ServerName localhost:80

  8. iOS 集合的深复制与浅复制

    概念 对象拷贝有两种方式:浅复制和深复制.顾名思义,浅复制,并不拷贝对象本身,仅仅是拷贝指向对象的指针:深复制是直接拷贝整个对象内存到另一块内存中. 一图以蔽之 再简单些说:浅复制就是指针拷贝:深复制 ...

  9. Eclipse 每行 80 字符限制的提示线

    有时候希望eclipse和C++编辑器之类有条对齐线 打开 Eclipse, Windows -> Prefereces -> General -> Editors -> Te ...

  10. htmlentities() 函数

    Definition and Usage定义和用法 The htmlentities() function converts characters to HTML entities.htmlentit ...