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. Linux下记录所有用户的登录和操作日志

    Linux下记录所有用户的登录和操作日志   一般我们可以用history命令来查看用户的操作记录,但是这个命令不能记录是哪个用户登录操作的,也不能记录详细的操作时间,且不完整:所以误操作而造成重要的 ...

  2. iptables（五）iptables匹配条件总结之二（常用扩展模块）

    iprange扩展模块 之前我们已经总结过,在不使用任何扩展模块的情况下,使用-s选项或者-d选项即可匹配报文的源地址与目标地址,而且在指定IP地址时,可以同时指定多个IP地址,每个IP用" ...

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

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

  4. poj1698

    题解: 网络流 然后似乎反着做块? 代码: #include<cstdio> #include<cstring> #include<algorithm> #incl ...

  5. Java类的finalize()方法

    Java的Object类提供了一个finalize()方法,签名如下: protected void finalize() throws Throwable { } 该方法在JVM进行垃圾回收时之行, ...

  6. C++面向对象高级编程(六)转换函数与non-explicit one argument ctor

    技术在于交流.沟通,转载请注明出处并保持作品的完整性. 1.conversion function 转换函数 //1.转换函数 //conversion function //只要你认为合理 你可以任 ...

  7. vue.js 源代码学习笔记 ----- instance event

    /* @flow */ import { updateListeners } from '../vdom/helpers/index' import { toArray, tip, hyphenate ...

  8. EasyPlayer RTSP Android安卓播放器修复播放画面卡在第一帧bug

    本文转自EasyDarwin团队成员John的博客:http://blog.csdn.net/jyt0551/article/details/75717097 最近发现某些手机在运行EasyPlaye ...

  9. CSS样式让元素填充剩余部分为自己的高度或宽度

    #nav {     background-color: #85d989;     width: 100%;     height: 50px; } #content {     background ...

  10. boost split字符串

    boost split string , which is very convenience #include <string> #include <iostream> #in ...