>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25949 个阅读者 刷新本主题
 * 贴子主题:  jQuery 设置内容和属性 回复文章 点赞(0)  收藏  
作者:sunshine    发表时间:2019-08-16 14:56:03     消息  查看  搜索  好友  邮件  复制  引用

  

jQuery -  设置内容和属性

设置内容 - text()、html() 以及 val()

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值
    下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容:                    

范例

$ ( " #btn1 " ) . click ( function ( ) {
    $ ( " #test1 " ) . text ( " Hello world! " ) ;
} ) ;
$ ( " #btn2 " ) . click ( function ( ) {
    $ ( " #test2 " ) . html ( " <b>Hello world!</b> " ) ;
} ) ;
$ ( " #btn3 " ) . click ( function ( ) {
    $ ( " #test3 " ) . val ( " JAVATHINKER " ) ;
} ) ;

text()、html() 以及 val() 的回调函数

    上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

    下面的例子演示带有回调函数的 text() 和 html():                            

范例

$ ( " #btn1 " ) . click ( function ( ) {
    $ ( " #test1 " ) . text ( function ( i , origText ) {
         return   " 旧文本:  "  +  origText  +  "  新文本: Hello world! (index:  "  +  i  +  " ) " ;
     } ) ;
} ) ;

$ ( " #btn2 " ) . click ( function ( ) {
    $ ( " #test2 " ) . html ( function ( i , origText ) {
         return   " 旧 html:  "  +  origText  +  "  新 html: Hello <b>world!</b> (index:  "  +  i  +  " ) " ;
     } ) ;
} ) ;

设置属性 - attr()

    jQuery attr() 方法也用于设置/改变属性值。

    下面的例子演示如何改变(设置)链接中 href 属性的值:                    

范例

$ ( " button " ) . click ( function ( ) {
  $ ( " #javathinker " ) . attr ( " href " , " http://www.javathinker.net/jquery " ) ;
} ) ;

                 attr() 方法也允许您同时设置多个属性。

      下面的例子演示如何同时设置 href 和 title 属性:            

范例

$ ( " button " ) . click ( function ( ) {
    $ ( " #javathinker " ) . attr ( {
         " href "  :  " http://www.javathinker.net/jquery " ,
         " title "  :  " jQuery 教程 "
     } ) ;
} ) ;

attr() 的回调函数

    jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

    下面的例子演示带有回调函数的 attr() 方法:                            

范例

$ ( " button " ) . click ( function ( ) {
  $ ( " #javathinker " ) . attr ( " href " ,  function ( i , origValue ) {
     return   origValue  +  " /jquery " ;
   } ) ;
} ) ;

       程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-02-18 22:00:47 重新编辑]
  Java面向对象编程-->集合(下)
  JavaWeb开发-->Web运作原理(Ⅲ)
  JSP与Hibernate开发-->立即检索和延迟检索策略
  Java网络编程-->RMI框架
  精通Spring-->Vue Router路由管理器
  Vue3开发-->组合(Composition)API
  VSCode 开发Vue必备插件
  最新的Vue面试题大全含源码级回答,吊打面试官系列
  勇闯28个关卡学会HTML与HTML5基础
  介绍axios的基本使用(vue中使用axios)
  总结:Vue的生命周期钩子函数的调用时机
  Vue选项的用法
  拯救React的hooks:react的问题和hooks的作用
  vue 项目导出word格式文件
  jQuery 效果:隐藏和显示
  JavaScript Error(错误) 对象
  JavaScript 函数参数
  JavaScript编程规范
  JavaScript 严格模式(use strict)
  JavaScript中的for 循环
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。