自定义属性

html5全局属性

不羁岁月 提交于 2020-03-22 12:30:55
全局属性:对于任何一个标签都是可以使用的属性。 一、data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx">,但这是种非常不规范的方式。 也正是因为有这种自定义属性的需求,在html规范里增加了自定义属性data-*属性。html5中开发人员可自定义任何想要的属性,只要加上前缀data-,通过这种方式避免与未来的html版本冲突。 <form data-type="comment" class="container"> ... </form> data-*自定义属性不影响页面布局,但可读可写。下面介绍怎样读写。 1、获取自定义属性 获取时通过dataset对象,使用"."来获取属性,需要去掉data-前缀。 html: <div id='test' data-age="23">html5 data-*自定义属性 data-age</div> js获取自定义"data-*"属性 var oDiv=document.getElementById("test"); alert(oDiv.dataset.age); jquery获取 $('#test').data('age'); 2、获取带连字符的自定义属性 遇到自定义属性中有连字符需要转化为驼峰命名。 html: <div id='test' data-user

Html5之自定义属性(data-,dataset)

六眼飞鱼酱① 提交于 2020-03-20 13:42:55
定义 H5为我们提供了以 "data-" 为前缀定义需要的属性即可设置自定义属性 1 2 <div id="box1" data-name="Musk"></div> <div id="box2" data-full-name="Elon Musk"></div> 获取 使用H5自定义属性对象dataset来获取 1 2 3 4 5 6 7 8 let box1 = document.getElementById('box1'); let box2 = document.getElementById('box2'); box1.dataset.name // Musk box2.dataset.fullName // Elon Musk (驼峰) box1.getAttribute('data-name') // Musk box2.getAttribute('data-full-name') // Elon Musk 设置 1 2 3 4 5 let box1 = document.getElementById('box1'); let box2 = document.getElementById('box2'); box1.dataset.name = '马斯克' box2.setAttribute('data-full-name', '埃隆 马斯克') 以上就是本文的全部内容

angular 组件之间的通信

北战南征 提交于 2020-03-17 06:05:53
父子组件: 1.父组件调用子组件时,绑定自定义属性赋值为父组件中的自定义变量。父组件通过该变量传递信息给子组件。 父组件homes import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-homes', templateUrl: './homes.component.html', styleUrls: ['./homes.component.css'] }) export class HomesComponent implements OnInit { constructor() { } //父组件通过调用子组件定义的title属性绑定一个值 title='我是父组件home给我的title信息'; ngOnInit(): void { } } HTML: <div id='home'> <!--调用子组件,定一个一个自定义属性,如下为forChile,父组件的ts文件中通过title传递这个值--> 标题:<app-header [forChile]='title'></app-header> <line></line> <hr> <br> 我是home组件。 </div> 父组件news import { Component, OnInit } from '@angular

jQuery

ⅰ亾dé卋堺 提交于 2020-03-16 03:54:10
表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子: $(":checkbox") // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子: 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 找到被选中的option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的option 链式操作:每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。 筛选器方法 下一个元素: $("#id").next() 

jQuery基础知识

我的梦境 提交于 2020-03-16 03:53:30
表单筛选器 :text :password :file :radio :checkbox :submit :reset :button 例子: $(':checkbox') // 找到所有的checkbox 表单对象属性: :enabled :disabled :checked :selected 例子: 找到可用的input标签 <form> <input name="email" disabled="disabled" /> <input name="id" /> </form> $("input:enabled") // 找到可用的input标签 找到被选中的option: <select id="s1"> <option value="beijing">北京市</option> <option value="shanghai">上海市</option> <option selected value="guangzhou">广州市</option> <option value="shenzhen">深圳市</option> </select> $(":selected") // 找到所有被选中的optio 筛选器方法 下一个元素: $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 上一个元素: $("

Day49 前端知识之jQuery

我的梦境 提交于 2020-03-16 03:52:40
一.jQuery介绍   1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库   2.jQuery使用户能够方便的处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大地简化JavaScript编程,它的宗旨是:Write less,do more. 二.jQuery优势 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫

DOM02-表单属性

二次信任 提交于 2020-03-11 06:24:52
inner text与inner html 共同点:都是用来操作标签内容。 inne rtext 把内容当文本来处理。 获取时:会把html标签舍弃掉只获取文本内容。 设置时:也不能识别标签,会把标签转换为实体字符。 inner text的兼容性 火狐老版本不支持inner text属性,支持text content。 IE6,7,8不支持text content。 inner html 获取时:能够同时获取到文本和标签。 设置时:也能识别设置标签。 兼容性解决法 获取时:先检测一下用inner能不能获取到,如果可以直接获取,如果不行用text content属性。 按照以上思路封装一个函数,需要时直接用就可以了。 function getInnerText(element){ //能力检测 if(typeof element.innerText==="string"){ return element.innerText; }else{ return element.textContent; } } function setInnerText(element,value){ //能力检测 if(typeof element.innerText==="string"){ element.innerText=value; }else{ element.textContent=value

织梦文章内容页的自定义属性(flag)添加

半世苍凉 提交于 2020-03-08 21:02:10
文章自定义属性添加: insert into ` dede_arcatt ` ( sortid,att,attname ) values ( 9, 'z' , '原创' ) ; alter table ` dede_archives ` modify ` flag ` set ( 'c' , 'h' , 'p' , 'f' , 's' , 'j' , 'a' , 'b' , 'z' ) default NULL ; 删除新建的自定义属性 我们接下来用sql命令行工具删除我们刚刚添加的“原创z”属性。在sql命令行工具中输入下面的代码: DELETE dede_arcatt FROM dede_arcatt WHERE sortid = 9 这样就删除了“原创z”属性。 来源: CSDN 作者: 学历记录每一天 链接: https://blog.csdn.net/lichuang214/article/details/104738316

jQuery 的基本使用

我与影子孤独终老i 提交于 2020-03-04 04:42:49
jQuery 的使用 jQuery官网 jQuery方法大全中文网 这个网站可以多看看 里面是 jQuery 的方法大全,而且是中文的 我们要使用 jQuery 首先要下载一个 可以去官网下载,也可以直接百度搜索下载,都可以 然后就是再页面里面引入 jQuery.js 就行了 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < meta http-equiv = " X-UA-Compatible " content = " ie=edge " > < title > Document </ title > </ head > < body > < script src = " ./jquery/jquery.js " > </ script > </ body > </ html > 然后就可以开始使用了 jQuery 向全局暴露的接口就是 jQuery 或者 $ 都行 选择器和筛选器 选择器和筛选器就是用来帮我们获取 DOM 元素的 选择器 jQuery 有着相当强大的选择器 // 按照 id 获取页面中的元素

JS--自定义属性的获取

此生再无相见时 提交于 2020-02-25 22:24:52
在html的标签中自定义属性,使用**setAttribute(“自定义属性的名字”, “自定义属性的值”) 设置 用 getAttribute(“自定义属性的名字”)**获取自定义属性 .属性 ,点出来的是DOM树中的属性,在标签中不显示 removeAttribute(“属性的名字”)删除属性,可以是自定义属性也可以是系统自带属性 < ul id = "uu" > < ! -- 在html标签中添加的自定义属性,如果想获取这个属性的值,需要使用getAttribute ( "自定义属性的名字" ) ,才能获取这个属性的值 -- > < li scroe = "10" > 成绩 1 < / li > < li scroe = "20" > 成绩 2 < / li > < li scroe = "30" > 成绩 3 < / li > < li scroe = "40" > 成绩 4 < / li > < li scroe = "50" > 成绩 5 < / li > < / ul > < script > var uuObj = document . getElementById ( "uu" ) ; var list = uuObj . getElementsByTagName ( "li" ) ; for ( var i = 0 ; i < list . length ; i