[练习]一点jQuery的小应用

Metakazu

于 2022-10-24 16:53:12 发布

阅读量521

点赞数

分类专栏： HTML 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/Metakazu/article/details/127496075

版权

7 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本使用，包括通过选择器选取元素、修改CSS属性、添加JavaScript事件，如点击和悬停事件。还展示了如何使用'on'方法来绑定多个事件，并演示了如何获取和显示元素的值，以及改变元素的显示内容和样式。此外，文中还提及了使用'this'关键字来指定特定选中的元素。

摘要由CSDN通过智能技术生成

jQuery

<script src="導入URL"></script>
<script>
  $(function () {
    $('選択器').方法('参数');
  })
</script>

Tag→’選択器’$('h1')可替换成⬇️
Class→’.class名’
ID→’#ID名’

$(function () {
  $('h1').css('color', 'red');
})

<!--多行写法-->
$(function () {
	$('h1').css({
		Color: 'red',
		Display: 'true',
	});
});

$("h2").click(function(){
    $('.akasa').fadeOut(); 键出
    $('.akasa').fadeIn(); 键入
});

$('h2').hover(colorChange, function () {
	$('.akasa').css('color', 'blue');
});
function colorChange() {
	$('.akasa').css('color', 'red');
}

$('.tanaha').click(function () {
	$(this).css('background-color', 'red');
	$(this).css('color', 'blue');
});

$('選擇器').on('方法', function () {
	$('選擇器').事件;
});

例:

$('button').on('click', function () {
	$(this).text('7');
});

$('button').on('dblclick mouseleave', function () {
	$(this).text('7');
});

“方法1”:funtction(){$("選擇器").事件},
“方法2”:funtction(){$("選擇器").事件}

$('button').on({
	dblclick: function () {
		$(this).text('7');
	},
	mouseleave: function () {
		$(this).text('8');
	},
});

取值	`document.getElementById('ID').value;`	`$('#Id').val();`
显示	`document.getElementById("ID").innerHTML= “顯示內容”;` `document.getElementById("ID").innertext= “顯示內容”;`	`$("#ID").html('顯示內容');` `$("#ID").text('顯示內容');`
格式	`.style.color ='blue';`	`$("#ID ").css("color", "blue");`