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>
一、样式
-
css() 为dom对象设置样式
第一种用法: css(属性名称,属性值) 一次只能设置一个样式
<div class="demo">
设置一条样式
</div>
<script>
$('.demo').css('color','blue').css('background-color','red')
</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>
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>
三、属性
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>
-
removeAttr() 移除属性
<div class="demo" title="这是一个测试代码" id='test'>attr方法 </div>
<script>
$('.demo').removeAttr('id')
</script>
addClass() 添加类名
<div id="demo"> 白日依山尽</div>
<script>
$(this).addClass('active')
</script>
removeClass() 移出类名的
<div id="demo" class='active'> 白日依山尽</div>
<script>
$(this).removeClass('active')
</script>
toggleClass() 当某个类名存在时则删除,不存在时则添加
<div id="demo"> 白日依山尽</div>
<script>
$('#demo').click(function(){
$(this).toggleClass('active')
</script>
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>
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>