-
js 取元素 创建元素 添加元素 添加属性
2020-06-05 13:15:30<style> *{ margin:0; padding:0; } .box{ width: 200px; height: 200px;...div class="box">第一个盒子</div> <script> var box = document.querySelector('.展开全文<style> *{ margin:0; padding:0; } .box{ width: 200px; height: 200px; background-color: #FF0000; } </style> <body> <div class="box">第一个盒子</div> <script> var box = document.querySelector('.box')//获取元素 console.log(box)//检查取到box没有 let div = document.createElement('div')//创建一个新的盒子div document.body.appendChild(div) div.innerHTML='创建了一个新的盒子内容'//innerHTML ：输出内容 div.style.width=200 +'px'//宽度 div.style.height=200 +'px' //高度 div.style.background='gray'//背景颜色 console.log(div) </script> </body>
-
JS 获取页面元素 创建元素节点和属性
2019-04-04 12:56:35一、获取页面元素 1、querySelector系列，使用css选择器来...p class="p1">1234568</p> <p id="p2">1234568</p> ②script代码 var p2 = document.querySelector('#p2'); console.log(p2)...展开全文一、获取页面元素 1、querySelector系列，使用css选择器来选择页面元素 例如： ①HTML代码 <p class="p1">1234568</p> <p id="p2">1234568</p> ②script代码 var p2 = document.querySelector('#p2'); console.log(p2); 2、querySelectorAll 获取所有的元素 例如： ①HTML代码 <div class="box" > <p>1234568</p> <p class="p1">1234568</p> <p id="p2">1234568</p> <p class="p1">1234568</p> <p>1234568</p> </div> ②script代码 var ps = document.querySelectorAll('.box p'); console.log(ps); 这样就获取到了页面中所有的“p”元素。 二、创建元素节点和属性 1、创建页面元素 var h1 = document.createElement('h1'); 2、创建文本节点 var h1_text = document.createTextNode('呵呵'); 3、文本节点和页面元素产生关系 h1.appendChild(h1_text); 4、创建属性节点 var h1_align = document.createAttribute('align'); 5、对属性节点赋值 h1_align.value = 'center'; 6、将属性节点与页面元素产生关系 h1.setAttributeNode(h1_align); 7、将页面元素追加到body中 document.body.appendChild(h1); h1.innerHTML = '呵呵呵';
-
jquery 根据class名 赋值_jquery 赋值 创建元素 添加class属于 html内容
2020-12-22 13:20:221. 选择器在html里，我们可以使用网页特效选择一个html标记进行操作，比如修改html标记的属性，添加一个class属性等等。使用jquery选择一个html标记更加容易1)通过html的id属性选择一个html标记var id = jquery("#id...展开全文1. 选择器
在html里，我们可以使用网页特效选择一个html标记进行操作，比如修改html标记的属性，添加一个class属性等等。使用jquery选择一个html标记更加容易
1)通过html的id属性选择一个html标记
var id = jquery("#id3");
id.html("hahaha");
以上代码中 得到一个div 标记，并为这个标记的内容赋值hahaha，之所以得到这个标记是因为这个标记的id等于id3
2) 通过元素名称选择
var ids = jquery("div");
alert(ids);
///
aa
bb
以上代码得到一个数组，数组中的元素是2个div标记
3) 通过元素的class属性选择元素
4) 通过* 可以选择所有的元素
5) 通过元素 子元素来选择元素
例如:
jquery("div li"); // 得到div元素下面的li子元素
jquery("div li:has(a)"); // 得到div元素下面的li子元素,and 这些子元素是有标记的子元素 ,例如:
只得到第一个li
jquery("div:eq(0)"); // 得到第一个div元素
jquery("div:lt(2)">; // 得到前两个div
jquery("div:last(0)"); // 得到后div
2. 去除首位空格
var s = jquery.trim("sss ");
3. window.onload = mybegin 的作用是当文档加载完成执行mybegin函数，但这句只能写一次，如果要执行多个函数，使用jquery：
jquery(document).ready(function(){});
这句还可以写成：jquery(function(){});
4. 创建元素
var se = jquery("...."); // 创建了一个select元素
se.insertbfter("#id"); // 将新建的元素追加到div2元素后面
5. 得到元素的属性
$("div").attr("title");
6. 设置元素属性
$("div").attr("title", "helo");
7. 添加class属于
$("div:eq(1)").adddlass("myclass1");
为第二个div元素添加一个class="myclass1"
8. 切换class属性
$("div").toggledlass("hight");
如果div元素有class=hight属性,则删除,如果没有则添加之
9. 获得元素文本的内容
$("div").text();
10. 获得元素html内容
$("div").html();
11. 为元素添加html内容
$("div").html("......");
12. 克隆元素
$("div").clone();
得到此元素的一个副本.
$("div").clone().appendto($("p"));
将div元素的一个副本追加到p元素
13. 为元素添加事件
$("div").click(function(){});
// 为div元素添加了一个click事件,当触发该事件时,执行function函数
$("div").bind("click", function(){});
// 为div元素绑定一个click事件
$("div").bind("click", fn = function(){});
// 为div元素绑定一个click事件
$("div[@id=d]").click(function(event) {
alert(event.clientx)
});
// 为div(并且div的id="d")添加一个click事件,事件处理函数中得到鼠标坐标
14. 移除事件
$("div").unbind("click", fn); //fn为函数名
15. 显示元素
$("div").show();
$("div").show(毫秒); // 使用"毫秒"时间将div显示出来
16. 隐藏元素
$("div").hide();
$("div").hide(毫秒);
17. 元素隐藏和显示
还有:
$("div").fadeout();
$("div").fadein();
18. 幻灯片
$("div").slideup();
$("div").slidedown();
19. 浏览器检测
$.browser 下有多个属于,可以用来判断浏览器的类别
msie true表示ie
mozilla true表示mozilla系列,比如firefox
safari true表示safari
opera true表示opera
version 得到浏览器的版本
if ($.browser.mozilla)
{
....
}
20. 盒子模型
盒子模型分为w3c标准模型和ie非标准模型
我们介绍标准模型
是浏览器的区域,element是内容区域,他有width属性和height属性,padding是内容区域到tag边框的距离,称内边距,margin是element边框的浏览器边缘的距离,称外边距
判断盒子模型的类型
$.bomodel 可以判断盒子模型,true为标准w3c boxmodel
这句建议使用 $.support.bomodel 替代
21. 遍历对象
$.each(array, fn);
// 遍历array(集合),每遍历一次,执行一次fn.
$.each($.browser , fn(p,v){...});
// 遍历browser中的所有属性,fn函数的参数p表示属性名称,v表示属性值.
对数组进行过滤
$.grep(array , fn(v,index){...});
遍历array中的元素,每遍历到一个元素执行一次fn函数. fn函数的第一个参数为array中遍历到的元素,第二个元素为index, 这个fn函数必须返回true/false,如果返回true,则保留遍历到的这个元素,如果返回false则删除此元素.
例子:
var ss = $.grep([1,2,3,4] , function(o){
return o > 2;
});
alert(ss); // 打印出大于2的元素.
22. map()
我总觉得这个map函数和each一个意思,还是不理解
$.map(array , fn);
23. 异步请求
$.get(url, {data} , fn(data){...});
$.post(url, {data}, fn(data){...});
$.ajax(options);
例子:
$.ajax( {
type : 'post',
url : '....',
data : {name:'11', age:'22'},
success : fn(data){}
} );
其中{data} 是json格式的数据,表示url的参数
-
Tkinter——自动创建表格/批量创建文本框，并且支持修改元素属性。
2020-06-13 15:32:15一、最基本的元素批量创建方法 import tkinter #数据内容 nameList=["name" ,"phone","email","homeAdess","class","love","sex","object","score"] valueList=[1,2,3,4,5,6,7,8,9] nL = iter(nameList) vL=iter...展开全文一、最基本的元素批量创建方法
import tkinter #数据内容 nameList=["name" ,"phone","email","homeAdess","class","love","sex","object","score"] valueList=[1,2,3,4,5,6,7,8,9] nL = iter(nameList) vL=iter(valueList) #主程序 root = tkinter.Tk() rows=3#设置元素占用的行数 columns=6#设置每行元素占用的列数 for r in range(rows): for c in range(columns): cell= tkinter.Text(root, width=10, height=2) cell.grid(row=r, column=c) #设置字段名 if c % 2 == 0: cell.insert("end", nL.__next__()) cell.configure(state='disabled', bg="Gainsboro") #设置字段值 else: cell.insert("end", vL.__next__()) root.mainloop()运行效果：
这种方法一次性创建，缺点是创建后，就无法通过代码来修改某个文本框的属性。
二、批量创建文本框，并支持后续通过代码修改属性。
实现修改属性的效果是通过locals()方法，把元素名和元素身加入了locals()列表中。这样就能通过locals()[name]的方法来调用了。不单是文本框， 把代码稍微改一下，批量创建的按钮、标签等元素都能进行修改。如此一来，少了很多代码量，又能做到属性修改的效果，这样就能实现一些高级功能。
代码展示：
import tkinter class biao(): def __init__(self,maxr,maxc): ''' :param maxr: 设置总行数 :param maxc: 每行的字段数量, ''' self.maxr=maxr self.maxc=2*maxc self.textList=locals()#自动生成的变量名合集 def autoCreat_Text(self,farhter,nameList=None,valuelist=None): ''' :param farhter: 父组件名称 :param nameList: 表格的字段名 :param valuelist: 字段名的值 :return: ''' nL = iter(nameList) vL=iter(valuelist) for r in range(self.maxr): for c in range(self.maxc): index = str(r) + str(c) name="text"+index#设置表格编号如text00，text01 self.textList[name]=tkinter.Text(farhter, width=10, height=2) self.textList[name].grid(row=r, column=c) if c % 2 == 0: #设置字段名 index = str(r) + str(c) name = "text" + index#设置文本框编号如text00、text01 self.textList[name].insert("end", nL.__next__()) self.textList[name].configure(state='disabled', bg="Gainsboro") else: #设置字段值 self.textList[name].insert("end", vL.__next__())使用方法：
#数据 nameList = ["name", "phone", "email", "homeAdess", "class", "love", "sex", "object", "score"] valueList = [1, 2, 3, 4, 5, 6, 7, 8, 9] #------------------------------------------------------------------------------------------- root = tkinter.Tk() #批量创建文本框 a = biao(3, 3) a.autoCreat_Text(root, nameList, valueList) #添加一个按钮演示效果 def changeText001(): a.textList["text01"].configure(state='disabled', bg="Gainsboro") b=tkinter.Button(root,text="效果演示",command=changeText001) b.grid() # root.mainloop()效果演示：
1.运行
2.点击按钮后，禁用名为text01的文本框，并更改背景颜色。
如果喜欢本文本，欢迎收藏、转发、讨论、打赏。如果有小伙伴有更好的方法，欢迎评论留言，谢谢！
-
HTML5权威指南读书笔记19（第28章）-dom元素，classname属性，classlist类列表，data开头自定义属性，...
2020-11-27 16:22:21HTMLElement对象提供了一组属性，用来读取和修改被代表元素的数据 <body> <p id="mytext" dir="ltr" lang="ch"> 这里有一些文本，那里还有一些文本，这里都是一些文本 </p> <pre id=... -
为元素创建多个属性
2011-07-06 22:28:00<div class="post-text" itemprop="text"> <p>I figured out how to create a DOM object for XML with the following code (part of it): <pre><code>$xml_item = $xml->createElement('item'); $xml_... -
动态创建HTML元素并添加属性（转）
2019-09-24 13:51:49<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>柴婷的测试</title> <style>... .my-class{ color:red; ... -
Spring框架Bean元素的属性概述与三种对象创建方式
2019-09-10 14:43:02Spring配置详解 Bean元素 使用该元素描述需要Spring容器管理的对象 name&id属性 别名，给被管理的对象起个名字，...class属性 被管理对象的完整类名 <bean name = "user" class = "bean.User"></b... -
2017-3-31 操作属性 定时器 操作内容 操作相关元素 元素创建添加删除
2019-10-05 10:02:49（一）操作属性 1.对象.setAttribute（'属性名','属性值'... 例子：把所有class为div的，字体改为30px； var a document.getElementById('div'); for(var i=o;i<a.length;i++){ a[i].setAttribute('st... -
Spring：通过无参构造创建， bean元素进阶， 生命周期属性
2019-07-31 16:14:46通过无参构造创建 bean元素：使用该元素来描述Spring容器管理的对象 ----name属性：给被管理的对象... ----class属性：被管理对象的完整类名 ----id属性：与name属性一模一样。名称不可重复，不能使用特殊字符 ... -
动态创建Dom元素，并设置属性和类----JS&JQ
2016-04-09 12:17:41直接上的代码HTML代码<div class="pc-container"> </div>JS代码var container = $('.pc-container'); $('<img>').attr({ src:'images/star.png' }).css({ top:'50px', lef -
【2017-03-31】JS-DOM操作：操作属性、彩虹导航栏、定时器、操作内容、创建元素并添加、操作相关元素...
2017-03-31 22:25:00一、操作属性 1、什么是属性： <div class="div" id="div1" ...其中class id style 都是这个div的属性 <input type="button" value="这是一个按钮" disabled="disabled" aa="haha" /> disabled="dis... -
css3——操作元素类样式（classList）、自定义属性（dataset）
2019-01-28 10:31:40首先自己创建五个class名（orange,red,yellow,blue,change），样式自定义 &lt;ul&gt; &lt;li&gt;1&lt;/li&gt; &lt;li class="blue"&... -
JQ DOM元素 创建 添加 删除
2018-08-08 08:56:00创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); // 创建文本节点 $('hello world'); // 结合更实用 $('<p class="wow">hello world... -
jQuery节点创建与属性的处理
2017-05-28 19:09:38创建元素节点： 可以有几种方式，后面会慢慢接触。...与创建元素节点类似，可以直接把文本内容一并描述$("我是文本节点</div>")...与创建元素节点同样的方式$("<div id='test' class='aaron'>我是文本节点</div>")$("<div
