>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 25950 个阅读者 刷新本主题
 * 贴子主题:  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开发-->使用过滤器
  JSP与Hibernate开发-->Java对象持久化技术概述
  Java网络编程-->RMI框架
  精通Spring-->
  Vue3开发-->通过Axios访问服务器
  键盘按键与 键码对照表
  基于vue-element-admin 的权限管理
  Node.js操纵Mongodb数据据
  CSS的style样式的三种用法
  js Worker 线程收集1~9999的之间所有质数;Worker线程交换数...
  前端面试题及答案汇总
  Vue的使用方法
  vue+file-saver+jszip实现批量导出图片
  H5定位终极解决方案
  JavaScript的History 对象
  CSS3 文本效果
  CSS 伪类
  CSS padding(填充)
  HTML 表格标签的用法
  JavaScript 代码规范
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


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