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操作
-
1.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>
-
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>
-
prependTo() 元素前置到另一个、指定的元素元素集合中。
<div class="parent">宝剑锋从磨砺出</div> <span id="child">梅花香自苦寒来</span> <script> $(function(){ $('#child').prependTo($('.parent')) // 效果:<div class="parent"> <span id="child">梅花香自苦寒来</span>宝剑锋从磨砺出</div> }) </script>
-
remove() 移出匹配到的元素
<p>苹果01</p> <p class="two">苹果02</p> <p>苹果03</p> <script> //$('p').remove() // remove()方法不传递参数的情况下 表示删除匹配到的所有元素 $('p').remove('.two') // 移除类名等于two的p标签 </script>
五、属性
-
1.attr() 获取或者设置属性
<div class="demo" title="这是一个测试代码">attr方法 </div> <script> // attr() 获取匹配元素属性的值 var res = $('.demo').attr('title') // attr() 设置匹配元素的属性值 $('.demo').attr('title','this is a test code') // 只修改一个属性值 $('.demo').attr({name:'code',id:'test'}) // 设置多个属性 </script>
2.removeAttr() 移除属性
<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div> <script> $('.demo').removeAttr('id') </script>
注意:只接受一个参数
-
3.addClass() 添加类名
<div id="demo"> 白日依山尽</div> <script> $(this).addClass('active') </script>
4.removeClass() 移出类名的
<div id="demo" class='active'> 白日依山尽</div> <script> $(this).removeClass('active') </script>
5.toggleClass() 当某个类名存在时则删除,不存在时则添加
<div id="demo"> 白日依山尽</div> <script> $('#demo').click(function(){ $(this).toggleClass('active') </script>
6.html() 获取或者设置匹配元素的内容(包含标签)
<div class="content"><span>作者:王之涣</span><br>白日依山尽</div> <script> $(function(){ // html() 获取元素的内容 和JavaScript中的innerHTML相同的 var con = $('.content').html() // console.log(con); // html() 设置匹配元素的内容 $('.content').html('去<a href="http://jd.com" target="_blank">京东</a>网购') }) </script>
7.text()
<div class="content"><span>作者:王之涣</span><br>白日依山尽</div> <script> $(function(){ // text() 获取元素的文本内容不包含标签 和JavaScript中innerText的相同的 var con = $('.content').text() // console.log(con); // text() 设置匹配元素的文本内容 $('.content').text('去<a href="http://jd.com" target="_blank">京东</a>网购') }) </script>
注意:text()和html() 最大的区别,text()只处理文本内容,不能识别标签,而html() 方法可以识别标签
text()和html() 方法不能够用于获取或者设置表单标签的值,除了button和textarea这两个标签之外
-
val() 获取或者设置表单标签的值
<input type="text" id="user" value="zhangsan"> <script> $(function(){ // val() 获取表单标签的值 var res = $('#user').val() // console.log(res); // val() 设置匹配元素的value值 $('#user').val('张三') }) </script>
-
-
prop() 设置或者获取元素的属性值
-
removeProp() 移出属性
-
-
attr() 和prop()的应用场景
prop()方法经常用于标签属性值有true和false的时候使用,例如:checked、seleted、readonly、disabled