关于js对象与jq对象
js对象与jq对象的互相转换以及获取元素创建元素
.
.
关于jq插件的引用
www.bootcdn.cn –> 复制链接 jquery.min.js
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div>
<p>hello world</p>
<p>hello python</p>
<p>hello yueqi</p>
</div>
<script type="text/javascript">
/*
$ :
$() 参数类似于选择器的字符串
*/
//$('div p').css('color','red');
//将js对象转换成jq对象,放在$括号内即可
//$(document.body).css('background', 'orange');
var ap = document.getElementsByTagName('p');
ap[1].style.color='blue';
$(ap).css('color','#f00');
//将jq对象转换成js对象
/*
$('p').get(1).style.color='red';
$('p')[1].style.color='red';
$('p').get(1)就是转换成的js对象
筛选jq对象
$('p').eq(2).css('color','red')
*/
$('p').eq(2).css('color','blue')
//创建一个div节点,将其变成jq对象(添加一个div盒子)
$(document.body).append($('<div></div>'))
</script>
</body>
</html>
jq获取值与设置样式的函数
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id='box'>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
/*
获取jq对象的长度
.length / .size()
.html()
有参数: 相当于改变元素的html内容(innerHTML), 返回这个jq对象
无参数: 获取第一个元素的html内容
.text() 类似
*/
alert($('#box ul li').length) //5
// 对jq对象的方法操作
//先给li加上文本hello 在修改其样式
$('#box ul li').html('hello').css('color','aqua');
//当html()无参数时,获取第一个元素的html内容
alert($('#box ul li').html()) //1
alert($('#box ul li').eq(1).html()) //2 获取第二个元素内容
/*
.css()
一个参数:
参数为字符串:
获取第一个元素对应的该属性的值(getstyle)
参数为json:
设置多个属性
{
属性: 值,
属性:值,
属性:值
}
两个参数:
两个参数都为字符串
*/
var c = 'color';
$('#box ul li').css(c, 'red');
alert($('#box ul li').css('color'))
// rgb(255,0,0)
//修改设置对象的css样式
$('#box ul li').css({
color:'red',
fontSize:'25px',
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="box" class="nav" chs='haha' goudan='as'></div>
<input type="text" value="123456" id="txt">
<script type="text/javascript">
/*
.attr() 操作标签属性
*/
//获取元素属性值
alert( $('#box').attr('chs') ) //haha
alert( $('#box').attr('id') ) //box
//添加设置元素属性值
$('#box').attr({
class:'nav',
game:'none',
})
/*
.remove()
移除标签属性值
prop()获取/设置标签属性(只能用来获取合法标签属性)
*/
$('#box').removeAttr('goudan');
/*
.addclass()
给类名添加类名
.removeClass()
.toggleClass('nav')
有nav这个类名就删除,没有就添加
*/
$('#box').addClass('clearfix');
关于获取和设置宽高值的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0px;
padding:0px;
}
body{
height:2000px;
}
#wrap{
margin-top:10px;
margin-left:10px;
width:600px;
height:400px;
box-shadow:0 0 10px;
}
#box{
width:300px;
height:200px;
background:pink;
margin-top:20px;
top:20px;
left:30px;
position:absolute;
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="box"></div>
</div>
<script>
/*
offset() .left获取此标签距离页面左边距的像素
.top获取此标签距离页面上边距的像素
position() 获取元素到定位父级的距离,返回一个对象,该对象包含top/left两个属性
*/
//距离页面左边距为30px
alert($('#box').offset().left); //30
//距离页面顶端40px 父级margin-top子级元素跟着向下移
alert($('#box').offset().top); //40
alert($('#wrap').offset().left) //10
alert($('#wrap').offset().top) //10
//距离定位父级左边距的距离
alert($('#box').position().left) //30
//距离定位父级上边距的距离
alert($('#box').position().top) //20
/*
scrollTop()获取和设置页面滚动高度
scrollLeft()获取和设置滚动宽度
.width() .height() 获取或设置高度/宽度
*/
document.onclick = function(){
//此处this关键字指代document,即调用方法的js对象
//设置页面滚动高度
$(this).scrollTop(1500); //点击页面跳转到高度为1500px的地方
//alert($(this).scrollTop()) //获取鼠标点击页面处的高度px
}
alert( $('#box').width() );//获取box标签的宽度 300px
alert( $('#box').css('width') ) //300px
$('#box').width(200) //设置宽度为200px
/*
.innerHeight() .innerWidth()
没有设置功能,只能获取宽度/高度 + padding (类似clientHeight)
.outerHeight() .outerWidth()
获取宽度/高度, + padding*2(上下内边距) + border*2 (类似offsetHeight)
* */
</script>
</body>
</html>
关于标签元素的添加复制等 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
#box{
width:300px;
height:200px;
margin:100px auto;
border:1px solid pink;
}
</style>
</head>
<body>
<a href="">document.get...</a>
<div id="box">
这是原本的内容
</div>
<p class="add">添加的内容</p>
<br />
<br />
<b >我是chs我需要被标签包裹</b>
<br />
<br />
<br />
<div class="clone">
我是clone目标div
</div>
<script type="text/javascript">
/*
.append()
类似于标签的字符串
jq对象 往元素里面的最后面添加内容
*
* */
$('#box').append('<p class="ppp">哈哈哈</p>')
$('#box').append( $('.add') )
//添加标签并设置其样式
var ap = $('<a href="" class="adda">a标签</a>');
ap.css('color','red');
$('#box').append( ap );
$('#box').append( document.getElementsByTagName('a') )
/*
appendTo()
将一个元素添加到另一个元素里
只有jq对象才能调用此方法
* */
$('<p>我是apependTo</p>').appendTo( document.getElementById('box') )
/*
after() 将要添加的元素添加到原元素标签外的后面
与被添加元素同级
before()
* */
var $a = $(' <a href="">after()</a> ')
$a.css('color','red')
$('#box').after($a)
/*
* .wrap() 将指定内容包裹jq对象元素
*
* */
$('b').wrap('<del></del>')
//$('b').unwrap() //去除封装
/*
.empty() 清空元素内的内容
$('b').empty() / $('b').html('')
.remove() 删除元素自己 标签也一并删除
$('b').remove()
*
* */
/*
.clone()
复制克隆一个元素的副本
再进行添加到其他元素标签中
* */
// var clo = $('b').clone()
// clo.css('color','red')
// $('.clone').append( clo )
//改进写法
$('.clone').append( $('b').clone() )
</script>
</body>
</html>
jq对象的筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<p>p1</p>
<p class="d">p2</p>
<p>p3</p>
<p class="d">p4</p>
<p>p5</p>
<div class="wrap">
<p>p1</p>
<p class="red">p2</p>
<p class="red">p3</p>
<p>p4 <a href="">k</a></p>
<p id="p5">p5</p>
</div>
<script type="text/javascript">
/*
筛选
$('box').eq() 0,1,2,3,4...-1,-2....
* */
$('p.d').eq(0).css('color','red');
//判断元素标签有没有类名
ap = $('div').hasClass('wrap')
alert(ap) //true
/*
筛选 .filter()
* */
$('.wrap p').css('fontSize','20px').filter('.red').css('color','red')
/*
筛选之判断 .is()
判断jq对象是不是方法内的元素标签,有则返回true否则返回false
*
* */
alert( $('.wrap p').is('a') ); //false
alert( $('.wrap p').parent().is('div') ) //true
/*
筛选 .has('a')
判断jq对象中有没有a标签,如果有则进行后面的操作
* */
//筛选有a标签的p标签进行css设置
$('.wrap p').has('a').css('color','red');
//筛选没有red类名的p标签进行css设置
$('.wrap p').not('.red').css('color','blue')
//筛选.wrap标签元素的所有子元素将其加上类名on 子元素的子元素不进行修改
$('.wrap').children().addClass('on')
/*
筛选 .find()
从方法内的元素的子元素开始遍历,找到条件满足为止
*
* */
//遍历查找div后代的所有的a标签进行修改设置
$('div').find('a').addClass('in')
/*
offsetParent 定位父级
parent 父级
parents 所有的先代一直到html为止
siblings 同级
*
* */
//遍历查找div的所有先代
$('div').parents().addClass('haha')
//遍历查找div所有先代中的body元素
$('div').parents('body').addClass('iii')
//遍历id为p5的元素的所有同级
$('#p5').siblings().addClass('ooo')
//遍历查找id为p5元素的所有同级中类名为red的同级元素
$('#p5').siblings('.red').addClass('wqd')
</script>
</body>
</html>
jq 对象的事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
#box{
width:100px;
height:100px;
background:pink;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li>111</li>
<li>22</li>
<li>333</li>
<li>444</li>
</ul>
</div>
<input type="button" id="btn"/>
<script type="text/javascript">
//document.onclick = function(){}
/*
jquery事件
$().click(function(){
snip
...
})
*
*
* */
//jq事件的基本语法
$(document).click(function(e){
alert('click')
});
//需要将页面所有的东西都加载完才能触发(等样式丶图片丶js代码等加载完毕)
window.onload = function(){
alert('window 加载完毕')
}
//只要文档结构加载完就可触发
//一般情况下jq加载会比js加载块
$(document).ready(function(){
alert('ready 加载完毕')
});
//缩写
$(function(){
alert('ready 加载完毕')
});
//事件的重叠
$('#box').click(function(){
alert(1)
});
//js中事件重叠后者覆盖前者 jq中事件会重复 都执行
$('#box').click(function(){
alert(2)
});
/*
生成元素的事件触发
*
* */
// 事件的注册是在li5生成之前,所以不会执行点击li5触发事件
//应用于如用户点击按钮新增的元素,无法进行事先设计的事件
$('#box ul li').click(function(){
alert( $(this).html() ) //点击1.li 111 点击2.li 22
})
$('#box ul').append('<li>555</li>')
/*
对上新增元素无法触发事件进行修改
重点
* */
//点击页面新增一个li
$(document).click(function(){
$('#box ul').append('<li>5555</li>');
});
//on()方法 参数1:点击事件的方式 参数2:新增的元素的标签名 参数3:function(){}
//注意此处jq对象需要是触发事件元素的父级或者任意祖级
$('#box ul').on('mouseenter','li',function(){
console.log($(this).html());
});
//不需要用到该点击事件时 用off方法进行解绑 无法解除js的onclick事件
$('#box ul').off('mouseenter');
$(document).off('click')
//jq 解除事件方法off 也不会解除js 中的addEventListener绑定事件的事件
//只解除jq 中添加的事件
document.addEventListener('click',function(){
alert('haha')
});
/*
* 只触发一次就自动解除的事件
*
*
* */
$('#btn').bind('click', function() {
$(this).unbind('click');
alert('Clicked and unbound!');
});
/*
* hover()事件
* mouseenter mouseleave的组合
*
* js中没有hover()方法
*
*
* */
//.hover()方法两个参数 第一个参数方法代表mouseenter , 第二个代表mouseleave
//若只有一个参数方法,则代表两者合并事件,两事件触发同一内容
$('#box').hover(function(){
console.log('enter');
},function(){
console.log('leave');
});
//一个参数方法
$('#box').hover(function(){
alert('两内容共用此内容')
});
</script>
</body>
</html>
jq 动画方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<style>
#box{
width:100px;
height:100px;
background:pink;
/*display: none;*/
}
</style>
</head>
<body>
<p>111</p>
<p>222</p>
<p class='red'>333</p>
<p>444</p>
<div class="wrap">
<p>2</p>
<p>2</p>
<p></p>
<p></p>
<p></p>
</div>
<div id='box'>
</div>
<input type="button" value="显示" id="show"/>
<input type="button" value="隐藏" id="hide" />
<script type="text/javascript">
/*
index
each
*
* */
//输出被点击的元素的序列号
$('p').click(function(){
//this 指代p 则表示在同级中的序列号
//.index('p')表示在同级的p元素中筛选序列号
alert( $(this).index('p') );
});
//对.wrap 中p同级元素中的p进行遍历
$('.wrap p').each(function(i){
//遍历输出每个p标签的序列号
$(this).html(i);
});
/*
动画方法
* .show(num) num单位为ms
* .fadeIn(num) 淡入
* .fadeOut(num) 淡出
* .slideDown(num) 宽度不变,高度渐变
* .slideUp(num)
*
* .hide(num) 宽高渐变 慢慢隐藏消失
*
*
*
* */
//盒子div 逐渐展示 function指代动画完成后做什么事情
// $('#box').show(2000,function(){});
//宽高不变 从透明渐变为不透明
// $('#box').fadeIn(5000,function(){})
//前提是display:normal
// $('#box').fadeOut(5000,function(){})
//宽度不变,高度慢慢增加显示
// $('#box').slideDown(5000,function(){});
//宽度不变 高度渐渐收缩直至消失
// $('#box').slideUp(5000,function(){})
/*
元素运动动画方法
.animate({json},2000,function(){}, 'easy')
参数1: json
参数2: 毫秒数(默认300) fast normal slow
参数3: 匀速 加速度 可不写
*
*
*
* */
//jq动画 将box盒子上左边距在两秒内变到500px
$('#box').animate({
marginLeft:'500px',
marginTop:'500px',
opacity:0,
},2000,function(){
//动画结束后将其隐藏 即display:none
$(this).hide();
});
//在两秒内将该盒子的透明度变为0
// $('#box').animate({
// opacity:0
// },2000);
/*
fadeToggle(num) 对反 fadeIn() 或者 fadeOut()
当前是fadeIn() 则 fadeToggle()实现fadeOut()效果
toggle()方法 对反 show() 和 hide()
slideToggle() 对反 slideDown() 和 slideUp()
fadeTo(num, 0~1)
* */
//变到0.7的透明度
$('#box').fadeTo(3000,0.7)
//鼠标划入划出 的jq 淡入淡出动画
//stop()移除所有动画队列 防止太多事件注册 动画执行很久
//stop(true 表示要不要停止该事件, 默认false true表示停下动画队列 并 把元素放到队列最后一刻,动画瞬间完成直到最后一个动画执行)
$('#show').mouseenter(function(){
$('#box').stop(true,false).fadeIn(2000);
});
$('#hide').mouseenter(function(){
$('#box').stop(true,false).fadeOut(2000);
});
/*
延迟动画方法
延迟多久之后执行后面的动画队列
只能延迟动画
*
*
* */
$('#box').delay(2000).fadeOut();
</script>
</body>
</html>