一、首先介绍两个获取元素的原生js方法querySelector（）和querySelectorAll（）的用法
1、querySelector（’css选择器‘），用于获取选择器中的第一个元素
2、querySelectorAll（’css选择器‘），用于获取选择器中的所有元素，所以返回结果是一个数组。
收藏
//将第一个img，设置为50px圆角
var img = document.querySelector('img')
img.style.borderRadius = '50px'
// 将所有img,设置为100px圆角
var img = document.querySelectorAll('img')
for (var i=0;i<img.length;i++){
img[i].style.borderRadius = '100px'
}二、jQuery对象
1、jquery（）即简写为$（），jQuery是一个函数库，不是框架。$（）是自带循环的，运行结果是数组对象。
给初学者的注意：jQuery的使用，需要在页面头部引入，远程、本地都可以。
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2、jQuery对象的参数
$(选择器，上下文)===$(selector，[context])
第一个参数时选择器，第二个参数是第一个参数的取值范围，第二个是可选参数。如果第二个参数不写，则默认为文档。
$('img').css('width','100') //选中所有img，宽度设置为1003、jQuery事件
jQuery中的事件注册与删除：on()和off()方法的使用
001 添加事件：$('div').on('click',function(){}) === div.onclick (对应一下原生js的用法来进行记忆)
003 移除事件：$('div').off('事件名')，如果不传入参数，则移除所有事件，如果传入参数，则移除该类事件。
$('img').on('click',function () { //给页面中所有img设置宽度，并移除鼠标移入时的事件
$(this).css('width','100px')
}).off('mouseenter')jQuery常用事件：
001 点击事件：$('img').click(function(){})，click的参数一般是一个回调函数。
鼠标移入事件：$('img').mouseenter(function(){})
鼠标移出事件：$('img').mouseleave(function(){})
$(document.images).mouseenter(function () { //普通事件的添加
$(this).hide(1000)
}).mouseleave(function () {
$(this).show(1000)
})002 $(DOM对象) == juery对象，DOM对象可以直接做为juery的参数。
003 window.onload事件和ready()事件
一个页面加载的内容，分为两块：1、页面结构：DOM树节点；2、页面所有需要的资源，包括：图片、视频、flash等。
window.onload事件需要两块内容都加载完才执行，存在问题是，当页面中有较大资源时，用户等待时间较长，造成页面假死现象。
ready（）时间，在页面结构加载完之后，即开始执行，则避免了假死现在，用户体验更好。
$(document).ready(function () {
alert('准备就绪！')
})三、jQuery对象与DOM对象之间的转换
1、DOM对象是DOM树中的节点，可以直接使用原生的JS进行操作
2、jQuery对象：由工厂函数$()创建
3、将DOM对象转为jQuery对象的方法，就是把DOM对象作为参数传递给$函数
4、将jQuery对象转为DOM对象：jquery对象返回的值永远是一个数组，将这个数组打散，它就是一个个独立的DOM对象。
另外，jquery自己提供了一个get方法，也可以实现对象转换为DOM对象：
如：$('img').get(i).style.borderRadius = '150px'，注意get后面是圆括号，不是方括号获取元素的索引。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>jQuery初体验</title>
</head>
<style>
ul li {
float: left;
display: inline;
margin-left: 10px;
}
</style>
<body>
<ul>
<li><img src="images/shu1_library2017.jpg" alt=""></li>
<li><img src="images/shu2_library2017.jpg" alt=""></li>
<li><img src="images/shu3_library2017.jpg" alt=""></li>
<li><img src="images/shu4_library2017.jpg" alt=""></li>
</ul>
</body>
<script>
//1. 原生querySelector()与querySelectorAll()获取元素实例
// //将第一个img，设置为50px圆角
var img = document.querySelector('img')
img.style.borderRadius = '50px'
////
//// 将所有img,设置为100px圆角
var img = document.querySelectorAll('img')
for (var i=0;i<img.length;i++){
img[i].style.borderRadius = '100px'
}
//2.jQuery对象的参数与基本语法，ready()事件注册实例
//jQuery是一个函数库，不是框架。首先要在文档头部引入才可以使用(远程或本地引入均可）。jquery是一个工厂函数，简写：$
$('img')[0].style.borderRadius = '50px' // === $('img',document)[0].style.borderRadius
$('img').css('width','100') //选中所有img，宽度设置为100
var img = $('img')
for (var i=0;i<img.length;i++){
img[i].style.borderRadius = '150px'
}
//3. jQuery中的事件注册与删除： on()和off()方法的使用
$(document.images).mouseenter(function () { //普通事件的添加
$(this).hide(1000)
}).mouseleave(function () {
$(this).show(1000)
})
//
$('img').on('click',function () {
$(this).css('width','100px')
}).off('mouseenter')
$('img').click(function () {
$(this).css('width','100px')
})
//reday()事件注册，放在head中和放在这里，速度差不多。
$(document).ready(function () {
alert('准备就绪！')
})
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
