模板开发必备的javascript操作DOM的基础合集-CFANZ编程社区

第一：选择符、选择器
不管是原生javascript还是jQuery（jq）都离不开选择器，当然还有css也离不开。
常见的选择器有
类选择

<div class="demo"></div>
//jQuery方法
$(.deme).函数
//原生javascript
document.querySelector(".demo");
//css选择类
.deme{}

标签选择


<div>内容</div>
//jQuery方法
$('div').函数
//原生javascript
document.getElementsByTagName('div');
//css
div{}

ID选择

//jQuery方法
$('#demo').函数
//原生javascript
document.getElementByID('demo');
//css
#demo{}

自定义属性选择

//jQuery选择类的方法
$("div[data-id='demo']")

通过类名获取自定义属性值

$('.demo')attr("data_id")

$(".demo").data("id");

//原生javascript
document.querySelector("div[data-id='demo']")

//获取自定义属性值【不推荐】
view.getAttribute("data-id")

//css更具自定义属性控制样式

div[data-id='demo']{}

或者

.demo[data-id='demo']{}

jQuery常用函数【web项目建议使用jQuery，牛逼的可以写原生javascript】

点击事件

$('.demo').on('click',function(){
//逻辑代码
}}
$(document).on('click','.demo',function(){
//逻辑代码
})

添加添加class或者删除class

//给class为demo的div添加一个 demo2
$('.demo').addClass('demo2')
//删掉demo2
$('.demo').removeClass('demo2')
//点击一次添加，再点击一次删除这样来回切换
$('.demo').toggleClass('demo2');
//删掉class为demo的div，注意这里是页面 上所有class为demo的元素
$('.demo').remove()

添加与删除html元素
在.demo内部添加元素
$('.demo').html('<p>添加了p标签</p>')
吧.demo内部的HTML清空
$('.demo').html('')

添加css

$('.demo').css({"width":"100px"})

判断class是否存在

if($(".demo").hasClass("demo1") ){
//存在
}else{
//不存在
}
//或者
if($(".demo").is("demo")  ){
 //存在
}else{
 //不存在
}

javascript基本语法简单介绍

变量：

用我自己的话来理解，变量就是“一个装东西的瓶子”

var a = 123；

意思就是我有一个瓶子名字叫做a，里面装了123，当你要用123的时候只要使用a就行了，

a = 321;

这个名字叫做a的瓶子我要重新拿来装321，这时候原来的123就会被倒掉，装上321，a就变成了321。

逻辑运算：

if(a==123){
   a = 321
}else{
   a = 456
}

解释：如果a里面装的是123，那么我就把他瓶子倒掉，重新装上321。不是123，那么我就装上456

if语句是判断的意思，就是我们平常说的是与否，例子：如果我写了这么多没人看我就会很伤心，有人看我就很高兴。

函数：

function wo(){
//代码集
}

就是把很多要用代码放到一块，也就是放在函数里，当你要用的时候直接调用这个函数，无效重复的去写这些代码，起到一个重复使用的功能,还可吧一些参数传到函数里，然后返回结果。

//例子
function jia(a,b){
 return a+b;
}
//调用
var c = jia(10,20);
var d = jia(500,400);

c 就是 30
d 就是 900

文章就简单的概括一下，跟多详细语法还需要大家多去百度一下，就写到这里了！！