jQuery
简称:"JQ"
jQuery是一个快速、简洁的JavaScript框架(库,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布)
jQuery设计的宗旨是“write Less,Do More”(写的少,干得多)
jQuery封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
插件:是封装好的一个独立的功能代码,可供开发人员完成某个功能时直接使用的
库:是将很多功能代码封装到一起的,并不能帮助我们完成一整个项目
框架:可以帮助我们完成一整套的项目开发
一、jQuery起步
官网:jQuery
手册:离线版(.chm或者PDF)
在线版:jQuery插件库-收集最全最新最好的jQuery插件
1.1 安装jquery
a. 下载jQuery库文件
从jq22.com网站上边下载
b. 导入jQuery库文件
<!-- 第一种方法: 将jquery文件下载到本地再引入 -->
<script src="./jquery-3.5.1.min.js"></script>
<!-- 第二种:使用cdn的方式 在线的juqery文件 要求电脑必须连网 会导致网页加载速度变慢-->
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
1.2 入口函数
又称作 预加载函数
<script>
// 第一种写法
$(document).ready(function(){
// 在这里写你的代码...
});
// 第二种写法
$(function(){
// 在这里写你的代码...
})
</script>
JavaScript中获取html元素的方法
document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
jQuery中获取对象的方法
$()
1.3 jQuery获取DOM元素
$() 来获取对象(DOM元素)
面试题
js的dom对象和jQuery中的Dom对象 如何互相转化
js dom对象 转化为jquery dom对象 : 只需给js dom对象加上$()
jquery dom对象如何转化为js的dom对象: jq对象[下标]
二、选择器
选择器就是帮助我们来选取元素的,比如说在css中的选择器,选择好元素后进行样式的修饰,在Jquery中选择器选好元素后,是需要进行DOM操作的
大部分的css选择器都可以应用到jQuery选择器中
CSS的选择器分类
-
基础选择器
-
*号选择器
-
标签(元素)选择器
-
类选择器 .类名
-
id选择器 #id值
-
-
复合选择器
-
后代选择器 E F 查找的是E元素里边的F元素
-
子集选择器 E>F 查找的是E元素的子集F元素
-
紧邻兄弟选择器
-
同辈兄弟选择器
-
多重选择器
-
-
伪类选择器
-
:hover
-
:active
-
:visited
-
:link
-
:first-child
-
:last-child
-
:nth-child()
-
:not()
-
:nth-of-type()
-
-
伪对象选择器
-
::before
-
::after
-
::first-line
-
::first-letter
-
三、样式
-
css() 为dom对象设置样式
第一种用法: css(属性名称,属性值) 一次只能设置一个样式
<div class="demo"> 设置一条样式 </div> <script> $('.demo').css('color','blue').css('background-color','red') </script>
第二种用法:css({属性名称:属性值,属性名称:值....})
<div class="demo"> 设置一条样式 </div> <script> // 写法一 var s = { color:'blue', backgroundColor:'cyan', fontSize:'24px' } $('.demo').css(s) // 写法二 $('.demo').css({ 'color':'blue', 'background-color':'cyan', 'font-size':'24px' }) </script>
四、DOM操作
-
append() 向匹配到的父元素末尾追加子元素
<div class="add">append</div> <script> /* 1. 创建dom元素 jQ: $('<a href="http://www.baidu.com">百度</a>') 2. 获取父元素 $('.add') 3. 使用append()追加 父元素对象.append(要追加的子元素) */ var obj = $('<a href="http://www.baidu.com">taobao</a>') $('.add').append(obj) </script>
2.appendTo() 把子元素追加到父元素中
<div class="add">append</div> <script> var obj = $('<a href="http://www.baidu.com">taobao</a>') obj.appendTo($('.add')) </script>
3.prepend() 向父元素的开头添加子元素
<div class="add">prepend</div> <script> var obj = $('<a href="http://www.baidu.com">taobao</a>') $('.add').prepend(obj) //结果: <div class="add"><a href="http://www.baidu.com">taobao</a>prepend</div> </script>
4.prependTo() 元素前置到另一个、指定的元素元素集合中。
<div class="parent">宝剑锋从磨砺出</div> <span id="child">梅花香自苦寒来</span> <script> $(function(){ $('#child').prependTo($('.parent')) // 效果:<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从磨砺出</div> }) </script>
5.remove() 移出匹配到的元素
<p>苹果01</p> <p class="two">苹果02</p> <p>苹果03</p> <script> //$('p').remove() // remove()方法不传递参数的情况下 表示删除匹配到的所有元素$('p').remove('.two') // 移除类名等于two的p标签</script>