2018-8-29 13:22:26

jQuery :　　http://www.cnblogs.com/liwenzhou/p/8178806.html

都快开学了!我得在家渡劫!

今天下午去俺弟家玩去,明天回来,

前端快看完了 争取这星期结束前端!r然后复习python

下星期Django!!Django还是很好玩的!!

2018-8-29 13:38:15

越努力&越幸运!

day55 2018-03-15

1. 内容回顾

    1. jQuery

        1. 选择器  $("")

            1. 基本选择器

                1. ID       --> $("#d1")

                2. 标签名   --> $("p")

                3. class名  --> $(".C1")

                4. 通用的   --> $("*")

                5. 组合     --> $(".c1,div,a")

            2. 层级选择器

                1. 子子孙孙   --> $("x y")

                2. 儿子选择器 --> $("x>y")

                3. 弟弟选择器 --> $("x~y")

                4. 毗邻选择器 --> $("label+input")

        2. 筛选器

            1. 基本筛选器

                1. :first

                2. :last

                3. :eq()   --> 从0开始

                4. :even   --> 偶数

                5. :odd    --> 奇数

                6. :gt

                7. :lt

                8. :not    --> $("div:not(.c1)")

                9. :has    --> $("div:has(.c1)")

            2. 属性选择器

                1. $("[title]")

                2. $("[type='text']")

                3. $("[type!='text']")

            3. 表单选择器

                1. $(":checkbox")   -->   $("input[type='checkbox']")

                2. $(":text")

                ...

            4. 表单对象

                1. $(":disabled")   --> 找到不可用的标签

                ...

            5. 筛选器方法(只是应用场景和上面的基本筛选器不同而已)

                1. $("div").first()

                2. ...

            6. 常用的方法

                1. .next()     --> 找到挨着我的下一个同级标签

                2. .nextAll()  --> 下边同级的所有

                3. .nextUntil()--> 往下找,直到找到终止条件为止

                4. .prev()

                5. .prevAll()

                6. .prevUntil()

                7. .siblings()  --> 找所有的兄弟(前面的后面的都能找到)

                8. .children()

                9. .parent()

                10. .parents()

                11. .parentsUntil()

                12. .find(各种条件都可以写)

        3. 样式操作

            1. 操作class类

                1. .addClass()

                2. .removeClass()

                3. .hasClass()

                4. .toggleClass()

2. 今日面试题

    1. 问: 字符串格式化:%和format 有什么区别?

    https://www.cnblogs.com/liwenzhou/p/8570701.html

    Python新版本推荐使用format.

    Python2.6 新加入的format语法支持.

    3.6加入了一个 f-strings新特性

3. 今日内容 (http://www.bootcdn.cn/)  PyCon  meetingup (关注一下时事热点技术)

    1. 修改样式

        1. 操作class类

            自定义模态框弹出和隐藏

        2. 直接修改样式

            1. 原生DOM  .style.color="green"

            2. $("div").css("color", "green")

            3. 修改多个样式时,传入键值对!!!

        3. 位置

            1. offset

            2. position   --> 获取相对父标签的偏移位置

            3. scrollTop()// 获取匹配元素相对滚动条顶部的偏移

            4. scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

            返回顶部示例

        4. 大小

            1. height()

            2. width()

            3. innerHeight()

            4. innerWidth()

            5. outerHeight()

            6. outerWidth()

            注意:outerHeight()和outerWidth()取得是内容+padding+border

    2. 文档操作

        1. 操作HTML

            .html()    --> 类似于 innerHTML

        2. 操作text

            .text()    --> 类似于 innerText

        3. 值

            1. val()// 取得第一个匹配元素的当前值

            2. val(val)// 设置所有匹配元素的值

    3. 属性操作

        1. attr()

            1. attr(attrName)// 返回第一个匹配元素的属性值

            2. attr(attrName, attrValue)// 为所有匹配元素设置一个属性值

            3. attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值

            4. removeAttr()// 从每一个匹配的元素中删除一个属性

        2. prop()   --> checkbox和radio用这个

4. 作业

    1全选反选取消
        

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>文档操作</title>

    <style>

        .error {

            color: red;

        }

    </style>

</head>

<body>

<div id="d1">

    <p><span>span</span></p>

    <div>div</div>

</div>

<form id="f1">

        <p>

            <label>用户名:

                <input class="need" name="username" type="text">

                <span class="error"></span>

            </label>

        </p>

        <p>

            <label>密码:

                <input class="need" name="password" type="password">

                <span class="error"></span>

            </label>

        </p>

        <p>爱好:

            <label>篮球

                <input name="hobby" value="basketball" type="checkbox">

            </label>

            <label>足球

                <input name="hobby" value="football" type="checkbox">

            </label>

            <label>双色球

                <input name="hobby" value="doublecolorball" type="checkbox">

            </label>

        </p>

    <p>性别:

            <label>男

                <input name="gender" value="" type="radio">

            </label>

            <label>女

                <input name="gender" value="" type="radio">

            </label>

            <label>保密

                <input name="gender" value="" type="radio">

            </label>

        </p>

    <p>

        <label for="s1">从哪儿来:</label>

        <select name="from" id="s1">

            <option value="">北京</option>

            <option value="">上海</option>

            <option value="">广州</option>

        </select>

    </p>

      <p>

        <label for="s2">从哪儿来:</label>

        <select name="from" id="s2" multiple>

            <option value="">北京</option>

            <option value="">上海</option>

            <option value="">广州</option>

            <option value="">深圳</option>

        </select>

    </p>

    <p>

        <label for="t1">个人简介:</label>

        <textarea name="memo" id="t1" cols="" rows="">

        </textarea>

    </p>

        <p>

            <input id="b1" type="submit" value="登录">

            <input id="cancel" type="button" value="取消">

        </p>

    </form>

<script src="jquery-3.2.1.min.js"></script>

<script>

    // 点击登录按钮验证用户名和密码为不为空

    // 为空就在对应的input标签下面显示一个错误提示信息

    // 1. 给登录按钮绑定点击事件

    // 2. 点击事件要做的事儿

    // 2.1 找到input标签--> 取值 --> 判断为不为空 --> .length为不为0

    // 2.2 如果不为空,则什么都不做

    // 2.2 如果为空,要做几件事儿

    // 2.2.1 在当前这个input标签的下面 添加一个新的标签,内容为xx不能为空

    $("#b1").click(function () {

        var $needEles = $(".need");

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

            if ($($needEles[i]).val().trim().length === 0) {

                var labelName = $($needEles[i]).parent().text().trim().slice(0,-1);

                $($needEles[i]).next().text( labelName +"不能为空!");

            }

        }

        return false;

    })

</script>

</body>

</html>
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>属性操作</title>

</head>

<body>

<img src="http://image11.m1905.cn/uploadfile/s2010/0205/20100205083613178.jpg" alt="">

<input type="button" id="b1" value="下一个">

<input checked type="checkbox" id="c1">

<input type="checkbox" id="c2">

<script src="jquery-3.2.1.min.js"></script>

<script>

    var oldURL;

    var newURL = "http://img01.yohoboys.com/contentimg/2017/08/12/21/012a1eab9842a752f8c4d98b8fc2777ad7.jpg"

    $("#b1").click(function () {

        var $imgEles = $("img");

        // 修改img标签的src属性

        oldURL = $imgEles.attr("src");

        $imgEles.attr("src", newURL);

        newURL = oldURL;

    });

</script>

</body>

</html>

8.29 jQuery的更多相关文章

  1. 50 个最棒的 jQuery 日历插件，很齐全了！(转)

    http://www.php100.com/html/it/qianduan/2015/0326/8856.html 什么介绍都没有,直接上酸菜! 1. Even Touch Calendar 2.  ...

  2. JQuery插件之图片轮播插件–slideBox

    来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...

  3. jQuery慢慢啃之工具（十）

    1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: ...

  4. 33个好用的图片轮显 jquery图片轮显

    原文发布时间为:2011-05-28 -- 来源于本人的百度文章 [由搬家工具导入] 我个人还是喜欢 jquery.recycle，比较通用。因为由美工设计好的轮显结构，如果套用下面，就感觉不是很方便 ...

  5. jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

    .queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...

  6. jQuery 第五章 实例方法 事件

    .on() .one() .off() .trigger() .click / keydown / mouseenter ...    .hover() ----------------------- ...

  7. JSON和JS对象之间的互转

    1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2. 浏览器支持的 ...

  8. javascript零散要点收集

    1.this永远指向函数对象的所有者 2.ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 3.pr ...

  9. java笔试题13-11-21

    中xxx科技公司java笔试题 今天去参加一个公司的面试,去先做了一份笔试题,妈的,太他妈难了(对于我来说,最后做完一个员工说你是不是投错简历了,都是空白,我说我做的大部分都对了..最后面试都没有,就 ...

随机推荐

  1. QT QTransform与QMatrix 有啥区别？

    刚开始学习QT,我使用的是QT5.12进行开发,要不时地查阅QT的官方帮助文档~ 仔细阅读QT官方帮助QTransform类以及QMatrix类,发现两个类的作用描述一模一样(“The QTransf ...

  2. HTML5 标准规范完成了

    ​    ​万维网联盟(W3C)昨天宣布,HTML5 标准规范终于最终制定完成了,并已公开发布.对于前端工程师来说,这无疑是一个振奋人心的好消息. ​    ​众所周知,HTML5改变了互联网,将成为 ...

  3. iOS6 中 Smart App Banners介绍和使用（转自COCOACHINA.COM）

    转自:http://www.cocoachina.com/applenews/devnews/2012/0924/4842.html iOS 6新增Smart App Banners,也就是“智能Ap ...

  4. OpenVPN多处理之-多队列TUN多实例

    两年前我以前提到了多个OpenVPN共享一个tun虚拟网卡,旨在降低管理开销和切换开销,由于我讨厌在外面对一大堆网卡做Bridge或者Bonding,除了初衷不同,其实的关于TUN的进展一直没有偏离我 ...

  5. Hibernate_day01讲义_使用Hibernate完成对CRM系统中客户管理的DAO中的CRUD的操作

  6. ZTree id值太大，ZTree没有生成树，ZTree的id值过大

     ZTree id值太大,ZTree没有生成树,ZTree的id值过大 >>>>>>>>>>>>>>>> ...

  7. IIS中采用ISAPI-Rewrite防盗链

    本规则支持白名单排除式防盗链,搜索引擎友好(不屏蔽),被盗链后的错误提示转向,支持各种文件类型,经作者亲验真的能用,第一时间在itmop.com原创发表,请继续往下阅读. 近来小站遇到了盗链问题,至使 ...

  8. Java使用dom4j读取xml时报错：org.dom4j.DocumentException: Error on line 2 of document : Invalid byte 2 of 2-byte UTF-8 sequence. Nested exception: Invalid byte 2 of 2-byte UTF-8 sequence

    1.Java使用dom4j读取xml时报错: org.dom4j.DocumentException: Error on line 2 of document  : Invalid byte 2 of ...

  9. [转]linux下释放文件内存

    在Linux系统下,我们一般不需要去释放内存,因为系统已经将内存管理的很好.但是凡事也有例外,有的时候内存会被缓存占用掉,导致系统使用SWAP空间影响性能,此时就需要执行释放内存(清理缓存)的操作了. ...

  10. HTML 样式

    style 属性用于改变 HTML 元素的样式,常见的样式如下: 定义字体颜色:style="color:red"定义字体大小:style="font-size:20px ...