jQuery基础选择器应用（第二节）【点击为input控件添加背景色，编队Ul Li，聚焦 失焦，无刷新评论】

置顶 于 2020-08-05 15:01:37 发布
阅读量316 收藏
点赞数
文章标签： jquery html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AutisticRoad/article/details/107815355
版权

点击为input控件添加背景色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .s1 {
            background-color: yellow;
        }
    </style>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //为控件注册焦点事件
            $("input").focus(function () {
                //为当前点击的控件添加s1样式表，将背景设置为黄色，并删除同辈元素中的样式为s1的样式表
                $(this).addClass("s1").siblings().removeClass("s1");
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="按钮一" />
    <input type="button" name="name" value="按钮二" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="checkbox" name="name" value="" />选择框
    <input type="radio" name="name" value="" />单选1
    <input type="radio" name="name" value="" />单选2
</body>
</html>

编队Ul Li

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .color {
            background-color: red;
        }
    </style>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //为第一个ul中的li注册鼠标滑过事件
            $("ul:eq(0) li").mouseover(function () {
                //为当前滑到的li填充背景色，并且删除同辈中的填充背景色
                $(this).addClass("color").siblings().removeClass("color");
            });
            //为第一个ul中的li注册点击事件
            $("ul:eq(0) li").click(function () {
                //删除从第一个ul里移动的li
                $(this).remove();
                //将第一个ul中的li添加到第二个ul中
                $("ul:eq(1)").append("<li>" + $(this).text() + "</li>");
            });
        });
    </script>
</head>
<body>
    <ul>
        <li>魔术</li>
        <li>尼克斯</li>
        <li>公牛</li>
        <li>湖人</li>
        <li>火箭</li>
    </ul>
    <ul>
    </ul>
</body>
</html>

聚焦 失焦

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //页面加载的时候加载text提示
            $("[type=text]").val("请输入内容");
            //失焦事件
            $("[type=text]").blur(function () {
                if ($("[type=text]").val() != "请输入内容" && $("[type=text]").val() != "") {
                } else {
                    $("[type=text]").val("请输入内容");
                }
            });
            //聚焦事件
            $("[type=text]").focus(function () {
                if ($("[type=text]").val() == "请输入内容") {
                    $("[type=text]").val("");
                }
            });
        });
    </script>
</head>
<body>
    请输入搜索关键词：<input type="text" name="name" value="" /><input type="button" name="name" value="搜索" />
</body>
</html>

无刷新评论

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //注册btn点击事件
            $("#btn").click(function () {
                //拼接表格的html页面代码
                var str = "<tr><td>" + $("#name").val() + "</td><td>" + $("#text").val() + "</td></tr >";
                //将拼接好的html页面代码添加到table表后
                $("table").append(str);
            });
        });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>昵称</td>
            <td>评论</td>
        </tr>
    </table>

    昵称：<input id="name" type="text" name="name" value="" />
    <br />
    评论：<input id="text" type="text" name="name" value="" />
    <br />
    <input id="btn" type="button" name="name" value="添加评论" />
</body>
</html>
AutisticRoad
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新插入ul中的＜li＞标签无法绑定点击事件
shiyue1016的博客
09-21 1657
我做的是搜索框下，关联数据显示 下面是html基本结构。 <input class="search" type="text" value="目的地：北京，上海，深圳" id="search"> <ul class="search-like" id="list-box"> </ul> ul内没有li，通过模板引擎方法插入从后台接收到的数据到ul中； 在给li绑定事件过程中遇到了问题，在外部绑定事件会无效，因为li是后面动态生成的，也就
jquery 修改input边框和背景颜色
li836779537的博客
01-06 3036
代码： <input id="aaa" name="bbb" class="ccc" "/> 这里的 $(".ccc")也可以换 $("#aaa") ，哪种方式都可以。 if($(".ccc").val() == 0){ $(".ccc").css("border-color","red");//边框颜色 $(".ccc").css("background-color","#FCF2AD");//背景颜色 } 效果图： ...
div获得/失去焦点
hxy793518971的博客
05-20 1万+
div获得/失去焦点 div标签默认是没有焦点的，但是当出现以下类似问题时，就需要将div设置为可操作元素，从而使其获得焦点     当出现如 使用div/ul制作自定义下拉选 div中两个元素绑定一个事件时     就需要为div设置属性使其变为可操作元素（以下使用第一种情况作为案例） <div id...
去掉input点击时候的背景颜色
xiejunna的博客
12-08 9776
//设置input的css属性：点击时候，设置颜色值为透明 -webkit-tap-highlight-color:rgba(255,0,0,0);
input输入框聚焦状态样式
蓝莓的博客
01-10 2万+
改变input输入框的聚焦默认样式
jQuery中:input选择器用法实例
12-10
本文实例讲述了jQuery中:input选择器用法。分享给大家供大家参考。具体分析如下： 此选择器匹配所有的input元素。例如：<input type=”text” />等等 语法结构: 代码如下:$(“:input”) 实例代码: 代码如下:...
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
10-18
下面小编就为大家分享一篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jquery的选择器的使用技巧之如何选择input框
10-26
如何选择input框，方法貌似有很多，而在jquery中有个相当简单不错的方法，在下面为大家介绍下详细的实现，希望大家可以练练手哦
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
12-13
本文实例讲述了JQuery实现ul中添加LI和删除指定的Li元素功能。分享给大家供大家参考，具体如下： 最近为了实现这个简单的功能也是看了很多的内容，终于找出了看起来简单易实现的方法，我觉得能用最简洁的代码实现，...
jQuery设置input标签样式为置灰
ios8859_2的博客
03-21 1万+
&lt;input type="text" class="form-control required" maxlength="100"name="user003" onfocus="this.blur()" style="background-color: #e4e4e4"&gt;
让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦
netuser1937的博客
02-09 9194
让HTML标签、DIV、SPAN拥有onfocus和onblur，聚焦和失焦
JQuery实现点击文本框等时背景变颜色
Zool_happy的专栏
05-10 7027
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br />    <title></title><br />    <style type ="text/css" ><br />  
input失焦事件与点击事件冲突处理
lotte
12-17 5606
今天遇到一个问题输入框输入文字出现列表可以进行点击跳转地址携带输入值 点击空白区域清除输入框 效果如图 点击时间完成后添加失焦事件 点击不好用了 事件执行顺序失焦高于点击 解决方案 给点击标签加一个 mousedown 事件， 在其中执行 event.preventDefault(), 这样点击的时候文本框就不会失焦了。 另外一个笨方法 失焦事件中添加 setTimeout 再进...
js实现<input type="color">改变背景颜色
热门推荐
qq_37017864的博客
04-26 3万+
< input type=”color” >改变北京颜色
jquery页面，点击li里面的a标签页面跳转，让当前a标签激活添加背景色和颜色，其它a标签恢复初始状态
最新发布
06-01
3. 给当前点击的a标签添加背景色和颜色。 4. 获取a标签的href属性，并使用window.location.href跳转到对应的页面。 以下是示例代码： ```javascript $('li a').click(function(event) { event.preventDefault();...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值