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. C++ 编译报错discards qualifiers [-fpermissive]

    声明了一个类 class Card { public: Card(const string&); int m_value; char m_suit; private: const static ...

  2. IT职场经纬 |阿里web前端面试考题，你能答出来几个？

    有很多小伙伴们特别关心面试Web前端开发工程师时,面试官都会问哪些问题.今天小卓把收集来的"阿里Web前端开发面试题"整理贴出来分享给大家伙看看,赶紧收藏起来做准备吧~~ 一.CS ...

  3. 【2017-04-24】winform基础、登录窗口、窗口属性

    一.winform基础  客户端应用程序:C/S 客户端应用程序可以操作用户电脑中的文件,代码要在用户电脑上执行,吃用户电脑配置. 窗体是由控件和属性做出来的 控件:窗体里所放的东西."视图 ...

  4. sed命令详解-应用篇

    本篇从实用的角度讲解sed,关于sed的详细帮助文档,请参考前篇 http://www.cnblogs.com/the-capricornus/p/5279979.html 本篇用到的选项请参考前篇. ...

  5. C#是否该支持“try/catch/else”语法

    以前用过一段时间Python,里面有个try/catch/else语法,我觉得挺好用,这个语法形如下: try: print('try...') r = 10 / int('2') print('re ...

  6. typedef和define的详细区别

    typedef是一种在计算机编程语言中用来声明自定义数据类型,配合各种原有数据类型来达到简化编程的目的的类型定义关键字. #define是预处理指令.下面让我们一起来看. typedef是C语言语句, ...

  7. VS2017使用 SQL Localdb问题两则

    VS2017使用 SQL  Localdb问题两则 来博客园不算短了,总是索取者.最近使用VS2017,遇到一些问题,在解决时总是找不到拿来就能用的解决方案,在多方寻找,自行探索下,总算圆满解决,在这 ...

  8. GBDT与LR融合提升广告点击率预估模型

    1GBDT和LR融合      LR模型是线性的,处理能力有限,所以要想处理大规模问题,需要大量人力进行特征工程,组合相似的特征,例如user和Ad维度的特征进行组合.      GDBT天然适合做特 ...

  9. ueditor 文件上传的分析和总结

    正式开始之前,先写两个常用又容易被我忘掉的文件和流相互转化的方法. 1,文件转流 FileStream fs = new FileStream(filename,FileMode.Open,FileA ...

  10. OC中的copy

    copy的概念 Copy的字面意思是"复制"."拷贝",是一个产生副本的过程 对象拷贝的目的:要使用某个对象的数据,但是在修改对象的时候不影响原来的对象内容,常 ...