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. 好用的图片缩放JS

    <!DOCTYPE HTML> <meta charset="UTF-8"> <head> <script src="jquer ...

  2. eclipse debug Liunx服务器上的svn项目

    1.本地项目提交到svn上,以保证本地代码与服务器代码相同 2.开启服务器debug端口 3.使用root账号重新部署服务器项目并监听catalina.out sh /home/p/deploy/gt ...

  3. NetBpm 安装篇（1）

    尊重别人劳动成果 转载注明出处:http://www.cnblogs.com/anbylau2130/p/3875718.html 官方主页 http://www.netbpm.org/docs/in ...

  4. LHC大神问的矩阵转置问题

    数学中线性代数中提到的矩阵转置,其实在我们的业务场景中也有需要的地方,比如LHC大神问到的这个问题 那么如何进行行列转换呢? 代码如下: <?php $array=array( '部门1'=&g ...

  5. OpenGL 知识二

    OpenGL综述 September 14, 2014 学习OpenGL是学习计算机图形学的一个工具,因为计算机上图形的显示要依靠底层的软件和硬件,学习图形学除了学习基本的概念,线,曲面,图形生成,变 ...

  6. SELECT中常用的子查询操作

    MySQL中的子查询 是在MySQL中经常使用到的一个操作,不仅仅是用在DQL语句中,在DDL语句.DML语句中也都会常用到子查询. 子查询的定义: 子查询是将一个查询语句嵌套在另一个查询语句中: 在 ...

  7. IDEA maven项目下测试mybatis例子，使用mappper class或package引入mapper映射文件，总是报错Invalid bound statement（所有配置完全正确）

    困扰几个小时,终于查到解决办法及原因(可以直接到最后看解决方案) 环境就是用IDEA搭建的maven项目,主要jar包引入配置如下 <dependencies> <dependenc ...

  8. 【安全开发】C/C++安全编码规范

    C本质上是不安全的编程语言.例如如果不谨慎使用的话,其大多数标准的字符串库函数有可能被用来进行缓冲区攻击或者格式字符串攻击.但是,由于其灵活性.快速和相对容易掌握,它是一个广泛使用的编程语言.下面是针 ...

  9. SpringBoot（五）-- 整合Spring的拦截器

    一.步骤 1.创建我们自己的拦截器类并实现 HandlerInterceptor 接口. 2.创建一个Java类继承WebMvcConfigurerAdapter,并重写 addInterceptor ...

  10. NFS 常见报错

    问题:客户端挂载共享目录后,不管是root用户还是普通用户,创建新文件时属主属组都为nobody解决方法:这种情况会出现在 centos6 或 NFS 4版本中,只要在挂载的时候加上 -o nfsve ...