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　　　　　　 如果存在（不存在）就删除（添加）一个类。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <input id="i1" type="button" value="开关"/>
  14.         <a class="c1 hide">fdasfdasdfasfsafasdfasfdasfas</a>
  15.     <script src="jquery-1.12.4.js"></script>
  16.     <script>
  17.         $('#i1').click(function () {
  18. //            if ($('.c1').hasClass('hide')) {
  19. //                $('.c1').removeClass('hide');
  20. //            } else {
  21. //                $('.c1').addClass('hide');
  22. //            }
  23.             //以下代码等同于上面的注释代码
  24.             $('.c1').toggleClass('hide')
  25.         })
  26.  
  27.     </script>
  28. </body>
  29. </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 获取索引位置　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .hide{
  8.             display: none;
  9.         }
  10.         .menu{
  11.             height: 38px;
  12.             background-color: #eeeeee;
  13.             line-height: 38px;
  14.         }
  15.         .active{
  16.             background-color: brown;
  17.         }
  18.         .menu .menu-item{
  19.             float: left;
  20.             border-right: 1px solid red;
  21.             padding: 0 5px;
  22.             cursor: pointer; //鼠标变为小手
  23.         }
  24.         .content{
  25.             min-height: 100px;
  26.             border: 1px solid #eeeeee;
  27.         }
  28.     </style>
  29. </head>
  30. <body>
  31.  
  32.     <div style="width: 700px;margin:0 auto">
  33.  
  34.         <div class="menu">
  35.             <div  class="menu-item active" a="1">菜单一</div>
  36.             <div  class="menu-item" a="2">菜单二</div>
  37.             <div  class="menu-item" a="3">菜单三</div>
  38.         </div>
  39.         <div class="content">
  40.             <div b="1">内容一</div>
  41.             <div class="hide"  b="2">内容二</div>
  42.             <div class="hide" b="3">内容三</div>
  43.         </div>
  44.     </div>
  45.     <script src="jquery-1.12.4.js"></script>
  46.     <script>
  47.         $('.menu-item').click(function () {
  48.             //菜单一二三的切换
  49.             $(this).addClass('active').siblings().removeClass('active');
  50.             //内容一二三对应的显示
  51.             var target = $(this).attr('a');
  52.             //属性方法
  53.             //$(".content").children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide')
  54.             //索引方法
  55.             $(".content").children().eq($(this).index()).removeClass('hide').siblings().addClass('hide')
  56.         })
  57.     </script>
  58. </body>
  59. </html>

　　　　　　

4、文档处理：

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

5、css处理：

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container{
  8.             padding: 50px;
  9.             border: 1px solid #dddddd;
  10.         }
  11.         .item{
  12.             position: relative;
  13.             width: 30px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="container">
  19.         <div class="item">
  20.             <span>赞</span>
  21.         </div>
  22.     </div>
  23.     <div class="container">
  24.         <div class="item">
  25.             <span>赞</span>
  26.         </div>
  27.     </div>
  28.     <div class="container">
  29.         <div class="item">
  30.             <span>赞</span>
  31.         </div>
  32.     </div>
  33.     <div class="container">
  34.         <div class="item">
  35.             <span>赞</span>
  36.         </div>
  37.     </div>
  38.     <script src="jquery-1.12.4.js"></script>
  39.     <script>
  40.         $('.item').click(function () {
  41.             AddFavor(this);
  42.         });
  43.         function AddFavor(self) {
  44.             //DOM对象
  45.             var fontSize = 15;
  46.             var top = 0;
  47.             var right = 0;
  48.             var opacity = 1;
  49.             var tag = document.createElement('span');
  50.             $(tag).text('+1');
  51.             $(tag).css('color','red');
  52.             $(tag).css('position','absolute');
  53.             $(tag).css('fontSize',fontSize + 'px');
  54.             $(tag).css('right',right + 'px');
  55.             $(tag).css('top', top + 'px');
  56.             $(tag).css('opacity', opacity);
  57.             $(self).append(tag);
  58.  
  59.             var obj = setInterval(function () {
  60.                 fontSize = fontSize + 10;
  61.                 top = top - 10;
  62.                 right = top - 10;
  63.                 opacity = opacity - 0.1;
  64.                 $(tag).css('fontSize',fontSize + 'px');
  65.                 $(tag).css('right',right + 'px');
  66.                 $(tag).css('top', top + 'px');
  67.                 $(tag).css('opacity', opacity);
  68.                 if(opacity < 0){
  69.                     clearInterval(obj);
  70.                     $(tag).remove()
  71.                 }
  72.             },50)
  73.  
  74.         }
  75.     </script>
  76. </body>
  77. </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. UVa1628 UVaLive5847 Pizza Delivery

    填坑系列(p.302) 既然不知道后面还要卖多少个就加一维状态嘛.. lrj写的O(n)转移?其实转移可以O(1) 貌似按x排序有奇效? #include<cstdio> #include ...

  2. 来看看Github上流行的编码规范

      Popular Coding Convention on Github是一个有趣的网站,它根据Github的代码提交情况分析了几种语言流行的代码规范,目前支持对JavaScript,Java,Py ...

  3. Bluetooth 4.0之Android 解说

     Android平台包括了对蓝牙网络协议栈的支持,它同意一个蓝牙设备跟其它的蓝牙设备进行无线的数据交换.应用程序通过Android蓝牙API提供訪问蓝牙的功能. 这些API会把应用程序无线连接到其 ...

  4. iOS-设置状态栏白色以及覆盖状态栏

    iOS-设置状态栏白色以及覆盖状态栏 将状态栏设置为白色 首先, 在info.plist中添加一个标记. View controller–based status bar appearance键值设置 ...

  5. linux 上查找pid，筛选出来

    ps -ef | grep httpd find / -name "1000sql.txt" 查找命令

  6. react native mac install

    Mac上使用react native tips: 1. 安装Homebrew ruby -e "$(curl -fsSL https://raw.githubusercontent.com/ ...

  7. 简单回顾C++中的字符串

    C++中有两种字符串形式,一种是C语言字符数组,一般可以使用 char*指针来操作它:另一种是C++中基于标准库的string类型,这算是更高层次的抽象数据类型. 主要讨论一下string类型,既然是 ...

  8. css 权威指南笔记（二）元素

    替换元素 用来替换元素内容的部分并非有文档内容直接表示. img input 非替换元素 其内容由用户代理(通常是一个浏览器)在元素本身生成的框中显示. 块级元素 块级元素生成一个 元素框,(默认)会 ...

  9. C# 父类的属性赋值给子类的方法

    遍历父类的属性赋值给子类的方法: private static ChildClass AutoCopy(ParentClass parent) { ChildClass child = new Chi ...

  10. 第一章 Android体系与系统架构

    1. Dalvik 和 ART(Android Runtime) 在Dalvik中应用好比是一辆可折叠的自行车,平时是折叠的,只有骑的时候,才需要组装起来用.在ART中应用好比是一辆组装好了的自行车, ...