- 博客(41)
- 收藏
- 关注
RSS订阅原创 JQ-小练习
$(function(){ $(".checkall").change(function(){ $(".j-checkbox,.checkall").prop("checked",$(this).prop("checked")) }) $(".j-checkbox").change(function(){ /* console.log($(".j-checkbox:checked")); */ if($(".j-checkb
2020-08-27 17:12:14
190
原创 JQ-元素语法-01
1.html，text ,val的查询和使用<body> <div> <em>我是内容</em> </div> <input type="text" value="请输入内容"> <script> console.log($("div").html()); $("div").html("123") console.log($("
2020-08-27 17:09:33
156
原创 JQ-动画的nav-01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{width: 100px;h
2020-08-26 22:36:54
173
原创 JQ-样式语法-01
1.修改样式的时候参数可以传对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquer
2020-08-26 22:29:53
159
转载 JQuery-迭代选择器-02
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery.min.js"><
2020-08-21 22:30:31
298
原创 JQuery-基础选择器语法-01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery.min.js"><
2020-08-21 22:27:19
157
原创 ajax-01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ajax读取本地内容</title></head><body> <script&
2020-08-20 16:54:13
132
原创 Javascript-放大镜效果-01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #small{width: 381p
2020-08-20 15:41:30
124
原创 Javascript-类应用-02
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style type="text/css"> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-
2020-08-19 16:54:59
193
原创 Javascript-类操作的封装-01
//类的操作 /* 定义一个函数，用来向一个元素中添加指定的class属性值 参数： obj 要添加的class属性的元素 cn 要添加的class值 */ function addClass(obj,cn){ //检查obj中是否有cn if(!hasClass(obj,cn)){ obj.clas
2020-08-19 16:53:24
132
原创 Javascript-定时器-切图01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = f
2020-08-18 22:44:57
153
原创 Javascript-定时器+获取样式的封装函数-应用于简单样式动画
/* *参数 *obj:要执行动画的对象 *attr:要执行动画的样式，比如left，top,width(传字符串参数的时候要带引号) *target:执行动画的目标位置 *speed:一定的速度（整数向右移动，负数向左移动） *callback毁掉函数将在动画执行完毕后执行 */ function move(obj,attr,target,speed,callback){
2020-08-18 11:48:55
158
原创 Javascript-定时器-01
setInterval(fuction(){},time);setInterval(函数对象，间隔时长)搭配方法：clearInterval(定时器名)clearInterval(timer);document.onkeydonw = fuction(){};dicument.onkeyup = fuction(){};应用练习：<!DOCTYPE html><html lang="en"><head> <meta charset=
2020-08-17 16:56:31
116
原创 Javascript-键盘事件-01
1.注意事项：event = event | |window.event；处理浏览器兼容属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&
2020-08-17 11:47:56
141
原创 Javascript-事件鼠标-01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{width: 100px
2020-08-15 17:38:01
110
原创 Javascript-事件委派-01
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> window.onload = f
2020-08-15 17:36:53
171
原创 Javascript-DOM查询语法集
元素节点应用：<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/
2020-08-13 11:55:10
155
原创 JavaScript HTML DOM 集合-01
1.HTMLCollection 对象getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象是类数组的 HTML 元素列表（集合）。下面的代码选取文档中的所有<p>元素：var x = document.getElementsByTagName("p");该集合中的元素可通过索引号进行访问。如需访问第二个 <p> 元素，可以这样写：y = x[1];HTML HTMLCollection 长度
2020-08-13 09:52:42
190
原创 Javascript-HTML-DOM-02
1.修改内容：改变 HTML 内容修改 HTML 文档内容最简单的方法是，使用 innerHTML 属性。如需修改 HTML 元素的内容，请使用此语法：document.getElementById(id).innerHTML = new text本例修改了 元素的内容：<html><body><p id="p1">Hello World!</p><script>document.getElementById("p1")
2020-08-12 17:07:57
120
原创 JavaScript-DOM-01
JavaScript HTML DOM 元素:如何查找和访问 HTML 页面中的 HTML 元素。1.通过 id 查找 HTML 元素DOM 中查找 HTML 元素最简单的方法是，使用元素的 id。本例查找 id=“intro” 的元素：var myElement = document.getElementById("intro");如果元素被找到，此方法会以对象返回该元素（在 myElement 中）。如果未找到元素，myElement 将包含 null。2.通过标签名查找 HTML 元
2020-08-12 17:00:51
91
原创 JavaScript-事件-14
JavaScript 事件:HTML 事件是发生在 HTML 元素上的“事情”。当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。下面是 HTML 事件的一些例子：HTML 网页完成加载HTML 输入字段被修改HTML 按钮被点击通常，当事件发生时，用户会希望做某件事。JavaScript 允许您在事件被侦测到时执行代码。<!DOCTYPE html><html lang="en"><head>
2020-08-12 11:49:49
124
原创 Javascript-正则表达式-13
什么是正则表达式？1.var reg = /模式（pattern）/修饰符var reg = /[A-Z]/;表示不区分大小写var reg = /[0-9]/；任意数字var str = "1a2b3c4d5e6f7BA" result = str.match(/[a-z]/gi); console.log(result);一个正则表达式可以设置多个匹配模式，且顺序无所谓...
2020-08-11 17:36:39
103
原创 Javascript-数组的去重+排序规则-12
<script> var arr = [1,2,3,2,2,5,2,1,11,64,3,4]; for(i = 0;i<arr.length;i++){ for(j = i+1;j<arr.length;j++){ if(arr[i] == arr[j]){ arr.splice(j,1); j--;
2020-08-11 16:30:13
101
原创 Javascript-slice-11
1.slice() 方法用数组的某个片段切出新数组。slice() 可接受两个参数，比如 (1, 3)。该方法会从开始参数选取元素，直到结束参数（不包括）为止。 var arr = ["huangyihu","weiyin","lanzhan"]; var a = arr.slice(1,3); console.log(a)执行结果var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citr
2020-08-11 14:40:07
181
原创 Javascript-11-Array
1.向数组的最后一个位置添加元素语法：（利用array的length属性）var arr = new Array()/[];arr[arr.length] = 值；2.数组常用的4个方法push:push() 方法（在数组结尾处）向数组添加一个,或者多个新的元素：var arr = ["huangyihu","weiyin","lanzhan"]; arr.push("xiaoqueque","zhuzhu"); console.log(arr);pop:
2020-08-11 12:09:51
260
原创 Javascript-09-this
this:1.以函数调用的形式调用时，this永远是window2.以方法的形式调用，this就是调用方法的那个对象<script> function fun(){console.log(this.name)}; var obj = new Object(); obj.name = "huangyihu"; obj.say= fun; obj.say(); var obj2 = new Obje
2020-08-11 09:12:24
116
原创 Javascript_08
方法：函数也可以作为i一个对象的属性保存那么我们将这个函数为这个对象的方法（对象.属性+（））调用这个函数就说明调用对象的方法（即属性名） <script> var obj = new Object(); obj.name = "haungyihu"; obj.say= function(){console.log(obj.name)}; console.log(obj.say); obj.say();
2020-08-10 22:29:18
107
原创 Javascript-07
in 运算符：可以通过该运算符进行检查一个对象中是否有指定的属性如果有则返回Ture,没有则返回False语法 ：“属性名” in 对象名注意：属性名一定要加双引号var obj = new Object();obj.name = "孙悟空"; console.log("name" in obj)...
2020-08-10 16:38:47
115
原创 JavaScript 作用域-05
1.变量的提前声明：使用var关键字声明的变量，会在所有代码执行前声明。但是如果声明变量时，没有使用var关键字，则不会提前声明。2.函数的提前声明：使用函数声明形式创建的的函数 function 函数名（）{}它会在所有代码执行之前声明就被创建所以可以在函数声明前调用fun();function fun(){console.log("我是一个fun函数")}使用函数表达式声明的函数，不能提前调用，有声明但是没有赋值...
2020-08-10 14:39:36
84
原创 JavaScript 对象-04
枚举对象中的属性：var person = { firstName: "Bill", lastName : "Gates", id : 678, fullName : function() { return this.firstName + " " + this.lastName;}
2020-08-10 11:59:14
107
原创 JavaScript 对象-03
JavaScript 对象:1.如果把一个对象赋值给另外一个对象则是把改对象的地址进行引用对新的对象做修改，是对地址的值做修改var obj = new Object(); obj.name = "huangyihu"; var obj2 = obj; obj2.name = "weiyin"; document.write(obj.name) document.write(obj2.name)2.创建函数对象的方法：一、声明
2020-08-10 10:33:20
102
原创 JavaScript 对象-02
访问对象属性：objectName["propertyName"]objectName.propertyName请不要把字符串、数值和布尔值声明为对象！如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：var x = new String(); // 把 x 声明为 String 对象var y = new Number(); // 把 y 声明为 Number 对象var z = new Boolean(); /
2020-08-08 22:32:58
103
原创 JavaScript-01
JavaScript 对象(基本语法):1.对象也是变量。但是对象包含很多值。这段代码把多个值（porsche, 911, white）赋给名为 car 的变量：var car = {type:"porsche", model:"911", color:"white"};值以名称:值对的方式来书写（名称和值由冒号分隔).JavaScript 对象是被命名值的容器.（JavaScript 对象中的）名称:值对被称为属性.var person = {firstName:“Bill”, lastN
2020-08-08 22:11:45
114
原创 BootStrap-03
Active state：<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a><a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>注意：Make buttons loo
2020-08-07 15:55:16
120
原创 BootStrap-02
Buttons1.Outline buttons:In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones to remove all background images and colors on any button.<button type="button" class="btn
2020-08-07 15:50:24
145
原创 BootStrap-01
1.ContainersAll-in-one:Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each breakpoint.（直接调用这个就可以自适应屏幕sm ms lg…）<div class="container"> <!-- Content here --></div>2.FluidUse
2020-08-07 15:28:33
120
原创 flex
flex(适合用来做===>固定+自适应的布局)主要运用flex-grow属性：取值（0-1+）当存在固定宽度时，会把其他空白区域当不存在固定宽度时，可以自适应屏幕 <style> *{margin: 0px;padding: 0px;} #main{display: flex;} #left{width: 200px;height: 200px;background: red;} #center{flex-grow
2020-08-06 15:00:10
109
原创 flex
float浮动脱离文档流，延迟父容器靠左或靠右进行排列。 left、right、nonefloat注意点 只会影响后面的元素。 内容默认提升半层。 默认宽根据内容决定。 换行排列。 主要给块元素添加，但也可以给内联元素添加。如何清除浮动？`.clear{content:"";display:block;clear:botj;}` 上下排列：clear属性，表示清除浮动的，left、right、both 嵌套排列：
2020-08-06 10:52:45
104
原创 transform
transform(变形属性)translate : 位移 translateX translateY translateZ ( 3d )scale : 缩放 （**值是一个比例值，正常大小就是1，会已当前元素中心点进行缩放**） scaleX scaleY scaleZ (3d)rotate : 旋转 （ **旋转的值，单位是角度 deg** ） rotateX (3d) rotateY (3d) rotateZ
2020-08-05 17:41:04
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人