JQuery 是使用JS开发出来的第三方库 (js文件)
write less, do more
JQuery概念
JQuery特点
优点
链式编程, 隐式迭代
①先引入
②再写一个
console.log(JQuery)
console.log($)
console.log(JQuery===$)
( ) 在调用 () 在调用 ()在调用的时候, 括号中,传递参数的不同,就会造成这个函数的功能不同
$(实参) 可以传递哪些函数
( ) 在调用 () 在调用 ()在调用的时候, 括号中,传递参数的不同,就会造成这个函数的功能不同
1.可以传递一个函数，window.addEVentListener(‘load’，function(){}) document.addEventListener(‘DOMContentLoaded’,function(){})
$(function() {
const btn =document.querySelector('button')
console.log(btn)
})
//这个函数,就在界面的基本结构加载完成的时候,会进行调用
2.可以传递 选择器的字符串 document.querySelector(选择器字符串) $(‘选择器’)
// 2.可以传递 选择器的字符串 document.querySelector(选择器字符串)
$(function() {
const btn = $('button')
const li = $('div ul li')
// 只要通过$()去查找界面的元素，找出来的都是伪数组。但是这个伪数组是一个高端的伪数组
//这个函数，就在界面的基本结构加载完成的时候，会进行调用
})
3.传递标签字符串
按钮 document.createElement(‘button’)
帮助我们创建元素对象
$(‘按钮’)
$('<button>按钮</button>')
4.$(其他的东西)
使用jQuery去监听页面中的元素的事件
$(选择器).事件类型(函数)
$(function(){
// const btn = $('button')
// const li = $('div ul li')
$('button').click(function(){
console.log('按钮被点击了...')
})
// 隐式迭代
$('ul li').click(function(){
console.log('li被点击了...')
})// 隐式迭代(循环遍历)
//监听事件
$('div').mouseenter(function(){
console.log("div鼠标移动进去了...)
})
$('div').mouseleave(function(){
console.log('div鼠标移开了...')
})
对元素内容的操作 对元素的普通属性的操作 对元素样式属性的操作 对元素自定义属性的操作
①控制元素的内容
$('button').click(function() {
//找到了一个元素,如何对这个元素进行操作
//webapi的时候，对元素内容的操作 对元素的普通属性的操作 对元素样式属性的操作 对元素自定义属性的操作
//①对元素内容的操作 将div中的内容更换
$('div').html('<span>我是span标签</span>')//可以解析标签
$('div').test('<span>我是span标签</span>')//不可以解析标签
})
②控制元素的常规属性
jQuery对象.attr(属性的名字) /jQuery对象.attr(属性的名字，值)
表单属性 value checked disabled selected
jQuery对象.prop(属性的名字) /jQuery对象.prop(属性的名字，值)
$('button').click(function() {
//找到了一个元素,如何对这个元素进行操作
//webapi的时候，对元素内容的操作 对元素的普通属性的操作 对元素样式属性的操作 对元素自定义属性的操作
//②对元素的普通属性的操作
//将a标签的内容改为淘宝
$('a').html('淘宝')
//设置a标签的内容
// $('a').attr('那个属性'，'变成什么样的值')
$('a').attr('href','http://www.taobao.com')
//设置img的内容
$( 'img').attr( 'src', './images/2.webp')//点击按钮更改图片
$( 'input').attr('type', 'password')//点击按钮将输入框更改为密码框
})
例:在images文件夹下 有 1.webp 2.webp…6.webp 6个文件 随机取出一张让img标签显示
<body>
<img src="./images/1.webp" alt="">
<script src="./jquery.min.js"></script>
<script>
// 在images文件夹下 有 1.webp 2.webp....6.webp 6个文件 随机取出一张让img标签显示
const arr = ['1.webp', '2.webp', '3.webp', '4.webp', '5.webp']
$(function () {
function getRandom(N, M) {
return N + Math.floor(Math.random() * (M - N + 1))
}
let getrandom = getRandom(0, 4)
$('img').attr('src', `./images/${arr[getrandom]}`)
})
</script>
</body>
③控制元素的样式属性
$('button').click(function() {
//找到了一个元素,如何对这个元素进行操作
//webapi的时候，对元素内容的操作 对元素的普通属性的操作 对元素样式属性的操作 对元素自定义属性的操作
//③对元素样式属性的操作
//style属性 class属性
$('div').css( 'width','500px')
$('div').css('height','500px')
$('div').css('border','2px solid blue')
$('div').addClass('active')//增加一个active的类
$('div').removeClass('active')//移除active的类
$('div').toggleClass('active')//有则删除,无则添加
console.log( $('div').hasClass('active') )//这个元素到底有没有active这个样式 true/false
})
④控制元素的自定义属性
<button data-index="haha">按钮</button>
<script>
console.log($('button).attr('data-index'))
</script>
原生的DOM对象和JQuery对象
-
原生的DOM对象 :不具备JQuery对象中的方法
-
JQuery对象: 使用JQuery的方式获取的元素称之为JQuery对象
JQuery对象只具备jQuery中的方法，不具备元素DOM对象中 的方法 -
JQuery对象的本质是一个高级的伪数组
-
隐式迭代: 把循环遍历的过程隐藏掉了
-
链式编程: 操作完jquery对象之后，得到的依然还是这个jquery对象.所以我们可以继续的往下点
//原生的DOM对象 :不具备JQuery对象中的那些方法
//const div=document.querySelector('div')
//div.html('我是改变之后的内容')
//div.css('width','200px')
//div.addClass('active')
//这些全都会报错
//正确的写法
// JQuery对象: 使用JQuery的方式获取的元素,才具备我们学习的JQuery中便捷的方法
const div = $('div')
div.html('我是改变之后的内容 ')
div.css('width','2px')
div.addClass('active')
//通过jQuery方式获取到的界面的元素，其实本质上是一个高级的伪数组
// 这个伪数组: 隐式迭代 (为所有的div进行操作)
链式编程
$(function () {
// 设置.nav的宽度为200px 高度为200px 边框为1像素红色实线 用一行代码实现
$('.nav').css('width', 200).css('height', 200).css('border', '1px solid purple')
})
JQuery筛选方法
<ul>
<li>1</li>
<li id="li2">2
<span class="aa">我是span</span>
<a class="bb" href="">我是a标签</a>
</li>
<li class="cc">3</li>
<li>4</li>
<li class="cc">5</li>
</ul>
</div>
<script>
// 获取页面的元素
//通用的方式 利用元素与元素之间的关系
// $(选择器')
console.log($('#li2').parent()) // 拿到父节点
$('#li2').parent().css('width', 100).css('height', 100).css('border', '1px solid red')
console.log($('#li2').children( 'span'))//拿到亲儿子
console.log($('#li2').children( '.bb'))//还能在孩子中进行选择器的筛选
console.log($('#li2').siblings()) //找到所有的兄弟
console.log($('#li2').siblings('.cc'))//找到所有.cc的兄弟
console.log($('#li2').prevAll())//上面的兄弟
console.log($('#li2').nextAl1())//下面的兄弟
//后代
console.log($('div').find('.aa'))//找后代元素 可以跨级
//找第几个
$('li:nth-child(3)').css('border','1px solid blue')
$('li').eq(3).css('border','1px solid blue')//eq(3) 是从0开始的
</script>
例
<body>
<a href=""></a>
<span class="myspan">我是测试的span</span>
<div id="mydiv">
<a href=""></a>
<span class="myspan">myspan1</span>
<a class="aaa" href="http://www.baidu.com">百度</a>
</div>
<span class="myspan">我是span2</span>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
const mya = $('#mydiv > a')
const mydiv = $('#mydiv')
const lis = $('li')
// 拿到mya的父亲节点
mya.parent()
// 拿到mydiv的孩子
mydiv.children()
// 拿到mydiv的孩子们中的a标签
mydiv.children('a')
// 拿到mya的兄弟们
mya.siblings()
// 拿到第2个li
lis.eq(1)
</script>
</body>
JQuery对象和DOM对象相互转换
- jQuery对象和原生DOM对象之间的差别
- jQuery对象: 通过jQuery形式拿到的元素原生
- DOM对象: 通过webapi的知识找到的元素
- jQuery对象和原生的DOM对象之间的属性和方法不能混用
- JQuery对象和DOM对象相互转换
- s(原生DOM对象)
- jQuery对象[0]
JQuery写法
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// 给li绑定点击事件, 点谁谁变绿, 其他人恢复成初始状态
$('li').click(function (e) {
// 当前点击的li变绿
// 事件处理函数中 e.target和this都代表的原生的DOM对象
// e.target.style.backgroundColor = "green"
// this.style.backgroundColor = "green"
const lis = $('li')
// 如何在jQuery对象和 元素的DOM对象间进行转变
// $(函数)
// $(选择器)
// $(标签字符串)
// $(原生DOM对象)
$(this).css('backgroundColor','blue').siblings().css('backgroundColor','')
})
})
</script>
</body>
原生DOM写法
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// 给li绑定点击事件, 点谁谁变绿, 其他人恢复成初始状态
$('li').click(function (e) {
// 原生DOM写法
const lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
for (let j = 0; j < lis.length; j++) {
lis[j].style.backgroundColor = ''
}
lis[i].style.backgroundColor = 'green'
})
}
})
</script>
</body>
事件委托 $(‘ul’).on(事件类型, 子元素的选择器, 事件处理函数)
on是专门为事情委托开发出来的一个方法
$(‘ul’).on(事件类型, 子元素的选择器, 事件处理函数)
原理:冒泡
事件源找爹
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// $('ul').click(function (e) {
// // 事件委托ul
// if (e.target.tagName === 'LI') {
// console.log(222)
// }
// })
// on是专门为事情委托开发出来的一个方法
// $('ul').on(事件类型, 子元素的选择器, 事件处理函数)
$('ul').on('click', 'li', function () {
console.log('click...')
})
})
</script>
</body>
给li绑定点击事件, 点谁谁变绿, 其他li恢复成初始状态
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol>
</ol>
<script>
$(function () {
// 给li绑定点击事件, 点谁谁变绿, 其他li恢复成初始状态
// on是专门为事情委托开发出来的一个方法
// $('ul').on(事件类型, 子元素的选择器, 事件处理函数)
$('ul').on('click', 'li', function (e) {
$(e.target).css('backgroundColor','green').siblings().css('backgroundColor', '')
})
})
</script>
</body>
控制元素的显示与隐藏
()写时间
<body>
<div></div>
<button>点我试试</button>
<script src="js/jquery.min.js"></script>
<script>
$('button').click(function(){
// $('div').css('display", 'none')
$('div').hide()//隐藏
$('div').show(1000)//显示 以动画显示出来1000ms
$('div').toggle(1000)//显示隐藏的转换 以动画显示出来1000ms
$('div').fadeOut(1000)//淡出
$('div').fadeIn()//淡入
$('div')fadeToggle(1000)//淡入淡出的切换
$('div').slideDown(1000)//滑入
$('div').slideUp()//滑出
$('div').slideToggle()//滑入滑出的切换
})
</script>
</body>
获取元素的信息
JQuery对象.index() 得到的是这个元素在其兄弟中的位置
位置主要有三个: offset()、position()、scrollTop()/scrollLeft()
offset()设置或获取元素偏移
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
JQuery创建元素
<body>
<ul>
<li>1</li>
</ul>
<button>增加</button>
<script>
$('button').click(function(){
// 创建出新的1i
// document.createElement('li')
// $(函数)
// $(选择器)
// $(原生DOM对象)
// $(标字符串)
const newLi = $('<li></li>')
newLi.html('hh').css('color','red')
$('ul').append(newLi)//放到末尾
$('ul').prepend(newLi)//放到前面
})
</script>
</body>
删除节点 元素.remove()
<ul>
<li>1</li>
</ul>
<button>删除</button>
<script>
$('button').click (function() {
$('ul').remove()
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
