Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM　　　　

使用jQuery放大字体：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-1.11.1.js"></script>

<!-- 自定义的js必须写在jQuery引入之后 -->

<script>

    function bigger() {

        //获取第1个p的字号(16px)

        var size = $("p:eq(0)").css("font-size");

        //去掉单位px,便于增加字号

        size = size.replace("px","");

        //字号+1,再设置给所有的p

        $("p").css("font-size",++size+"px")

    }

</script>

</head>

<body>

    <input type="button" value="+"

        onclick="bigger();"/>

    <p>jQuery是一个轻量级的js框架</p>

    <p>它提供了简洁的API,极大的简化了js编程</p>

    <p>它主要封装了DOM操作的API</p>

</body>

</html>

使用jQuery，点击图片后放大，缩小

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-1.11.1.js"></script>

<script>

    function prt() {

        var ps = $("p");

        console.log(ps);

        for(var i=0;i<ps.length;i++) {

            console.log(ps[i].innerHTML)

        }

    }

    function chg(img) {

        if($(img).width()==218) {

            //变大

            $(img).width(250).height(250);

        } else {

            //变小

            $(img).width(218).height(218);

        }

    }

</script>

</head>

<body>

    <input type="button" value="打印"

        onclick="prt();"/>

    <p>jQuery对象可以调用jQuery方法</p>

    <p>DOM对象可以调用DOM方法</p>

    <p>jQuery对象本质上是对DOM数组的封装</p>

    <div>

        <img src="../images/01.jpg"

            onclick="chg(this);"/>

        <img src="../images/02.jpg"

            onclick="chg(this);"/>

        <img src="../images/03.jpg"

            onclick="chg(this);"/>

    </div>

</body>

</html>

选择器知识点：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="../js/jquery-1.11.1.js"></script>

<script>

    //页面加载后自动调用此匿名函数.

    //等价于window.onload=function(){}

    $(function(){

        //1.基本选择器

        //和CSS基本选择器一样,略

        //2.层次选择器

        //前2个和CSS派生选择器一样,略

        console.log($("#gz+li"));

        //3.过滤选择器

        //3.1基本过滤(*)

        console.log($("li:first"));

        console.log($("li:lt(2)"));

        console.log($("li:odd"));

        console.log($("li:not(#gz)"));

        //3.2内容过滤

        console.log($("li:contains('京')"));

        //3.3可见性过滤

        console.log($("li:hidden"));

        //3.4属性过滤

        console.log($("li[id]"));

        //3.5状态过滤

        console.log($("input:disabled"));

        console.log($("input:checked"));

        //4.表单选择器

        console.log($(":radio"));

    });

</script>

</head>

<body>

    <ul>

        <li>北京</li>

        <li>上海</li>

        <li id="gz">广州</li>

        <li>深圳</li>

        <li>南京</li>

        <li>天津</li>

        <li style="display:none;">杭州</li>

    </ul>

    <!--

        readonly:只读,但数据依然可以提交到服务器.

        disabled:不可用,数据将无法提交到服务器.

     -->

    <p>

        <input type="text" disabled/>

    </p>

    <p>

        <input type="password"/>

    </p>

    <p>

        <input type="radio" name="sex" checked/>男

        <input type="radio" name="sex"/>女

    </p>

</body>

</html>

jQuery操作DOM知识点：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    .big {

        font-size: 50px;

    }

    .important {

        color: red;

    }

</style>

<script src="../js/jquery-1.11.1.js"></script>

<script>

    $(function(){

        //1.读写节点

        //1)html()==innerHTML

        console.log($("p:first").html());

        $("p:first").html("1.jQuery支持<u>读写</u>节点");

        //2)text()==innerText

        //3)val()==value

        console.log($(":button:first").val());

        $(":button:first").val("BBB");

        //4)attr()==setAttribute()+getAttribute()

        console.log($("img:first").attr("src"));

        $("img:first").attr("src","../images/02.jpg");

        //3.查询某节点的亲戚

        //假设别人传给我如下节点

        var gz = $("#gz");

        var ul = $("ul");

        //假设我处理了该节点,又要处理它的亲戚

        console.log(gz.parent());

        console.log(gz.prev());

        console.log(gz.siblings());

        console.log(ul.find("li:not(li[id])"));

        //4.样式操作

        $("p:first").addClass("big").addClass("important");

        $("p:first").removeClass("big").removeClass("important");

        console.log($("p:first").hasClass("big"));

    });

    //切换样式:

    //判断有没有该样式,有则删除,无则增加

    function chg() {

        $("p:first").toggleClass("important");

    }

    //2.增删节点

    //2.1增加

    function f1() {

        var li = $("<li>杭州</li>");

        $("ul").prepend(li);

    }

    //2.2插入

    function f2() {

        var li = $("<li>南京</li>");

        $("#gz").after(li);

    }

    //2.3删除

    function f3() {

        $("li:last").remove();

    }

</script>

</head>

<body>

    <p>1.jQuery支持<b>读写</b>节点</p>

    <p>2.jQuery支持<b>增删</b>节点</p>

    <p><input type="button" value="AAA"/></p>

    <p><img src="../images/01.jpg"/></p>

    <p>

        <input type="button" value="增加"

            onclick="f1();"/>

        <input type="button" value="插入"

            onclick="f2();"/>

        <input type="button" value="删除"

            onclick="f3();"/>

    </p>

    <ul>

        <li>北京</li>

        <li>上海</li>

        <li id="gz">广州</li>

        <li>深圳</li>

        <li>天津</li>

    </ul>

    <p>

        <input type="button" value="切换"

            onclick="chg();"/>

    </p>

</body>

</html>

广告收起案例：

　　1.点击按钮收起

　　2.自动收起

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    #gg {

        border: 1px solid red;

        height: 300px;

    }

    #gg input {

        float: right;

        margin: 10px;

    }

</style>

<script src="../js/jquery-1.11.1.js"></script>

<script>

    $(function(){

        //给按钮x绑定单击事件

        $("#gg :button").click(function(){

            //让广告区域右下向上收起直到消失

            $("#gg").slideUp(500);

        });

        //页面加载后,延迟3S自动点击按钮x,收起广告

        setTimeout(function(){

            $("#gg :button").trigger("click");

        },3000);

    });

</script>

</head>

<body>

    <div id="gg">

        <input type="button" value="x"/>

    </div>

</body>

</html>

up_image.html

图片显示，隐藏，移动案例

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style>

    #d1 {

        width: 200px;

        height: 200px;

        background-color: red;

        /*动画基于定位*/

        position: relative;

    }

</style>

<script src="../js/jquery-1.11.1.js"></script>

<script>

    function f1() {

        $("#d1").show(3000);

    }

    function f2() {

        //第2个参数是函数,该函数在动画结束时被调用.

        //这样的函数我们称之为回调函数.

        //回调函数:逻辑完成后自动调用的函数.

        $("#d1").hide(3000,function(){

            console.log("OVER");

        });

        //动画底层的实现原理:

        //通过定时器不断的修改元素的样式就是动画.

        //定时器相当于线程,所以动画方法相当于启动

        //了支线程,当前方法f2相当于主线程,二者并发

        //执行.主线程f2启动支线程后不等待,立刻执行

        //下一行代码,而支线程3秒后才执行完成.

        console.log("over");

    }

    $(function(){

        $("#d1").hover(

            function(){

                $(this).animate({"left":"20px"},500);

            },

            function(){

                $(this).animate({"left":"0"},500);

            }

        );

    });

</script>

</head>

<body>

    <p>

        <input type="button" value="显示"

            onclick="f1();"/>

        <input type="button" value="隐藏"

            onclick="f2();"/>

    </p>

    <div id="d1"></div>

</body>

</html>

Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM的更多相关文章

  1. JQuery总结：选择器归纳、DOM遍历和事件处理、DOM完全操作和动画 （转）

    JQuery总结:选择器归纳.DOM遍历和事件处理.DOM完全操作和动画 转至元数据结尾 我们后台可能用到的页面一般都是用jquery取值赋值的,发现一片不错的文章 目录 JQuery总结一:选择器归 ...

  2. Jquery选择器，操作DOM

    刚接触jQuery,她真的是个好东西,操作DOM,修改样式,都很方便,主要获取DOM树的类和子代很方便. 今天用jq做了tab面包屑,不过用的是别人的代码,自己修改的,不错也做出来了,原理也有些明白, ...

  3. jQuery 1.0 | 选择器 | 事件 | 操作样式 | 操作属性

    使用jQuery: 1,下载jQuery http://jquery.com/download/ 2,引入jQuery文件 3,定义入口函数 <script src="jquery-1 ...

  4. 23、jQuery九类选择器/jQuery常用Method-API/jQuery常用Event-API

      1)掌握jQuery九类选择器及应用 2)掌握jQuery常用Method-API 3)掌握jQuery常用Event-API 一)jQuery九类选择器[参见jQueryAPI.chm手册] 目 ...

  5. 第八章 使用jQuery操作DOM

    DOM操作: jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容. 它还让有页面元素真正动起 ...

  6. 一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）

    -->目录导航 一. 初探Jquery 1. 介绍 2. 基础 二. Jquery操作 1. jQuery页面加载 2. 选择器 3. 操作Dom 三. Jquery进阶 1. 隐式迭代与链式编 ...

  7. jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别

    $(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ // 在这里写你的代码 ...

  8. 浅析jQuery(function(){})与(function(){})(jQuery)之间的区别

    本篇文章主要是对jQuery(function(){})与(function(){})(jQuery)之间的区别进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 Jquery是优秀的Javas ...

  9. jQuery(function(){})与(function(){})(jQuery)的区别

    jQuery(function(){ });/$(function(){ });全写为 $(document).ready(function(){}); 意义为在DOM加载完毕后执行了ready()方 ...

  10. Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

    Jquery是优秀的Javascrīpt框架.我们现在来讨论下在 Jquery 中两个页面载入后执行的函数. $(document).ready(function(){ // 在这里写你的代码... ...

随机推荐

  1. JavaScript--跨域

    跨域 什么是跨域? 跨域请求就是不同域的网站之间的文件数据之间的传送 ,由于浏览器的同源策略机制(基于安全,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性)Ajax直接请求普通 ...

  2. shiro的三大功能

    1.提供的功能

  3. C++复习14 构造函数初始化调用顺序

    1.关于构造函数初始化调用顺序的问题. 首先是父类和子类的,首先调用父类的构造函数,然后调用子类的构造函数.但是对于子类中有其他类型的数据成员的时候,会在调用该类的构造函数之前,调用其数据成员的构造函 ...

  4. URAL 1557 Network Attack 图论,连通性,tarjain,dfs建树,分类讨论 难度:2

    http://acm.timus.ru/problem.aspx?space=1&num=1557 1557. Network Attack Time limit: 2.0 secondMem ...

  5. 转载:【Oracle 集群】RAC知识图文详细教程(六)--RAC在LINUX上使用NFS安装前准备

    文章导航 集群概念介绍(一) ORACLE集群概念和原理(二) RAC 工作原理和相关组件(三) 缓存融合技术(四) RAC 特殊问题和实战经验(五) ORACLE 11 G版本2 RAC在LINUX ...

  6. JS之BOM和DOM(来源、方法、内容、应用)

    1.Javascript组成(此文为转载) JavaScript的实现包括以下3个部分: 1)核心(ECMAScript):描述了JS的语法和基本对象. 2)文档对象模型 (DOM):处理网页内容的方 ...

  7. ElasticSearch6.0 索引模板

    我们在做es搜索的场合,每次创建索引的时候,都需要为每个索引设置mapping的字段映射,现在我们可以为通用的索引创建一个模板 每次创建索引时候,如果匹配到相应的模板 索引的mapping会被自动设置 ...

  8. Spring整合hibernate：3、使用XML进行声明式的事务管理

    配置applicationContext.xml文件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2 ...

  9. PostgreSQL基于时间点故障恢复PITR（ point-in-time recovery ）

    PostgreSQL在使用过程中经常会发生一些失误的操作,但往往是可以弥补的.但是如果真遇到了无法挽回的误操作,只能寄希望于有备份了. 接下来的故障恢复也是基于有备份的情况,没有备份的情况,目前还没有 ...

  10. c# 一个记录日志的通用方法

    public static string WriteFile(string strText, string path) { Encoding code = Encoding.GetEncoding(& ...