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. Java设计模式：工厂模式

    问题提出 Java的工厂模式与现实生活中的工厂的模型是很相似的.工厂是用来做什么?当然是用来生成产品.因此在Java的工厂模式的关键点就是如何描述好产品和工厂这2个角色之间的关系. 下面来仔细描述一下 ...

  2. GitHub上非常受开发者欢迎的iOS开源项目（二）

    "每一次的改变总意味着新的开始."这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x ...

  3. 火车站点城市查询（appserv 服务器练习）

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. JS 实现banner图的滚动和选择效果

    CSS+JS实现banner图滚动和点击切换 HTML 部分代码: <body> <div id="banner"> <div id="in ...

  5. EMMC与RAND的区别

    作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. EMMC与RAND的区别 说到两者的区别,必须从flash的发展历程说起,因 ...

  6. PHP获取Post的原始数据方法小结(POST无变量名)

    From : http://blog.csdn.net/hotdigger/article/details/6456240   一般我们都用$_POST或$_REQUEST两个预定义变量来接收POST ...

  7. Markdown - 语法简介

    标题 在文字里书写不同数量的“#”可以完成不同的标题,如下: # 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 列表 无序列表的使用,在 ...

  8. Failed to read artifact descriptor for xxx:jar 的Maven项目jar包依赖配置的问题解决

    在开发的过程中,尤其是新手,我们经常遇到Maven下载依赖jar包的问题,也就是遇到“Failed to read artifact descriptor for xxx:jar”的错误. 对于这种非 ...

  9. sublime Text2 快捷键精华版

      Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+Shift+W:关闭所有打开文件Ctrl+Shift+V:粘贴 ...

  10. hdu2089 不要62 我的第一个数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 数位DP的入门题,我是根据kuangbin的博客写出来的 思路: dp[i][0],表示长度为i ...