Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >jquery 选中某一行

jquery 选中某一行

作者头像
Dream城堡
发布于 2018-09-10 04:45:44
发布于 2018-09-10 04:45:44
1.3K00
代码可运行
举报
文章被收录于专栏:Spring相关Spring相关
运行总次数:0
代码可运行

jquery 选中某一行

html:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="chatBox-list" ref="chatBoxlist">
<div class="chat-list-people">
                    <div><img src="img/icon01.png" alt="头像"/></div>
                    <div class="chat-name">
                        <p>小明</p>
                    </div>
                    <div class="message-num">10</div>
                    <button onclick="ceshi()">ceshi</button>
                    <div id="bian" ></div>
 </div>
</div>

js:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//进聊天页面
$(".chat-list-people").each(function () {
    $(this).click(function () {
        var n = $(this).index();
        console.log("你选中的好友号:"+n)

        //让input框选中
        $(this).find("input").attr("checked",true);
        $(".chatBox-head-one").toggle();
        $(".chatBox-head-two").toggle();
        $(".chatBox-list").fadeToggle();
        $(".chatBox-kuang").fadeToggle();
        //传名字
        $(".ChatInfoName").text($(this).children(".chat-name").children("p").eq(0).html());
           //传头像
        $(".ChatInfoHead>img").attr("src", "jqueryChat/img/icon01.png");
        //聊天框默认最底部
        $(document).ready(function () {
            $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
        });
    })
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.08.20 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
从头搭建一个在线聊天室(一)
今天从头开始做一个在线聊天网站,网上各种各样的聊天工具已经很多了,为啥还要做这么一个聊天工具呢,无他,兴趣耳!
周萝卜
2019/07/17
2.3K0
从头搭建一个在线聊天室(一)
jQuery学习笔记
jQuery函数位于一个document ready函数中,我们需要在js中加载该函数文档
Mirror王宇阳
2020/11/13
7.6K0
jQuery学习笔记
jQuery基础
一 jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。 [2]   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! [3]  它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 [4]  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdo
用户1214487
2018/01/24
2.1K0
jQuery的简单使用
jQuery注册事件也很简单,通过选择器包装好标签对象后,调用相关的事件方法即可,调用事件方法时需要传递一个函数对象,当事件被触发就会执行函数里的代码。在jQuery里的事件名称并没有与html中的事件名称有多大区别,还是那个熟悉的味道熟悉的套路,示例:
端碗吹水
2020/09/23
7.1K0
jQuery的简单使用
JQuery 实现开发常用功能
标签克隆的两种实现方式: <body> <div> <p> <a onclick="Add(this)">+</a> <input type="text"/> </p> </div> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> function Add(ths) {
王瑞MVP
2022/12/28
5.4K0
Web前端JQuery入门实战案例
快速的,轻量级的,功能丰富的 js 库。动画(animation),ajax,DOM,更简单,容易使用的api。
达达前端
2019/07/03
4K0
从头搭建一个在线聊天室(二)
我这里使用 redis 来作为后端数据存储工具。大家如果有自己的 redis 服务器当然是最好了,如果没有的话,推荐下在线的 redis 免费应用 redislabs,大家可以自行体验下,https://redislabs.com/
周萝卜
2019/07/17
1.3K0
从头搭建一个在线聊天室(二)
jQuery基础--jQuery特殊属性操作
区别:html方法会识别html标签,text方法会那内容直接当成字符串,并不会识别html标签。
eadela
2019/09/29
2.2K0
jQuery
DOM 对象 Alert 出来的效果是:[object HTML 标签名 Element]
OY
2022/03/12
10.9K0
jQuery
jQuery
ps:.offset()方法允许我们检索一个元素相对于文档(document)的当前位置,和 .position()的差别在于: .position()是相对于相对于父级元素的位移;
HammerZe
2022/03/25
6.9K0
jQuery
jquery入门
运用jQuery时,需要在页面中引入jQuery文件 jQuery的hello world <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>helloworld</title> <!-- 1. 在页面中引入jQuery支持 --> <script src="js/jquery-1.12
周小董
2019/03/25
3K0
Web阶段:第五章:JQuery库
点击:API文档下载 Jquery介绍 1.什么是JQuery ? jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。 2.JQue
Java廖志伟
2022/09/28
26.5K0
Web阶段:第五章:JQuery库
jQuery基础系列
jquery的入口函数是在html所有标签都加载后才执行,而JavaScript的window.onload事件是等到所有内容加载完后才执行。
达达前端
2019/07/03
2.7K0
jQuery基础系列
jQuery基础
使用jQuery快速高效制作网页交互特效 第一章-JavaScript基础 上机练习1 练习——统计包含“a”或“A”的字符串的个数 需求说明:使用数组存储一组字符串,并统计包含“a”或“A”的字符串的个数 关键代码: <script type="text/javascript"> var a = ["America","Greece","Britain","Canada","China","Egypt"]; var count = 0; for(var i in a) {
星辰xc
2022/04/09
7.6K0
jQuery基础
jquery学习
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
菲宇
2019/06/13
2.3K0
JQuery 入门 - 附案例代码
HTML入门与进阶以及HTML5 CSS JS-上 JS-下 jQuery Node.js + Gulp 知识点汇总 MongoDB + Express 入门及案例代码 Vue项目开发-仿蘑菇街电商APP
Twcat_tree
2023/02/20
14K0
JQuery 入门 - 附案例代码
javaWeb核心技术第五篇之jQuery
- 概述 - jQuery是一个优秀的javascript框架(js类库),兼容css3和各大浏览器,提供dom,events,animate,ajax等简易的操作。并且jQuery有非常丰富的插件,大多数功能都有相应的插件解决方案。jQuery的宗旨是write less, do more. (写的更少,做的更多) - jQuery入门 - jQuery和html整合 - 下载 - 下载地址:www.jquery.com - 使用script的src属性即可
海仔
2019/08/26
8.1K0
与Ajax同样重要的jQuery(2)
练习9: ² 点击button 打印radio checkbox select 中选中项的值 <script type="text/javascript" src="../jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ // 点击button 打印radio checkbox select 中选中项的值 $("#mybutton").click(function(){ // 打印选中性别的值 $("in
Java帮帮
2018/03/19
6.3K0
与Ajax同样重要的jQuery(2)
jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。(write less,do more.)
Python攻城狮
2018/08/23
2.3K0
jQuery1.jQuery简介及使用2.jQuery语法3.jQuery选择器4,jQuery 事件函数及效果显示
jQuery 教程
菜鸟教程 — jQuery 教程:https://www.runoob.com/jquery/jquery-tutorial.html
全栈程序员站长
2022/09/03
17.4K0
jQuery 教程
相关推荐
从头搭建一个在线聊天室(一)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验