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. Ubuntu中文本地化后字体改变

    ubuntu中文本地化后会安装2个字体 fonts-arphic-ukai fonts-arphic-uming 找到这两个字体删除之.. sudo apt- get remove fonts-arp ...

  2. Linux - 进程间通信 - 匿名管道

    一.概念:进程间通信( IPC,InterProcess Communication) 每个进程各自有不同的用户地址空间,任何一个进程的全局变量在另一个进程中都看不到,所以进城之间要交换数据必须通过内 ...

  3. Linux密码保护

    在之前写了Linux密码破解的方法,虽然这样对于忘记密码时很方便,但同时别人也可以很轻易的破解你的Liunx虚拟机,安全问题存在隐患. 下面给出一些Liunx密码的安全防护操作: 1.防止破解root ...

  4. 搭建自己的Git服务器

    前言: GitHub是一个免费托管开源代码的远程仓库,使用起来即方便又安全,但在国内有时访问巨慢,原因你懂得.还有一些公司和个人视源码如生命,既不想开源代码又不想给Github交保护费.这时搭建一个自 ...

  5. 蓝桥杯-奇怪的分式-java

    /* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...

  6. 图论算法-Dijkstra

    原理 Dijkstra是一个神奇的最短路径算法,它的优点在于它可以稳定的时间内求出一张图从某点到另一点的距离.它的工作原理非常简单,思路类似于广搜.在搜索前,将每个点的颜色设为白色,第一次将源点Ins ...

  7. Could not find a valid gem 'compass' (>= 0) in any repository compass安装失败解决方案

    安装完成ruby gem 之后,通过 gem install compass 安装compass~~ 出现如下报错 Could not find a valid gem 'compass' (> ...

  8. LNMP源码编译安装

    思路:根据Linux系统以及公司网站系统的信息,选择合适的安装包进行安装 一.查看系统信息 # uname -a                        # 查看内核/操作系统/CPU信息 # ...

  9. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  10. 设计模式浅谈----策略模式（c#及java实现）

    一.何为策略模式 策略模式是行为型模式的一种,主要用于需要使用不同的算法来处理不同的数据对象时使用,是一种可以在运行时选择算法的设计模式.也称为政策模式. 主要解决:在有多种算法相似的情况下,使用 i ...