web 前端简述

南科1号

已于 2022-02-07 16:41:53 修改

阅读量503

点赞数

分类专栏： javascript 文章标签： jquery vue.js javascript

于 2022-02-07 11:15:38 首次发布

本文链接：https://blog.csdn.net/sgx0554/article/details/122806041

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html 内容

css 样式 标签 p1 ul li 类名 .c1 .c2 ID名 #id1 #id2 Name名

p1 ul pl下所有层的ul p1>ul p1下第一层的ul

pl + ul p1的第一个兄弟节点 p1~ul p1的所有兄弟节点

javascript 交互

获取元素 document对象的getElementById ，getElementByName ，getElementByTagName，getElemengByClassName

修改元素内容 getElementById ('id1').innerHTML innerText textContent来读写

修改元素属性 getElementById ('id1').setAttribute(name,value) 写属性 getAttribute(name) 读属性 removeAttribute 删除属性

修改元素样式 getElementById ('id1').style.background 等来修改样式，也可以提前设置好样式，直接为类增加样式。getElementById ('id1').classList .add() 增加类名 remove删除类名 toggle() 切换类 item() 类集合，通过index索引，contains是否包含

jQuery

对Javascipt的一次封装，要使用直接引用本地或者在线的jQuery库即可

JQuery对象$(document)是对DOM对象document 的一层包装。其中$() 来构造一个JQuery对象

获取元素 $(选择器 ) 包括基本选择器层级选择器过滤选择器内容选择器可见选择器属性选择器子元素选择器表单选择器

修改元素

遍历元素 each方法

元素过滤和查找 过滤 find， parents，parent ,slibings , next ,pre 等查找 eq fliter hasClass is has

修改元素内容 包含标签 .html 纯文本 .text var ele=$('div') ele.html='' ele.text=''

修改元素属性 $().attr(name,value)

对象一次增加多个属性，可以通过增加类来实现，$() addClass(cn) removeClass(cn) toggleClass(cn) hasClass(cn)

修改元素样式 ele.css({'width':'200px','height':'200px'});

增加元素$('<h2 align="center">test</h2>').appendTo('body') appendTo方法来提交一个JQuery对象。

元素替换 replaceWith() replaceAll()

元素删除 empty remove detach

元素复制 clone(false) clone(true)

元素操作(事件） 常用事件表单事件键盘事件鼠标事件浏览器事件

页面加载事件 $(document).ready(function(){}) 简写为$(function(){} )

事件绑定和切换 on off one trigger triggleHandler hover

元素动画效果基本特效滑动特效淡入淡出

自定义动画

操作Ajax

$.ajax({

type:'POST',

url:'index.php',

data:{'name':'sgx','age':46},

success:function(msg){

document.write('欢迎你'+JSON.parse(msg).name);

console.log(msg);

}

})

index.php

<?php

echo json_encode($_POST);

VUE

VUE. js.是一款流行的JavaScript前端框架，旨在更好地组织与简化Web开发。解决数据绑定问题

首先下载，引入类似于JQuery .

查看代码

<body>

<div id="app">

  {{ a }}             <!-- 双大括号数据绑定 -->   

</div>

<script>

//设置数据

var data={a:1};

//创建Vue对象

var vm = new Vue({

  el: '#app',

  data: data,

  

  beforeCreate:function(){

   console.log('before create')

  },

  

  created:function(){

   console.log(' created')

  }      

});

//访问数据的三种方式

 data.a='hi ...sgx';

 vm.a='test'

 vm.$data.a='test 2'

 //设置观察事件，查看变量改变前后的值

 vm.$watch('a',function(newVal,oldVal){

 console.log(newVal,oldVal);

 })

</script>

</body>

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <cqh v-for="item in items" v-bind:testcomponent="item">{{item}}</cqh>
    <li v-for='item in items'>{{item}}</li>
</div>
<script>
    /*定义一个vue组件*/
    Vue.component("cqh", {
        props: ['testcomponent'],   //这个testcomponent必须全部是小写
        template: '<li>{{testcomponent}}</li>'
    });
	
    let vm = new Vue({
        el: "#app",
        data: {
            items: ["Java", "Linux", "前端"]
        }
    });
	
	Vue.createApp(App).mount('#app');
</script>
</body>
</html>

Axios :前端通信框架;因为Vue 的边界很明确，就是为了处理DOM,所以并不具备通信能
力，此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用jQuery提供的AJAX通信功能;

Node.js:是一个让 JavaScript运行在服务器端的开发平台，与PHP、JSP、Python、Per1、Ruby的“既是语言，也是平台”不同，Node. js.使用JavaScript进行编程,运行在JavaScript引擎上(V8)