html常用组件

checkbox:

<input type="checkbox" name="vehicle" value="Bike">I have a bike</input>
<input type="checkbox" name="vehicle" value="Car">I have a car:</input>
<input type="checkbox" name="vehicle" value="Airplane">I have an airplane:</input>
<button class="btn1">Hide Checkboxes</button>
//引入jquery.js
$('.btn1').click(function(){
  var value=[]
  $(':checkbox:checked').each(function(index,item){
    //value.push(index.value);
    value.push($(this).val());//建议使用该方法
  })
})

jquery:

    attr:获取选择器中某个属性的值

<input id="testId" name="testName" type="text" style="color:red" value="testValue"/>
<script>
  console.log($('input[name=testName]').attr("style");
</script>

    attr:修改某个或部分属性的值

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "http://www.w3school.com.cn/jquery/",
      "title" : "W3School jQuery 教程"
    });
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上,或者点击该链接,来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>
</html>

 

  text()、html()、val()、attr()  回调函数(回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串)

<input id="testId" value="oldValue"/>
<script>
  $('#testId').val(function(index,oldValue){
    return "oldValue="+oldValue+"newValue=testNewValue"+"index="+index;
  })
</script>

 

转载于:https://my.oschina.net/qcAtKmTCeCA/blog/709755

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
通过uni-app的easycom,可以将组件引入精简为一步。只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构,就可以直接在页面中使用,无需引用和注册。 在封装组件时,需要注意props可以是数组或对象,用于接收来自父组件的数据。在HTML中,属性名称是大小写不敏感的,所以浏览器会将所有大写字符解释为小写字符。因此,在封装组件时属性名为contentText,在传值时应为content-text。 以下是一些常用的uniapp封装组件的示例代码: 1. 空数据占位图组件: ``` <template> <view class="fq-empty"> <image src="/static/image/empty-view.png"></image> <text class="">{{emptyText}}</text> </view> </template> <script> export default { props: { emptyText: { type: String, default: '什么都没有', } }, } </script> <style> .fq-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; } .fq-empty image { width: 300rpx; height: 300rpx; margin: 30rpx; } </style> ``` 2. 分页组件: ``` <template> <view> <!-- 分页内容 --> </view> </template> <script> export default { props: { total: { type: Number, default: 0, }, pageSize: { type: Number, default: 10, }, currentPage: { type: Number, default: 1, } }, methods: { // 分页操作的方法 } } </script> <style> /* 样式 */ </style> ``` 3. 导航栏组件: ``` <template> <view> <!-- 导航栏内容 --> </view> </template> <script> export default { props: { title: { type: String, default: '', }, showBack: { type: Boolean, default: false, } }, methods: { // 导航栏相关操作的方法 } } </script> <style> /* 样式 */ </style> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值