精华内容
下载资源
问答
  • <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>
    

    在这里插入图片描述

    展开全文
  • 一、获取页面元素 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 = '呵呵呵';

     

    展开全文
  • 1. 选择器在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的参数

    展开全文
  • 一、最基本的元素批量创建方法 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的文本框,并更改背景颜色。
    点击按钮后,禁用名为text01的文本框,并更改背景颜色

    如果喜欢本文本,欢迎收藏、转发、讨论、打赏。如果有小伙伴有更好的方法,欢迎评论留言,谢谢!

    展开全文
  • HTMLElement对象提供了一组属性,用来读取和修改被代表元素的数据 <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_...
  • <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>柴婷的测试</title> <style>... .my-class{ color:red; ...
  • Spring配置详解 Bean元素 使用该元素描述需要Spring容器管理的对象 name&id属性 别名,给被管理的对象起个名字,...class属性 被管理对象的完整类名 <bean name = "user" class = "bean.User"></b...
  • (一)操作属性 1.对象.setAttribute('属性名','属性值'... 例子:把所有class为div的,字体改为30px;  var a document.getElementById('div');  for(var i=o;i<a.length;i++){  a[i].setAttribute('st...
  • 通过无参构造创建 bean元素:使用该元素来描述Spring容器管理的对象 ----name属性:给被管理的对象... ----class属性:被管理对象的完整类名 ----id属性:与name属性一模一样。名称不可重复,不能使用特殊字符 ...
  • 直接上的代码HTML代码<div class="pc-container"> </div>JS代码var container = $('.pc-container'); $('<img>').attr({ src:'images/star.png' }).css({ top:'50px', lef
  • 一、操作属性 1、什么是属性: <div class="div" id="div1" ...其中class id style 都是这个div的属性 <input type="button" value="这是一个按钮" disabled="disabled" aa="haha" /> disabled="dis...
  • 首先自己创建五个class名(orange,red,yellow,blue,change),样式自定义 &amp;lt;ul&amp;gt; &amp;lt;li&amp;gt;1&amp;lt;/li&amp;gt; &amp;lt;li class=&quot;blue&quot;&...
  • 创建元素 // 创建元素节点 $('<p></p>'); // 创建属性节点 $('<p class="wow"></p>'); // 创建文本节点 $('hello world'); // 结合更实用 $('<p class="wow">hello world...
  • 创建元素节点: 可以有几种方式,后面会慢慢接触。...与创建元素节点类似,可以直接把文本内容一并描述$("我是文本节点</div>")...与创建元素节点同样的方式$("<div id='test' class='aaron'>我是文本节点</div>")$("<div

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 791
精华内容 316
热门标签
关键字:

创建元素创建class属性