jQuery基础笔记（4）

day55

参考：https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3

文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容

html(val)// 设置所有匹配元素的html内容

不传参数时获取值。

示例：

<div id="d1">

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

    <div>div</div>

</div>

实践：

值：

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

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

val([val1, val2])// 设置多选的checkbox、多选select的值

示例“

         <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>

实践：

取到多个值时。

<!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>

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

<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="1" type="radio">

            </label>

            <label>女

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

            </label>

            <label>保密

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

            </label>

    </p>

    <p>

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

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

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

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

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

        </select>

    </p>

    <p>

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

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

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

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

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

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

        </select>

    </p>

    <p>

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

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

        </textarea>

    </p>

        <p>

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

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

        </p>

</form>

</body>

</html>

效果：

实践：

checkbox有多种选择使用for循环，注意对象类型。

文本值：

text()// 取得所有匹配元素的内容

text(val)// 设置所有匹配元素的内容

示例：

06文档操作.html

<!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>

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

<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="1" type="radio">

            </label>

            <label>女

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

            </label>

            <label>保密

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

            </label>

    </p>

    <p>

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

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

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

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

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

        </select>

    </p>

    <p>

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

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

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

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

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

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

        </select>

    </p>

    <p>

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

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

        </textarea>

    </p>

        <p>

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

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

        </p>

</form>

<script>

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

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

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

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

    // 2.1 找到input标签&ndash;&gt; 取值 &ndash;&gt; 判断为不为空 --> .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) { //判断是否为空,用索引取出为DOM对象，需转成jQuery对象

                // parent().text()去取出（用户名/密码）

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

                // 找到class=need,的next即span标签,添加text文本

                // 用索引取出为DOM对象，需转成jQuery对象

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

            }

        }

        return false;

    })

    //登录本身有默认提交的事件，以上又绑定了一个事件

</script>

</body>

</html>

实践：

点击登录后跳出提示

属性操作

用于ID等或自定义属性：

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

attr(attrName, attrValue)// 为所有匹配元素设置一个属性值，前面属性后面为值

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

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

示例：

07属性操作.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标签

        // 修改img标签的src属性

        oldURL = $imgEles.attr("src");//找图像位置    attr(attrName)// 返回第一个匹配元素的属性值

        $imgEles.attr("src", newURL);//修改src       // 为所有匹配元素设置一个属性值，前面属性后面为值

        newURL = oldURL;//不断交换新旧

    });

</script>

</body>

</html>

以上用到

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

attr(attrName, attrValue)// 为所有匹配元素设置一个属性值，前面属性后面为值

实践：

用于checkbox和radio

prop() // 获取属性

removeProp() // 移除属性

prop() // 获取属性，会返回true和false,参考下图示例。

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

jQuery基础笔记（4）的更多相关文章

jQuery基础笔记（1）
day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery? MySQL Python ...
jquery基础笔记一
一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...
jQuery基础笔记 each和data（7）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0 each jQuery.each(collection, ...
jQuery基础笔记事件（6）
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
jQuery基础笔记（3）
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签样式操作样式类 addClass();// 添 ...
jQuery基础笔记（2）
day54 筛选器参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法下一个元素: $("#id& ...
jquery基础笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
jquery基础笔记二
动态创建元素关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
Jquery基础笔记
1.$(function(){ 等价于 window.onload=function(){ }) } 2 ...

随机推荐

如何区分USB 2.0 和USB 3.0插口
USB3.0的速度是USB2.0的十倍,并且比USB2.0更加节能,同时,还能向下兼容USB2.0.那么,我们怎么区分USB2.0 和 USB 3.0呢. 电脑(有USB2.0和USB3.0的插口) ...
HHvm建站环境搭建方法:Nginx,Mariadb,hhvm及lnmp/lamp安装部署
HHVM起源于Facebook公司,是一个开源的PHP虚拟机,使用JIT的编译方式以及其他技术,让PHP代码的执行性能大幅提升.HHVM提升PHP性能的途径,采用的方式就是替代Zend引擎来生成和执行 ...
mysql thread_cache 和 thread_pool 之间的关系
线程池是Mysql5.6的一个核心功能,对于服务器应用而言,无论是web应用服务还是DB服务,高并发请求始终是一个绕不开的话题.当有大量请求并发访问时,一定伴随着资源的不断创建和释放,导致资源利用 ...
Vagrant WinNFSd
Vagrant WinNFSd Manage and adds support for NFS on Windows. Supported Platforms As of version 1.0.6 ...
匹配数字、字母和?%&=-_这几个符号的正则表达式
/^[\w\?%&=\-_]+$/ 说明:(1) \w 代表 0-9a-zA-Z 即数字.字母 (2) \?%&=\-_ 匹配?%&=-_,而正则中?代表0个或1个,因为是特殊 ...
检测空值，以及会不会出现mapping类型不一致的问题
/// <summary> /// 检测空值,以及会不会出现mapping类型不一致的问题 /// </summary> /// <typeparam name=&quo ...
source Insight工程的简单使用
本文以管理虚拟机里面的uboot为例: 1.选择project->New project->选择工程路径,假设为D:\uboot:->project has its own conf ...
jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
jquery中innerWidth(),outerWidth(),outerWidth(true)和width()的区别 var a = 元素本身的宽度: width() = a: innerWidt ...
SQA计划和系统测试规程
SQA计划和系统测试规程一.SQA计划 1.软件工程我们小组所做的项目是图书馆管理系统.我们要准确的了解此软件的需求(能够注册登录,查询图书,借书,还书,查看借阅记录等),在此前提进行建模,基于场 ...
2018.10.15 bzoj4445: [Scoi2015]小凸想跑步（半平面交）
传送门话说去年的省选计算几何难度跟前几年比起来根本不能做啊(虽然去年考的时候并没有学过计算几何) 这题就是推个式子然后上半平面交就做完了. 什么? 怎么推式子? 先把题目的概率转换成求出可行区域. ...

jQuery基础笔记（4）

文本操作

属性操作

jQuery基础笔记（4）的更多相关文章

随机推荐

热门专题