bootstrap样式的链接、js中DOM的使用、jQuery的取代js的DOM、解析json的字符串、Ajax向网站的访问获取返回封装和展示

最新推荐文章于 2024-04-05 13:35:41 发布

穿着红色卫衣的程序猿

最新推荐文章于 2024-04-05 13:35:41 发布

阅读量530

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/guozhe888/article/details/112380939

版权

笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

一、bootstrap的使用

1.概念

bootstrap3就是一堆样式定义，事先定义很多漂亮的风格

2.通过link标签引入bootstrap

<link 
rel="stylesheet" 
href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

一般在HBuilderX里创一个css目录,将bootstrap内容复制到bootstrap.min.css更方便简洁
.min，压缩文件，把所有内容放在一行上 ,压缩是格式，空格，换行，缩进tab都没有（下载快）~~bootstrap.css 正常文件（方便开发者看)

3.三种引用样式方式

 a. 私有，在元素上定义 <div style="color:red;"></div>
 b. 页面公用,在<head>标签中<style>
 c. 它可以在多个文件中共享 <link>标签

4.常用内部样式

<input type="text" class="form-control" id="name" autocomplete="on" placeholder="请输入姓名..." />
class=“form-control”
控制输入框的基本样式
autocomplete=“on”
on默认自动填充,off关闭,输入框内的记忆提示
placeholder=“请输入姓名…”
占位的文字,光标放到输入框就没有了
type=“text”/“number”/“radio”/“checkbox”
文本/光数字/单选框/复选框
<button class="btn btn-primary" onclick="doSubmit()">
οnclick=“doSubmit()”
按钮标签 onclick事件，点击是才触发
<button class="btn btn-primary">修饰提交按钮
<button class="btn btn-danger">修饰取消按钮

二、前端技术三剑客

1）html 展示页面
2）css 样式表，页面美化 ,css升级bootstrap，再升级elmentui（饿了吗）替代
这两个完成静态网站
3）javascript 和后台交互
这三个完成动态网站

三、JavaScript

1.概述

ES6是ECMA Script 6.0的简称,针对web页面开发语言，脚本语言,
javascript 弱语言 > es6标准（跳出脚本语言，迈向强语言）
typescript 强语言 Vue主流 Vue3.0使用typescript
DOM，用的多，document抽象，把整个页面变成document，api升级jQuery，再升级vue框架

2.DOM document object model文档对象模型

特点:

1.它把html一个页面进行封装,把html中每个元素（h1，label，input，button）都变成一个对象,形成一个dom树
2.可以利用js它提供api，就可以通过这套程序来访问页面元素
3.document.getElementsByTag(“h1”)–获取到h1对象，在浏览器的控制台上,
它就可以获取这个对象内容：document.getElementsByTag(“h1”)[0].innerText
4.js动态语言，所有变量类型var，解析到这句时，根据这个变量赋值的类型，来决定。类型还可以动态变化
5.js的var是全局的,es6的 let有更小的生命周期(作用域)
6.es6中有常量 const ,不可以再赋值
7.es6提供箭头函数,如果方法体只有一句话,大括号可以省略

var es6f0 = () =>{alert("abc es6")};
   es6f0();
   var es6f1 = (x) => alert(x*x);
   es6f1(10);

3.BOM browser object model 浏览器对象模型

封装抽象浏览器对象，非常少用

4.常用语句

msg.innerText innerHTML

document.getElementsByTagName
获取某个Tag标签的对象
document.title
获取网页页面的标题
按钮标签 onclick事件，点击是才触发

<input class="form-control" placeholder="请输入密码..." type="password" name="password" id="password" />
function doSubmit(){
var username = document.getElementById("username");//通过id标签获取对应值
 console.log(username.value);
 }

<div class="msg">登录成功</div>
function doSubmit(){
var msg = document.getElementsByClassName("msg")[0];//通过class标签获取对应值
msg.innerHTML="<font color='red'>登陆成功,欢迎:"+username.value+"</font>";
console.log(msg.innerText);
}

四、jQuery

1.下载jQuery.js文件

2.加入页面

<script src="jquery.min.js>

3.作用

利用它来实现dom操作，替代javascript基本函数–$(选择器).执行的动作
前者js,后者jquery

document.getElementById("username")
$("#username")

document.getElementsByClassName("msg")
$(".msg")

msg.innerText	 msg.innerHTML
$(".msg").text(); $(".msg").html();
.value  ;.val();

4.jQuery和js相比

1）简写，代码量急剧下降
2）选择器，快速查找页面上的元素，非常丰富
3）jquery提供一套新的方法或者属性（不好，学习成本，需要单独记忆）

js和jQuery写法差异：选择器

a. 标签
document.getElementsByTagName $(“h1”)
b. class修饰
document.getElementsByClassName $(".title")
c. name修饰
document.getElementsByName $("[input:name=‘username’]")
d. id修饰
document.getElementById $("#price") 推荐方式

5.常用

1.关于按钮button的操作

//自定义一个js的函数
  function zfbPay(){
   //1.把按钮消失元素.hide()
   //$("#zfbPay").hide();
   //2.把按钮禁止,attr/prop ("disabled", true)两个都可以
   $("#zfbPay").attr("disabled", true);
   //$("#zfbPay").prop("disabled", true);
   $("#zfbPay").text("您支付成功，不要再次点击，请稍后");
   $("#zfbPay").css("color","red");
  }
   //后期绑定,利用jQuery代码给上面的按钮加一个事件
   $("#wxPay").click(function(){
    //$("#wxPay").hide();
    $(this).hide();
   })

2.关于复选框全选的操作

 <body>
  <div>
   喜欢的颜色:
   <input type="checkbox" id="ckColor"/>红色
   <input type="checkbox" id="ckColor"/>黄色
   <input type="checkbox" id="ckColor"/>蓝色
   <input type="checkbox" id="ckColor"/>绿色
  </div>
  <div style="margin: 10px;">
   <button id="selectAll">全选</button>
   <button id="unSelectAll">取消</button>
  </div>
 </body>
 <script>
  $("#selectAll").click(function(){
   $("[id=ckColor]").prop("checked",true)
  })
  $("#unSelectAll").click(function(){
   $("[id=ckColor]").prop("checked",false)
  })
 </script>

五、json

1.概述

JSON使用字符串来表现一组数据：
1）[]数组
2）{}一条记录
3）k,v 保存值，通过k获取v
把json中的数据进行解析，把它的价格和编号获取出来,javascript自身提供，浏览器直接支持，

2.特点

var jsonobj = JSON.parse(jsonstr)转换成js对象
var jsonstr2 = JSON.stringify(jsonobj)转换成字符串

3.解析JSON获取的字符串

<body>
  <h1>解析京东获取商品价格的json字符串</h1>
  <div>
   商品的编号:<span id="id"></span>
  </div>
  
  <div>
   商品的价格:<span id="price"></span>
  </div>
 </body>
 <script>
  var jsonstr = '[{"p":"5999.00","op":"5999.00","cbf":"0","id":"J_100009077449","m":"6499.00"}]';
  var jsonobj = JSON.parse(jsonstr);
  var price = jsonobj[0].p;
  var id = jsonobj[0].id.substring(2);
  $("#id").text(id).css("color","red");
  $("#price").text(price).css("color","blue")
 </script>

六、ajax

1.概述

必须访问外网网站，访问京东，没有网络这个案例是做不出
h5+css3 = json = ajax = 京东网站

2.作用

使用ajax的技术，可以发起请求request，
连接到京东后台（java，springmvc），到数据库去处理，到数据库中查询这个商品的价格信息，
返回响应response，转换json字符串，
拿到网站返回json就解析json字符串，最终价格展现在网站上。

3.Ajax常用属性

$.ajax( 一堆参数，常用有8个 )
1）async 同步，异步标识，默认值：true
2）type，请求request有两种形式：GET/POST
3）url，请求连接：https://p.3.cn/prices/mgets
4）data，参数，?skuIds=J_100009077449
5）contentType，请求类型：application/json;charset=utf-8不会中文乱码了
6）dataType，返回类型 jsonp 京东网站要求
7）success(data){ data.price }，成功请求，返回结果封装data js对象
8）error(e){ e.status状态号，e.responseText }

4.实现代码

<body>
  <h1>解析京东获取商品价格的json字符串</h1>
  <div>
   商品的编号:<span id="id"></span>
  </div>
  <div>
   商品的价格:<span id="price"></span>
  </div>
 </body>
 <script>
  //发起ajax请求,{}参数集合,
  $.ajax({
   async:true,       //异步
   type:"POST",      //请求类型POST
   url:"https://p.3.cn/prices/mgets", //请求地址
   data:{        //请求参数
    "skuIds":"J_100009077449"  //参数格式k:v
   },
   contentType:"application/json;charset=utf-8;",//请求类型
   dataType:"jsonp",     //返回类型
   success:function(data){    //成功返回，数据封装到data js对象中
    console.log(data)
    //解析返回值，把编号和价格在页面中展现
    var price = data[0];
    var id = data[0].id.substring(2);
    $("#id").text(id);$("#id").css("color","blue");
    $("#price").text(price);$("#price").css("color","red");
   },
   error:function( e ){    //错误返回，e代表错误状态好和异常信息
    console.log(e.status);
    console.log(e.responseText);
   }
  })
 </script>

穿着红色卫衣的程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap样式的链接、js中DOM的使用、jQuery的取代js的DOM、解析json的字符串、Ajax向网站的访问获取返回封装和展示

一、bootstrap的使用1.概念bootstrap3就是一堆样式定义，事先定义很多漂亮的风格2.通过link标签引入bootstrap<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">一般在HBuilderX里创一个css目录,将bootstrap内容复制到bootstrap.min.css更方便简洁.min，压缩文件，
复制链接

扫一扫

专栏目录