jQuery使用demo

最新推荐文章于 2021-04-09 13:56:29 发布

drunk喵咪

最新推荐文章于 2021-04-09 13:56:29 发布

阅读量546

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jdrunk/article/details/114968450

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、jQuery的方法

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<div id="dd">hello</div>
<input type="text" id='text' value="mmm">

//获取非表单元素的值
$('#dd').text() //hello

//获取表单元素的值
$('#text').val()  //mmm

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

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

//获取非表单元素的值
$('#dd').text('china')  //china
       
//获取表单元素的值
 $('#text').val('hello') //hello

删除和添加

//删除id 为 div1的元素
$("#div1").remove();

//删除id 为 div1的子元素
$("#div1").empty();

//删除id 为 div1的元素中类名为one的元素
$("#div1").remove('.one');

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$("p").append("Some appended text.");

隐藏和显示

//隐藏
$("#hide").click(function(){
  $("p").hide();  //给元素设置display:none属性
});

//显示
$("#show").click(function(){
  $("p").show(); 
});

修改dom元素样式

$("#focus").css("color","red")

一些比较好用的效果

一个小demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <title id="title"></title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="css/pdfh5.css" />
  <script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
  <style>
      html{
        font-size: calc(100vw / 750 * 30);
      }
      .detail_title{
        text-align: center;
      }
  </style>
</head>
<body>
    <h3 id='detail_title' class="detail_title"></h3>
    <div className="name_top">
      <p><span id="company_name" ></span><span id='time'></span></p> 
      <button className="cancel_focus" id="focus" type="primary">取消关注</button>
      <div id="pdf_review"></div>
    </div>
  <script>
    $(function(){
        let token = ''

        //加载详情
	    axios({method:'get',url:url,headers{'token':`${token}`}}).then(res=> {
          if(res.data.success){
            $('#title').text(res.data.data.columnName)
            $('#detail_title').text(res.data.data.refName)
            $('#company_name').text(res.data.data.companyName)
            $('#time').text(res.data.data.shelfStartTime)
            var pdfh5 = new Pdfh5('#pdf_review', {
                pdfurl: res.data.data.filePath
            });
          }
        }).catch(e => {console.log(e)})

        //jquery事件
        $('#focus').click(function(){
          if($('#focus').text() === '取消关注'){
            $('#focus').text('关注')
          }else{
            $('#focus').text('取消关注')
          }
        })
    })
  </script>
</body>
</html>

drunk喵咪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery使用demo

1、jQuery的方法获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值<div id="dd">hello</div><input type="text" id='text' value="mmm">//获取非表单元素的值$('#dd'
复制链接

扫一扫