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. NOI Linux下Emacs && gdb调试方法

    1. 首先要配置emacs文件: (global-linum-mode t) (show-paren-mode t) (global-set-key (kbd "C-s") 'sa ...

  2. Spark安装和简单示例

    spark的安装 先到官网下载安装包 注意第二项要选择和自己hadoop版本相匹配的spark版本,然后在第4项点击下载.若无图形界面,可用windows系统下载完成后传送到centos中. 本例中安 ...

  3. bzoj2501

    题解: 显然,每当进入一个小的边界,那么我们的ans+1,出去一个大的边界,ans-1 然后,我们将每一个边界排序,时间小的在前,大的在后 每一次进来一个,如果是左边的边界,+1,右边的-1 然后输出 ...

  4. C++11_新语法

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本节主要介绍C++的新特性,对于C++的基础语法不再讲解.由于编译器的不同.在某些地方可能有些差异,但是无太大影响. 讲解本节知识之前先确认你的C ...

  5. shell脚本实例一

    一. 什么是shell 脚本时一种解释性语言: shell脚本保存执行动作: 脚本判定命令的执行条件 脚本来实现动作的批量执行.二.如何创建 vim  test.sh     ##shell脚本一般都 ...

  6. zookeeper的c API 单线程与多线程问题 cli_st和cli_mt

    同样的程序,在centos和ubuntu上都没有问题,在solaris上问题却多多,据说是solaris管理更加严格. zookeeper_init方法,在传入一个错误的host也能初始化出一个非空的 ...

  7. Unity3D内存优化案例讲解

    笔者介绍:姜雪伟,IT公司技术合伙人,IT高级讲师,CSDN社区专家,特邀编辑,畅销书作者,已出版书籍:<手把手教你架构3D游戏引擎>电子工业出版社和<Unity3D实战核心技术详解 ...

  8. iOS开发之解决WebView自适应内容高度

    这段时间写的项目中,有涉及到根据后端上传的表单内容,然后在移动端将内容排版重新展示的功能点,所以小小的写一下解决办法. 首先如果直接进行内容展示,或者进行sizeToFit的操作,那么可能会造成图片超 ...

  9. sqlserver获取代理服务作业job的执行情况

    以下脚本为获取sqlserver的执行job with testtemp as( SELECT sch.job_id,--his.[server] as InstanceName CONVERT(nv ...

  10. HihoCoder 1055 : 刷油漆 树形DP第一题（对象 点）

    刷油漆 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 上回说到,小Ho有着一棵灰常好玩的树玩具!这棵树玩具是由N个小球和N-1根木棍拼凑而成,这N个小球都被小Ho标上了 ...