1. DOM的增删改建
// 1.DOM元素加载 2、图片资源
//1.等待DOM和图片资源加载完成之后才调用次方法
//2.事件覆盖现象
//程序入口函数
window.onload = function () {
// alert(1);
//
// var a = 10;
// alert(a);
function $(idName) {
return document.getElementById(idName);
}
// var oBtn = document.getElementById('btn');
// var oDiv = document.getElementById('box');
$('btn').onclick = function () {
//1.DOM的创建
var oP = document.createElement('p');
//2.DOM的追加 父.appendChild(子)
$('box').appendChild(oP);
//3.DOM的修改
oP.innerText = 'alex';
oP.id = 'p1';
var oA = document.createElement('abc');
oA.innerText = '321';
$('box').insertBefore(oA,oP)
2.BOM对象
<a href="http://www.baidu.com" target="_blank">百度</a>
<button id="btn">跳转</button>
<script>
console.log(2);
//history模块 hash模式
///xxxx/index
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
//需求：打开百度
// console.log(location);
// location.href = 'http://www.baidu.com';
// open('http://www.baidu.com','_self');
// open('http://www.baidu.com','_blank')
window.location.reload();
}
3. 定时器
//用定时器 先清定时器 再开定时器
/*
//定时器 一次性定时器 js单线程
//1.回调函数 2.时间 毫秒1000毫秒=1秒
//不等待 解决数据阻塞
var timer = setTimeout(function () {
console.log('走动了');
},1000);
console.log('dddd');
console.log(2);
//history模块 hash模式
///xxxx/index
var oBtn = document.getElementById('btn');
oBtn.onclick = function () {
//需求：打开百度
// console.log(location);
// location.href = 'http://www.baidu.com';
// open('http://www.baidu.com','_self');
// open('http://www.baidu.com','_blank')
//全局刷新 刷新整个页面
window.location.reload();
// clearTimeout(timer);
4. jquery
//1.入口函数
console.log($(document));
// console.log(jQuery);
//当文档加载时候 调用此方法
// $(document).ready(function () {
//
//
//
//
// });
$(function () {
//jquery转js
console.dir($('.box')[0])
$('.box').click(function () {
// $('.box').css('background-color','green');
// $('.box').css({
// 'width':500,
// 'backgroundColor':'green'
// });
//this指的是js对象
console.log(this)
// js转换jquery对象
$(this).css('background-color','green');
})
6. jquery的基本选择器
<div class="box"><p>alex</p></div>
<div class="box">tailiang</div>
<input type="text">
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
// var oBoxs = document.getElementsByClassName('box');
// console.log(oBoxs);
var arr = [1,2];
console.log(arr);
//类选择器 类似数组 数组的索引 长度length 但是原型的方法不一样： 伪数组
console.log( $('.box'));
// $('.box').push('4');
// console.log( $('.box'));
//jquery 内部遍历 对jsdom对象添加点击事件
$('.box').click(function () {
//对值得操作
// alert(this.innerText);
// alert($(this).text());
// alert($(this).html());
$(this).text('nvshen');
});
//设置 获取
// $('input').val('123');
7.高级选择器
<ul class="lists">
<li>
alex
</li>
<li>
alex2
</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//链式编程
$('ul li').css({
'color':'red'
}).click(function(){
console.log($(this).text().trim())
})
});
8. 基本过滤器
<body>
<ul>
<li>alex1</li>
<li>alex2</li>
<li>alex3</li>
<li>alex4</li>
<li>alex5</li>
<li>alex6</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//基本过滤选择器
$('ul li:eq(0)').css('color','green');
$('ul li:gt(1)').css('color','red');
$('ul li:first').css('color','yellow');
});
9.筛选方法
$(function () {
//筛选方法
// $('ul').find('.item3').css('color','red');
//获取的亲儿子
$('ul').children().css('color','green');
//获取的亲爹
$('ul').parent().css('background','yellow');
$('ul li').eq(2).css('color','red');
});
10.sibling选项卡
<body>
<ul>
<li>
<span>热门</span>
</li>
<li><span>洗衣机</span></li>
<li><span>洗衣机</span></li>
<li><span>冰箱</span></li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('ul li span').eq(0).addClass('active');
$('ul li').click(function () {
//siblings 除了它自己之外的兄弟元素
// $(this).children().addClass('active').parent().siblings('li').children().removeClass('active');
$(this).find('span').addClass('active').parent().siblings('li').children().removeClass('active');
})
});
11.类的操作
$(function () {
$('#box').addClass('active tt uu ii');
$('#box').removeClass('active tt');
})
12.标签属性操作
$(function () {
//设置单个属性
// $('img').attr('src','./timg.jpg');
//设置多个属性
$('img').attr({
id:'img1',
src:'./timg.jpg',
// 除了class属性 其它的属性都可以设置
title:'啊 美女'
});
//获取
console.log( $('img').attr('title'));
//删除标签属性
$('img').removeAttr('id title');
//标签属性
console.log($('#nan').attr('checked'));
//获取jsDOM对象的属性
console.dir($('#nan')[0])
console.log($('#nan').prop('checked'));
console.log($('#nv').prop('checked'));