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. 优化Servlet：（利用反射的思想）

    1.创建BaseServlet (重写父类的service方法) package com.learning.web.servlet; import java.io.IOException; impor ...

  2. 构造函数与普通函数的区别还有关于“new”操作符的一些原理

    有一种创建对象的方法叫做工厂模式,例如: function person(name,age){ var o=new Object(); o.name=name; o.age=age; return o ...

  3. lua 字符串

    lua 字符串 语法 单引号 双引号 "[[字符串]]" 示例程序 local name1 = 'liao1' local name2 = "liao2" lo ...

  4. C#小知识点记录，对象的深拷贝

    在CSDN中的定义是: public static string CompareExchange( ref string location1, string value, string compara ...

  5. Android Gradle manifestPlaceholders 占位符详解

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

  6. 《Effective C#》读书笔记-1.C# 语言习惯-1.使用属性而不是可访问的数据成员

    思维导图: 大纲: 1.使用属性而不是可访问的数据成员    属性        指定不同的访问权限        隐式属性降低了声明属性的工作量        允许将数据成员作为公共接口的一部分暴露 ...

  7. eharts入门篇一

    1.导入文件样式 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本. 2,引入 ECharts 文件  < ...

  8. Java中遍历Map的常用方法

    以下方法适用于任何map实现(HashMap, TreeMap, LinkedHashMap, Hashtable, 等等): 方式一(推荐): // 推荐 // 在for-each循环中使用entr ...

  9. <CentOS7>如何设置hostname

    在CentOS/RHEL 7中,有个叫hostnamectl的命令行工具,它允许你查看或修改与主机名相关的配置: ceph@client-node ~]$ hostnamectlstatus Stat ...

  10. SQL Server中关于基数估计如何计算预估行数的一些探讨

    关于SQL Server 2014中的基数估计,官方文档Optimizing Your Query Plans with the SQL Server 2014 Cardinality Estimat ...