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运维开发之第十七天的更多相关文章

来不及说什么了，Python 运维开发剁手价仅剩最后 2 天
51reboot 运维开发又双叒叕的搞活动了—— Python 运维开发 18 天训练营课程, 剁手价1299 最后2天上课方式:网络直播/面授(仅限北京) DAY1 - DAY4 Python3 ...
重磅|0元学 Python运维开发，别再错过了
51reboot 运维开发又双叒叕的搞活动了,鉴于之前 51reboot 的活动反馈,每次活动结束后(或者已经结束了很长时间)还有人在问活动的事情.这一次小编先声明一下真的不想在此次活动结束后再听到类 ...
python bottle框架（WEB开发、运维开发）教程
教程目录一:python基础(略,基础还是自己看书学吧) 二:bottle基础 python bottle web框架简介 python bottle 框架环境安装 python bottle 框架 ...
Python 开发个人微信号在运维开发中的使用
一.主题:Python 开发个人微信号在运维开发中的使用二.内容: 企业公众号介绍开发微信公众号的后台逻辑,包括服务器验证逻辑.用户认证逻辑个人微信号面对企业微信的种种限制,可以使用 Itch ...
DEVOPS 运维开发系列
DEVOPS 运维开发系列四:ITIL事态管理流程.事态监控系统设计以及基于Devops的效率提升实践 - watermelonbig的专栏 - CSDN博客https://blog.csdn.net ...
Python运维开发基础10-函数基础【转】
一,函数的非固定参数 1.1 默认参数在定义形参的时候,提前给形参赋一个固定的值. #代码演示: def test(x,y=2): #形参里有一个默认参数 print (x) print (y) t ...
Python运维开发基础09-函数基础【转】
上节作业回顾 #!/usr/bin/env python3 # -*- coding:utf-8 -*- # author:Mr.chen # 实现简单的shell命令sed的替换功能 import ...
Python运维开发基础08-文件基础【转】
一,文件的其他打开模式 "+"表示可以同时读写某个文件: r+,可读写文件(可读:可写:可追加) w+,写读(不常用) a+,同a(不常用 "U"表示在读取时, ...
Python运维开发基础07-文件基础【转】
一,文件的基础操作对文件操作的流程 [x] :打开文件,得到文件句柄并赋值给一个变量 [x] :通过句柄对文件进行操作 [x] :关闭文件创建初始操作模板文件 [root@localhost sc ...

随机推荐

不同车型不同起步价不同费用的问题（switch语句）
#include "stdio.h" #include "math.h" main() { int a; float meet,b; printf(" ...
Tomcat配置多个端口号或多个应用
一.在Tomcat下配置一个应用服务(service)中,配置多个端口号. 即一个service配置多个端口,项目可以通过多个端口访问. 修改tomcat-home\conf下的server.xml, ...
MySQL基础 (DML)
DML语句 DML操作是指对数据库中表记录的操作,主要包括表记录的插入(insert).更新(update).删除(delete)和查询(select) 1.插入记录插入一条 ...
阿里云 centos 部署javaweb 应用
今天在阿里云上部署了个javaweb应用,在此记录下步骤,以供下次使用. 服务器版本: 1.root登陆服务器 2.服务器安装FTP服务,或者直接使用winscp上传文件(简单),本文介绍安装FTP服 ...
[React + webpack] hjs-webpack
You can easily spend hours configuring the perfect dev environment with all the latest hotness like ...
Thread Runnable 多线程
1. 实现多线程的两种方法 a) 让这个类继承java.lang.Thread,然后重写run方法 b) 让这个类实现 java.lang.Runnable接口,实现r ...
android开发之Notification学习笔记
今天总结了一下Notification的使用,与大家分享一下. MainActivity.java: 本文参考:http://www.jb51.net/article/36567.htm,http:/ ...
Objective-C：KVO
@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...
laravel扩展包开发步骤总结
1. 创建包 php artisan workbench vendor/package --resources 注: vendor:开发商名 package:包名 2.修改下包里co ...
使用js使表单自动提交
function sub(){ document.yeepay.submit(); } setTimeout(sub,1000);//以毫秒为单位的.1000代表一秒钟.根据你需要修改这个时间. // ...

jQuery运维开发之第十七天

JQuery

一、查找元素

1、id

2、class

3、标签

4、组合

5、层级

6、基本筛选器

7、属性

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

9、筛选

二、操作元素

1、文本操作：

2、样式操作：

3、属性操作：

4、文档处理：

5、css处理：

6、位置：

7、事件

8、jQuery扩展：

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

随机推荐

热门专题

5、层级　

9、筛选　　

1、文本操作：　　

7、事件　　