jqueryDOM操作

原创2019-08-12 17:17:2216
摘要:一、获取/改变CSS的属性值<!DOCTYPE html><html><head><meta charset="UTF-8"><title>获取/改变CSS的属性值</title><script src="https://code.jquery.com/jquery-3.4.1.js&quo

一、获取/改变CSS的属性值

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>获取/改变CSS的属性值</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>

<script>

$(document).ready(function(){


// 改变单个元素css属性值

// $(选择器).css('属性名','属性值')

$('div').css('background','#a500e7');


// 改变多个元素css属性值

// $(选择器).css({'属性名':'属性值','属性名':'属性值','属性名':'属性值'})

$('div').css({'width':'200px','height':'200px'});


// 获取单个元素css的值

// $('选择器').css(属性名)

alert($('p').css('color'));

})

</script>


<div>

<p style="color:#fff;">hello world!</p>

</div>

</body>

</html>


二、属性的操作方法

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>属性的操作方法</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>

.box{

width:200px;

height:200px;

background:#00a5e0;

}

.main{

border: 1px solid #000;

}

</style>

</head>

<body>

<script>

$(document).ready(function(){


// addClass() 向元素添加一个或者多个类

$('div').addClass('box main');


// removeClass() 从元素中移除一个或多个类

$('div').removeClass('main');


// attr() 设置或返回被选中元素的属性值

// alert($('p').attr('style'));


// removeAttr() 移除元素属性

$('p').removeAttr('style');


// hasClass() 检查被选中元素是否包含指定class

// alert($('div').hasClass('box'));


// toggleClass()对元素进行添加/删除类的切换操作

$('button').click(function(){

$('div').toggleClass('main');

})


// text() 返回或设置被选中的元素的文本内容

$('p').text('php中文网');


     //html() 返回或设置被选中的元素的内容,类似innerHTML,可包括html标签

     $('p').html('<b>php中文网</b>');


// val() 返回或设置被选元素的值

$('input').val('请输入内容');


})

</script>


<div>

<p style="color:#fff;">hello world!</p>

<button>点击</button>

</div>

<input type="text" value="什么都没有哦">

</body>

</html>


三、jquery事件方法函数

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery事件方法函数</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>

<script>

$(document).ready(function(){


// *不能与<body onload="">一起使用

// blur()元素失去焦点

$('input').blur(function(){

$('input').css('background','#67d8ef');

})


// focus()元素获得焦点

$('input').focus(function(){

$('input').css('background','#287ec1');

})


// change()元素的值发生改变的时候

$('input').change(function(){

$('input').css('background','#f50');

})


// click()单击事件

$('.div').click(function(){

$('.div').css({'width':'200px','height':'200px'});

})


// dblclick()双击事件

$('.div').dblclick(function(){

$('.div').css('background','#00a5e0');

})


// mouseover()鼠标指针移入元素上方时触发该事件

$('.box').mouseover(function(){

$('.box').css('width','200px');

})


// mouseenter()鼠标指针穿过元素时触发该事件

$('.box').mouseenter(function(){

$('.box').css('height','200px');

})


// // mousemove()鼠标指针在指定元素移动时触发该事件

$('.box').mousemove(function(){

$('.box').css('background','#00a5e0');

})


// mouseleave()鼠标指针离开元素时

$('.box').mouseleave(function(){

$('.box').css('background','');

})


// mouseout()鼠标指针从元素上移开时

$('.box').mouseout(function(){

$('.box').css('width','100px');

$('.box').css('height','100px');

})


// mousedown()鼠标指针移动到元素上方并按下鼠标按键时

$('.box').mousedown(function(){

$('.box').css('background','');

})


// mouseup()当在元素上松开鼠标按键时

$('.box').mouseup(function(){

$('.box').css('background','#00a5e0');

})


// resize()当调整当前浏览器窗口大小时

$(window).resize(function(){

alert('窗口调整成功');

})


// pageX()属性是鼠标指针的位置,event.pageX  event,必需,参数来自事件绑定函数

// pageY()属性是鼠标指针的位置,event.pageY  event:必需,参数来自事件绑定函数

$(document).mousemove(function(a){

$('.div').html('x: '+a.pageX + '<br>' + 'y: ' + a.pageY);

})


})

</script>


<input type="text" value="">

<div style="width: 100px;height: 100px;background-color: #f50;"></div>

<div style="width: 100px;height: 100px;border:1px solid #000;"></div>

</body>

</html>


四、jquery事件切换

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jquery事件切换</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

</head>

<body>

<script>

$(document).ready(function(){


    // hover(over,out)

   // over:鼠标移入元素触发

   // out:鼠标移出元素触发

   $('div').hover(

   function(){

   $(this).css('background','#00a5e0');

   },

   function(){

   $(this).css('background','#f50');

   }

   )


// toggle() 如果元素是可见的,就切换为隐藏,否则相反

$('button').click(function(){

$('p').toggle().css('color','#fff');

})

})

</script>


<div style="background:yellow;width: 200px;height:200px;">

<p>hello world!</p>

</div>

<button>点击</button>

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-15 10:56:23
老师总结:事件尽可能用on(), 直接用click之类的, 第一只支持冒泡, 第二只能执行一次

发布手记

热门词条

第九期线上培训班