第一章.jquery的基本语法
一、jquery与dom对象的区别
// 1.dom对象：用原生js获取过来的对象就是dom对象
var myDiv = document.querySelector("div");//myDiv 是dom 对象
console.dir(myDiv);
//2.jquery对象：用jQuery方式获取过来的对象是jQuery对象。本质：通过$把dom元素进行了包装
$('div');//$('div')是一个jQuery对象
console.dir($('div'));
//3.jquery 对象只能使用jQuery方法，dom对象则用原生的js属性和方法
// myDiv.style.display = "none";
$('div').hide();
二、jquery与dom对象互相转换
案列1：
<body>
<div class="box">哈哈</div>
</body>
<script>
$(function () {
// jq==>dom
// console.log($('.box'));;
// console.log($('.box')[0]);
// dom===>jq
// 工厂函数 $()
// 1.如果是选择器 $("") 加双引号
// 2.如果是dom对象 $(dom) 不用加双引号
// $('.box')
let box=document.querySelector('.box');
console.log($(box));
})
</script>
案列二：
<body>
<video src="mov.mp4"></video>
</body>
<script>
// 1.dom对象转换为jQuery对象
//（1）我们直接获取视频，得到的是一个jQuery对象
// $('video');
// (2)我们已经用原生js获取过来的对象
let myVideo = document.querySelector('video');
// 把js对象转换为jQuery对象
// $(myVideo);
// 2.jQuery对象转换为dom对象
// 第一钟方式
$('video')[0].play();
// 第二种方式
$('video').get(0).play();
</script>
三、jquery里面的隐式迭代
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>
<script>
// 让li全部改变一下背景色橙色 字体为白色
// 隐式迭代
$('li').css({ "backgroundColor": "orange", "fontSize": "white" });
// 给每个Li绑定一个点击事件 点击后弹出li里面的内容
$('li').click(function () {
// 获取文本里面的值 html()方法 $(this) 是jquery对象 只能用html()
let index=$(this).html();
console.log(index);
//dom innerHTML 注意: this 是dom对象只能用innerHTML
alert(this.innerHTML);
})
</script>
四、链式操作
<body>
<div class="box">
<h1>月下无限连</h1>
<div>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Corrupti placeat voluptatem alias voluptas
molestiae quae non? Tenetur eos quidem,
iure sint iste libero earum nemo dolor distinctio quaerat
accusantium? Minus.
</div>
</div>
</body>
<script>
// 点击h1标签的时候下面的div元素显示 ,并且当前h1添加激活样式
$(function () {
$('h1').click(function () {
$(this).addClass("activeH1");
$(this).addClass("activeH1").next().css("display", "block");
// $(".box div").css("display","block");
})
})
</script>
浙公网安备 33010602011771号