jQueryの紹介
記事ディレクトリ
1.jqueryの紹介
jquery は、私たちが書いた js ファイルのように、javascript ライブラリ (ホイールとも呼ばれます) として理解することができます。アヤックス操作。jQuery は、多くの事前定義されたオブジェクトと関数をカプセル化します
2.jqueryの特徴
jqueryは次のことができます
HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
簡単な例を書く
<html>
<head>
<meta charset="UTF-8">
<title>dom操作</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function(){
alert('Hello World');
});
</script>
</head>
</html>
jQuery のメソッドのほとんどは $() で参照されます
いくつか例を挙げる
$('div').html()//删选出与div相关的所有信息
$('div').html('大家好').css('color','red')//添加大家好的内容，并且更改css样式的颜色为红色
3. jquery の dom オブジェクトと js オブジェクトの交換
//dom对象和js对象的互换
var Div=document.getElementsByTagName('div')[0]
var $Div=$(Div);//js对象转换成Jq对象
4.jqueryセレクター
<body>
<div>1</div>
<div id="box">
<p>555</p>
<p>4646</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script>
//基本选择器
console.log($('div'));
console.log($('#box'))
$("#box p:eq(0)").css({
'background':'red','color':'blue','width':'200px'});
//eq表示选择第几个,css多个样式用{}
//层级选择器
$('#box p');
$('#box > p');
console.log('#box,p');
//过滤选择器
console.log($("#box>p:first"));
console.log($("#box>p:last"))
</script>
</body>
5.jquery イベント
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button>链式事件</button>
<div class="box"></div>
<script>
//普通的写法
// console.log($.prototype)
// $('ul li').click(function(event){
// console.log(event)
// })
//绑定事件写法
// $('ul li').bind('click',function(event){
// console.log(event)
// })
//链式绑定
// $('button').bind('mousedown',function(){
// $(this).css('color','red')
// }).bind('mouseup',function(){
// $(this).css('color','yellow')
// })
//jq的事件委托
//给ul绑定一个click，目标源是li
// $('ul').on('click','li',function(){
// console.log($(this).index())//指向li,index获取索引
// })
//解脱事件
$('button').click(function(){
$('ul').off()
})
//绑定多个事件
$('.box').on('mouseover mouseout',function(e){
if(e.type=='mouseover'){
// $(this).css('color','blue')
}else if(e.type=='mouseout'){
}
})
//有一些方法是合成事件
$('div').hover(function(){
console.log(56)
},function(){
console.log(55556)
})
$('ul li').toggle(function(){
$(this).css('background','red')
},function(){
$(this).css('background','yellow')
})
</script>