Jquery就是Js集成的一些方法包。

注意：Jquery的引入位置在<head></head>里。

一、选择器

1、Id选择器

$("#div1")

2、Class选择器

$(".div")

用class选择器选出一堆对象给他们附事件，不用像Js一样遍历。直接附加事件，取到的所有对象都会附上事件。

注意：Js中的this,在Jquery中变为$(this)。

3、标签选择器

$("div")

4、并列选择器

用,隔开

$("#div1,#div2")

5、后代选择器

用空格隔开

6、过滤选择器

第一个：$(".div:first")

最后一个：$(".div:last")

任意个：$(".div:eq(索引号)")

$(".div").eq(索引号)

大于：$(".div:gt(索引号)")     取到的是索引号以后的

小于：$(".div:lt(索引号)")     取到的是索引号之前的

排除：$(".div:not(选择器)")     取到的是排除掉选择的剩下的

$(".div:not(.div:eq(2))")  取到的是排除掉第三个剩下的

奇数个：$(".div:odd")   索引奇数个

偶数个：$(".div:even")  索引偶数个，包含0

属性名过滤：$(".div[属性名]")

属性名+值过滤：$(".div[属性名=值]")    $(".div[属性名!=值]")

内容过滤：$(".div:contains('字符串')")

包含子元素：$(".div:has('选择器')")

二、事件：

1、基本事件：

就是把js事件中的on去掉。

2、复合事件

hover(function(){},function(){})

就是把鼠标移入移出事件合在一起了，第一个function里是移入事件，第二个function是移出事件。

toggle(function(){},function(){},....)     需要引Jquery1.7.1版本。

鼠标点击循环执行里面的方法。可以放无数个function

3、未来元素附事件

对象.live("事件名",function(){});

给还没有创建出来的对象附上事件。

4、阻止事件冒泡

在事件function里最后return false;

 

三、Dom操作

（一）操作属性

1、获取属性

var s = $("选择器").attr("属性名")

2、设置属性

$("选择器").attr("属性名","属性值")

3、删除属性

$("选择器").removeAttr("属性名")

（二）操作样式

1、操作内联样式

获取样式

var s = $("选择器").css("样式名")

设置样式

$("选择器").css("样式名","值")

2、操作样式表的class

添加class，相当于并列class。

$("选择器").addClass("class名")

移除class

$("选择器").removeClass("class名")

添加移除交替class

$("选择器").toggleClass("class名")

（三）操作内容

1、表单元素

取值

var s = $("选择器").val()

赋值

$("选择器").val("值")

2、非表单元素

取值

var s = $("选择器").html()        var s = $("选择器").text()

赋值

$("选择器").html("内容")            $("选择器").text("内容")

（四）操作相关元素

1、查找

找父级    parent()

找前辈    parents(选择器)

找子集    children(选择器)

找后代    find(选择器)

找哥哥    prev()          prevAll(选择器)

找弟弟    next()          nextAll(选择器)

2、操作

新建：   $("HTML字符串")

例： $("#div1").append($("<div class='div2'></div>"));

添加：   appen(jquery对象)    ---往内部添加

after(,..)                 ----下部平级添加

before("...")            -----上部平级添加

移除：    empty()    ----清空内部全部元素

remove()   -----移除元素

复制：   clone()

Js创建对象

var d1=document.createElement('div');

d1.setAttribute("class","div2");    //设置class属性

$("#div1").append(d1);     //往div1下面增添。

Jquery创建对象

$("#div1").append($("<div class='div2'></div>"));

四、动画

show(),hide()    显示、隐藏。

slideDown(),slideUp()   下拉显示，上拉隐藏

fadeIn(),fadeOut()  淡入淡出

自定义动画

animate({left:"300px",top:"300px"},3000,function(){回调函数})

停止动画，防止动画积累： .stop()

导航栏制作

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <title></title>

    <style type="text/css">

        .div1 {

            position: relative;

            width: 100px;

            height: 50px;

            background-color: red;

            float: left;

            margin-left: 20px;

        }

        .div2 {

            position: absolute;

            width: %;

            height: 0px;

            top: 50px;

            background-color: green;

        }

    </style>

</head>

<body>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

    <div class="div1">

        <div class="div2"></div>

    </div>

</body>

</html>

<script type="text/javascript">

    $(".div1").mouseover(function () {

        var aaa = $(this).children(".div2:eq(0)");

        aaa.stop().animate({ height: "300px" }, , function () {

            aaa.css("background-color", "blue");

        });

    });

    $(".div1").mouseout(function () {

        var aaa = $(this).children(".div2:eq(0)");

        aaa.stop().animate({ height: "0px" }, , function () {

            aaa.css("background-color", "green");

        });

    });

</script>

动画颜色渐变，需要另引Jquery.color。放在之前引用的Jquery下面。

【2017-06-02】Jquery基础的更多相关文章

  1. 2017/05/02 java 基础 随笔

    1.PrtSc键是截屏键   打开画图软件  ctrl+v就可以复制到 2.win7以上可以  在当前目录下shift+右键 3.junit和javaweb应用的main函数在哪里? java程序跑起 ...

  2. 2017年12月24日 JS跟Jquery基础

    js基础 alert();confirm(); 基础语法:与C#一致数据类型及类型转换var (string,decimal)parseInt()parseFloat();isNaN(); 运算符:数 ...

  3. [06 Go语言基础-包]

    [06 Go语言基础-包] 包 什么是包,为什么使用包? 到目前为止,我们看到的 Go 程序都只有一个文件,文件里包含一个 main 函数和几个其他的函数.在实际中,这种把所有源代码编写在一个文件的方 ...

  4. jQuery基础课程

    环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...

  5. JQuery基础总结上

    最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...

  6. jQuery基础之选择器

    摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...

  7. jquery基础知识汇总

    jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...

  8. 【jQuery基础学习】09 jQuery与前端（这章很水）

    这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...

  9. 【jQuery基础学习】00 序

    作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...

  10. 8、网页制作Dreamweaver（jQuery基础:安装、语法）

    在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...

随机推荐

  1. 浩哥解析MyBatis源码（九）——Type类型模块之类型处理器注册器（TypeHandlerRegistry）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6709157.html 1.回顾 上一篇研究的是类型别名注册器TypeAliasRegist ...

  2. C#变量、常量、枚举、预处理器指令知多少

    一.变量 C#共有其中变量类型有:静态变量.实类变量.数组元素.数值参数.引用参数.输出参数和局部变量 先定义一个简单的类来说明,如下: public class VariableDefine { p ...

  3. git工具使用的简单介绍

    百度百科 写道 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git的读音为/gɪt/. Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大 ...

  4. Azure IoT 技术研究系列3-设备到云、云到设备通信

    上篇博文中我们将模拟设备注册到Azure IoT Hub中:我们得到了设备的唯一标识. Azure IoT 技术研究系列2-设备注册到Azure IoT Hub 本文中我们继续深入研究,设备到云.云到 ...

  5. mysql数据库实操笔记20170419

    一.insert与replace区别: insert:当表里有字段设置了主键或者唯一时,插入重复的唯一或主键字段值是不能执行的: replase:当表里有字段设置了主键或者唯一时,插入重复的唯一或主键 ...

  6. Bitbucket导入项目

    1.先初始化git本地仓库(如果已经受git管理跳过此步) $ git init 2.添加远程仓库 $ git remote add origin git@bitbucket.org:name/rep ...

  7. Android Gradle manifestPlaceholders 占位符详解

    Android Gradle manifestPlaceholders 占位符详解 在实际项目中,AndroidManifest里十几个地方的值是需要动态的改变(生成apk文件的时候).如果每次去改也 ...

  8. 我喜欢的程序语言c++

    我喜欢的程序语言c++我喜欢的程序语言c++

  9. [进程通信] Linux进程间通信（IPC）

    简介 linux下进程间通信的几种主要手段: 1.      管道(Pipe)及有名管道(named pipe):管道可用于具有亲缘关系进程间的通信,有名管道克服了管道没有名字的限制,因此,除具有管道 ...

  10. Composer 常用命令总结（三）

    init(初始化) 该命令用于创建 composer.json 文件,并进行基础信息配置: $ composer init 可以配置Package name.Description.Author.Mi ...