8.29 jQuery

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的更多相关文章

50 个最棒的 jQuery 日历插件，很齐全了！(转)
http://www.php100.com/html/it/qianduan/2015/0326/8856.html 什么介绍都没有,直接上酸菜! 1. Even Touch Calendar 2. ...
JQuery插件之图片轮播插件–slideBox
来源:http://www.ido321.com/852.html 今天偶然发现了一个比较好用的图片轮播插件—slideBox 先看看效果:http://slidebox.sinaapp.com/ 代 ...
jQuery慢慢啃之工具（十）
1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: ...
33个好用的图片轮显 jquery图片轮显
原文发布时间为:2011-05-28 -- 来源于本人的百度文章 [由搬家工具导入] 我个人还是喜欢 jquery.recycle，比较通用。因为由美工设计好的轮显结构，如果套用下面，就感觉不是很方便 ...
jQuery 第五章实例方法详解内置队列queue() dequeue() 方法
.queue() .dequeue() .clearQueue() ------------------------------------------------------------------ ...
jQuery 第五章实例方法事件
.on() .one() .off() .trigger() .click / keydown / mouseenter ... .hover() ----------------------- ...
JSON和JS对象之间的互转
1. jQuery插件支持的转换方式 $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2. 浏览器支持的 ...
javascript零散要点收集
1.this永远指向函数对象的所有者 2.ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 3.pr ...
java笔试题13-11-21
中xxx科技公司java笔试题今天去参加一个公司的面试,去先做了一份笔试题,妈的,太他妈难了(对于我来说,最后做完一个员工说你是不是投错简历了,都是空白,我说我做的大部分都对了..最后面试都没有,就 ...

随机推荐

arcview、arcinfo、arceditor的区别
arcview = 交互式制图+地图设计和输出+基于地图的查询+直接读取数据+地理处理框架+定制应用程序框架 arceditor = arcview + geodatabase定义.管理和编辑 arc ...
给你的 Golang 程序添加 GUI （使用 Electron ）
https://studygolang.com/articles/12065?fr=sidebar https://www.jianshu.com/p/a3be0d206d4c 另一种思路推荐方式 ...
python的初始化运行了哪些？
下面的3个print一个是在模块下面,一个是函数里面,一个是类名下面(不在方法里面) 1. 运行这段代码可以发现第3行和11行可以打印出来.第7行没有打印出来.所以可以放心,函数或者方法里面就算有错误 ...
Dubbo -- 系统学习笔记 -- 示例 -- 静态服务
Dubbo -- 系统学习笔记 -- 目录示例想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式静态服务有时候希望人工管理服务提供者的上线和下线,此时需将注册中心标识为非动态管 ...
mysql强制使用索引
在公司后台某模块功能记录日志中有一个搜索功能,通过前段时间的产品使用时间区间进行搜索反馈有些卡顿,我发现这个搜索功能比较慢,要3秒左右才能出来,就决定对这里做一下优化. 通过分析代码和SQL发现最核心 ...
Flickr Hosts
Test Page: http://www.flickr.com/help/test Hosts: 77.238.160.184 farm6.staticflickr.com 98.139.21.45 ...
linux 停止对某个端口的监听
1.通过"netstat -anp" 来查看哪些端口被打开. 2.关掉对应的应用程序,则端口就自然关闭了,如:"kill -9 PID" (PID:进程号)
系统日志：/var/log/messages
/var/log/messages 存放的是系统的日志信息,它记录了各种事件,基本上什么应用都能往里写日志,在做故障诊断时可以首先查看该文件内容 [root@mirh5_center1_111.231 ...
[OSX] 在 OS X 中安装 MacPorts 指南
什么是MacPorts? MacPorts是使用于Mac OS中第三方包管理工具. MacPorts让你可以轻松编译.安装和管理开源软件.MacPorts可以分为两个核心部分:MacPort base ...
N76E003之WDT（看门狗定时器）
N76E003提供一个看门狗定时器(WDT),它可以配置成一个超时复位定时器用于复位整个设备.一旦由于外界干扰设备进入非正常状态或挂起,看门狗可以复位恢复系统.这有用于监测系统运行以提高系统可靠性.对 ...

8.29 jQuery

8.29 jQuery的更多相关文章

随机推荐

热门专题