按钮 | 易学教程

bootstrap后台界面前端实例

阅读更多关于 bootstrap后台界面前端实例

1、前端效果展示 2、<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> SmartAdmin WebApp - category_1 - SmartAdmin v4.0.2 </title> <meta name="description" content="SmartAdmin WebApp"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="msapplication-tap-highlight" content="no"> <link rel="stylesheet" media="screen, print" href="../../../static/ui/css/vendors.bundle.css"> <link rel="stylesheet"

JQuery练习题

阅读更多关于 JQuery练习题

练习题： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery选择器筛选器练习</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <style> .my-padding { padding: 10px 0; } .my-dark { background-color: #f5f5f5; } .footer { background: #111; font-size: 0.9em; position: relative; clear: both; } .my-white { color:

（day48作业）jQuery+Bootstrap练习题

阅读更多关于（day48作业）jQuery+Bootstrap练习题

目录一、图书管理系统页面搭建二、jQuery练习题一、图书管理系统页面搭建 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <div class="row">  <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display -

jQuery 操作DOM

阅读更多关于 jQuery 操作DOM

上一篇jQuery笔记中介绍了选择器，会了选择器之后咱就可以操作DOM了，jQuery操作DOM也是很简单的。 1 获取我们一般常用的获取是： text()：获取/修改DOM元素中的文本内容。 html()：获取/修改DOM元素中的所有内容，包括HTML的标记。 val()：获取/修改表单字段的值。 attr()：获取/修改DOM元素的属性。 <!DOCTYPE html> <html> <head> <title>learn javascript</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <p id="p">段落中有<b>B标签</b></p> <p>表单字段：<input id="input" type="text" value="ohoho~~"></p> <a href="https://www.cnblogs.com" id="a">链接</a> <br /> <button id="btn1">显示text</button> <button id="btn2">显示html</button> <button id="btn3">显示val</button> <button id="btn4">显示attr<

JavaScript四（DOM编程）

阅读更多关于 JavaScript四（DOM编程）

一.绪论 DOM是文档对象模型（Document Object Module）的简称，借助DOM模型，可以将结构化文档，转换成DOM树，程序可以访问，修改，增加，删除树的节点。程序通过操作DOM树时，结构化文档也会随之动态改变。 DOM并不是一种技术，它只是访问结构化文档的一种思想，各种语言都有自己的DOM解释器。 DOM为常用的HTML元素提供了一整套的继承体系，从页面的document对象到每个常用的HTML元素，DOM模型都提供了对应的类，每个类都提供了相应的方法来操作元素本身，属性及其子元素。DOM模型允许以树的形式操作HTML文档的每一个元素。 HTML中，Node，Document，Element，HTMLELement都是普通HTML元素的超类，不直接对应于HTML页面的控件。但他们所包含的方法也可被其他页面元素调用。二.访问HTML元素 1.根据Id访问HTML元素 document.getElementById(idVal): 返回文档中Id属性为idVal的HTML元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>根据Id访问HTML元素</title> <script type="text/javascript"> var accessById =

JavaScript之DOM文档对象模型--对HTML元素的访问操作

阅读更多关于 JavaScript之DOM文档对象模型--对HTML元素的访问操作

1、DOM是文档对象模型（Document Object Model）的简称。当网页加载时，可以将结构化文档在内存中转换成对象树。简单的说，DOM并不是一种技术，而是一种访问结构化文档的思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。 2、DOM模型中的节点--文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：（1）元素节点：各种标签就是这些元素节点的名称，如<ul>、<p>等；（2）文本节点：文本节点总是被包含在元素节点的内部；（3）属性节点：一般用来修饰元素节点的就称之为属性节点。 3、DOM对HTML元素的访问操作：为了动态地修改HTML元素，须先访问HTML元素。DOM主要提供了两种方式来访问HTML元素：（1）根据ID访问HTML元素--通过document对象调用getElementById（）方法来查找具有唯一id属性值的元素；如下例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="name" content="content"> <title>DOM-使用getElementById方法查找元素</title> <script type="text/javascript"> function

dom对html元素访问操作2

阅读更多关于 dom对html元素访问操作2

一、getElementById() 方法来查找具有唯一 id 属性值的元素。例如 function showContent(){ var myDiv,txtName,content; with(document){ myDiv=getElementById("myDiv"); txtName=getElementById("txtName"); content=getElementById("content"); } alert(myDiv.innerHTML+"\n"+txtName.value+"\n"+content.value); } 二、getElementsByTagName 返回当前节点的具有指定标签名的所有子节点例如： function showCount(){ alert(document.getElementsByTagName("li").length); } 查询所有li的长度三、getElementsByClassName 查询class的名称 var arr=["-670px","-520px","-370px","-210px","-63px"]; function dianji(obj){ var gunlun1=document.getElementById("gunlun1"); var num=obj.getAttribute(

jQuery 初识筛选器属性选择器

阅读更多关于 jQuery 初识筛选器属性选择器

---------------------------大事使我们惊讶，小事使我们沮丧，久而久之，我们对这二者都会习以为常。一 jQuery是什么？［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。回到顶部二什么是 jQuery 对象？ jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() 意思是指：获取ID为test的元素内的html代码

jQuery属性-attr()方法

阅读更多关于 jQuery属性-attr()方法

定义和用法 attr() 方法设置或返回被选元素的属性值。根据选择 attr()方法不同的参数，工作方式也会有点差异。返回属性值-返回被选元素的属性值。　　语法 $(selector).attr(attribute) 参数描述 selector 被选元素 attribute 规定要获取被选元素(selector)的属性例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>learning notes</title> <script src="js/jquery.min.js"></script> </head> <style> body { color: #FFF; } </style> <body> <a href="http://www.cnblogs.com/">博客园</a> <button type="button">attr</button> <script> $(function(){ $('button').click(function(){ alert($("a").attr("href")); }); }); </script> </body> </html> a元素为被选元素，被选属性为 href 属性，所以最终输出为a元素的 href 属性 http:/

初步学习jquery学习笔记（二）

阅读更多关于初步学习jquery学习笔记（二）

jQuery事件 jquery是为事件处理而设计的什么是事件? 页面对不同访问者的相应叫做事件。事件处理程序指的是html中发生某些事件所调用的方法实例: 在元素上移动鼠标选取单选按钮点击元素触发:产生事件的过程，比如点击按钮常见的dom事件鼠标事件键盘事件表单事件文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter keyup focus scroll mouseleave blur unload hover jQuery中事件以及语法在jquery中，大多数dom事件都有一个等效的方法页面中指定一个点击事件 $("p").click();//指定一个点击事件 //定义触发后的事件 $("p").click( function(){ //动作触发后执行的代码 } ) 常见jQuery中事件以及方法 $(document).ready() $(doucument).ready()方法允许我们在文档完全加载后执行函数) click() click()方法是当按钮点击事件被触发会调用的一个函数，该函数在用户点击html元素的时候执行 $("p").click(function(){ $(this).hide(); }) dbclick() 当双击元素时候

订阅按钮