day-15 DOM及 jquery

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对象

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');

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.高级选择器

$(function () {
//链式编程
$('ul li').css({
'color':'red'
}).click(function(){
console.log($(this).text().trim())
})

});

8. 基本过滤器

$(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选项卡

$(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'));