jQuery
-
jQuery 是一个前端库，也是一个方法库
-
里面封装着一些列的方法供我们使用
-
我们常用的一些方法它里面都有，我们可以直接拿来使用就行了
-
jQuery 之所以好用，很多人愿意使用，是因为他的几个优点太强大了
①优质的选择器和筛选器
②好用的隐式迭代
③强大的链式编程
jQuery 的使用
-
jQuery 的下载
- 然后就是再页面里面引入 jQuery.js 就行了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./jquery/jquery.js"></script> </body> </html>
jQuery入门
jQuery的入口函数
- 第一种：
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
- 第二种：
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
注意点： 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。 不同于原生 js 中的 load 事件是等页面文档、外部的js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。
jQuery 的顶级对象 $
-
是 jQuery 的别称，在代码中可以使用 jQuery 代替 ，但一般为了方便，通常都直接使用 $ 。
-
是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用包装成jQuery对象，就可以调用jQuery 的方法。
jQuery 对象和 DOM 对象
-
js的对象只能用JS的属性和方法
-
Jq的对象只能用JQ的属性和放
-
相互转换
- DOM 对象与 jQuery 对象之间是可以相互转换的。
因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM 对象转换为 jQuery 对象： $(DOM对象)
- jQuery 对象转换为 DOM 对象（两种方式）
$('div') [index] index 是索引号
$('div') .get(index) index 是索引号
<body>
<div>内容</div>
<script type="text/javascript">
var objDiv = document.querySelector('div');
objDiv.style.background = 'red';
console.log(objDiv);
// 转换DOM==>JQ对象
$(objDiv).css('border','10px solid yellow');
// JQ对象==》DOM对象
console.log( $('div')[0] );
$('div')[0].style.background = 'blue';
// 第一种
console.log( $('div').get(0) );
// 第二种
console.log( $('div') );
$('div');
// 获取div
$('div').css('background','yellow');
</script>
</body>
选择器和筛选器
// 按照 id 获取页面中的元素
const ele = jQuery('#box')
const ele = $('#box')
$('#id')==》指定id元素
$('*')==》所有元素
==============================
// 按照类名来选择
const eles = jQuery('.a')
const eles = $('.a')
$('.class')==》指定class元素
==============================
const lis = jQuery('li')
const lis = $('li')
$('div')==》根据标签获取元素
==============================
$('div,p,li')==》获取多个
$('li.class')==>交集获取
$('ul>li')==>子代
$('ul li')==>后代
隐式迭代
- 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
var lis = document.querySelectorAll('li');
// 把所又的li添加背景颜色为红色
$('ul li').css('background','red');
</script>
</body>
jQuery筛选选择器
$('li:first')：直接找到第一个元素
$('li:last')：直接找到最后一个元素
$('li:eq(2)')==》找到索引为2【查找指定索引的元素】
$('li:odd')==》找到索引为奇数
$('li:even')==》找到索引为偶数
注意：索引是从0开始的
jQuery 筛选方法
$('li').parent()父级
$('ul').children('li');子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
$('ul').find('li')后代
$('li').siblings('li')兄弟
$('li'),nextAll();后面的
$('li').prevAll();前面的
判断是否具有某个类名：$('div').hasClass('aaa')
$('div').eq(index);指定索引方法【eq推荐用方法】
jQuery 里面的排他思想
- 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
- 链式编程
$(this).css('color', 'red').sibling().css('color', '');
jQuery 样式操作
- 操作 css 方法
参数只写属性名，则是返回属性值
【$(this).css(''color'');】
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
【$(this).css(''color'', ''red'');】
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，
【$(this).css({ "color":"white","font-size":"20px"});】
-
属性操作
-
给一个元素添加某个属性
// 给 div 元素添加一个 id 属性，值是 box $('div').prop('id', 'box') // 获取 div 的 id 属性 console.log($('div').prop('id'))-
prop 这个方法只能添加元素自己本身就有的属性
-
如果是添加的自定义属性，不会显示在标签上，但是可以使用
-
-
给一个元素添加某个自定义属性
// 给 div 添加一个 index 属性，值是 1 $('div').attr('index', 1) // 获取 div 的 index 属性 console.log($('div').attr('index')) -
移除元素的某一个属性
// 移除元素自己本身的属性 $('div').removeProp('id') // 移除元素的自定义属性 $('div').removeAttr('index') -
操作元素的类名
// 判断某一个元素有没有某一个 class $('div').hasClass('box') // true 表示该元素有 box 类名，false 表示该元素没有 box 类名 // 给元素添加一个类名 $('div').addClass('box2') // 给 div 元素添加一个 box2 类名 // 移除元素的类名 $('div').removeClass('box') // 移除 div 的 box 类名 // 切换元素类名 $('div').toggleClass('box3') // 如果元素本身有这个类名就移除，本身没有就添加 -
操作元素的内容
// 给元素的 innerHTML 赋值
$('div').html('<span>hello world</span>')
// 获取元素的 innerHTML
$('div').html()
// 给元素的 innerText 赋值
$('div').text('hello world')
// 获取元素的 innerText
$('div').text()
// 给元素的 value 赋值
$('input').val('admin')
// 获取元素的 value 值
$('input').val()
jQuery 效果
- 显示隐藏效果
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed,[easing],[fn]])
（1）参数都可以省略， 无动画直接显示。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
- 滑动效果
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
- 事件切换
hover([over,]out)
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它
- 淡入淡出效果
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]])
（1）参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
