1、jQuery介绍、css()、选择器、事件、动画

一、jQuery介绍?

1、什么是jQuery?

  • 是一个JavaScript函数库

2、jQuery特点

  • 写的少,做的多

3、jQuery的安装

  • 直接下载引入
js 复制代码
<script src="jquery-1.10.2.min.js"></script>
  • 通过cdn引入
js 复制代码
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> 

4、jQuery()函数===$()函数

获取DOM函数

js 复制代码
//js获取元素
var textP = document.getElementById('text')
console.log($1('text'))//DOM对象
console.log($1('text').innerText)//文本内容
js 复制代码
// jQuery获取的元素
console.log(jQuery('#text')) //jQuery对象
console.log($('#text'))//可以简写
console.log(jQuery('#text').innerText) //undefined

js入口函数

js 复制代码
window.onload = function () {
  console.log('javascript 的入口函数1')
}
window.onload = function () {
  console.log('javascript 的入口函数2')//第二个会覆盖第一个
}
jQuery(document).ready(function () {
  console.log('jQuery的入口函数1')
})
jQuery(document).ready(function () {
  console.log('jQuery的入口函数2')//jQuery不会发生覆盖
})
$(function () {
  console.log('jQuery的入口函数3')//jQuery可以简写
})

5、js入口函数与jQuery入口函数的区别

  • js的入口函数多了会发生覆盖,jQuery是可以重复的
  • JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
  • jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行
  • js的入口函数不能简写,jquery的入口函数可以简写

二、jQuery的css方法

1、通过css()获取选中元素的样式

js 复制代码
//通过#('#box')获取id为box的元素  css()获取当前元素的的宽度
console.log($('#box').css('width'))//400px   
console.log($('#box').css('height'))//400px  
js 复制代码
//通过css()返回的颜色的属性值是reg格式的
console.log($('#box').css("background-color"))//rgb(255, 255, 255)
console.log($('#box').css('color'))//rgb(255, 0, 0)

2、通过css()设置样式

如果属性名中间有 - ,要加引号 或者去掉-大写第一个字母

js 复制代码
// $('#btn').onclick = function () {} 不可以这样写
document.getElementById("btn").onclick = function () {
//可以单独设置 css(属性名,属性值)
  $("#box").css('width',"600px")
  $("#box").css('height',"600px")
//简写  多个属性同时设置
$('box').csss({
    width:'600px',
    height:'600px',
    'background-color':'blue',//如果属性名中间有 - ,要加引号
    'font-size':"50px"
  })
}

三、jquery选择器

1、基本选择器

  • id选择器
js 复制代码
console.log($('#list')) //获取id为list的元素  写#
  • 类名选择器
js 复制代码
console.log($('.lic'))//获取class为liC的元素  写.
  • 标签
js 复制代码
console.log($('li')) //获取所有的li标签
  • 并集(所有的)
js 复制代码
//获取header和id为list和footer标签,所有标签的字体都设置为30px
$('header,#list,footer').css('font-size', '30px')
  • 交集(都满足的)
js 复制代码
//获取p标签 并且class为liC的元素   字体颜色改为blue  
$('p.liC').css('color', 'blue')

2、层级选择器

  • 子代
js 复制代码
//获取ul子元素的所有li  背景颜色改为pink   
$('ul>li').css('background-color', 'pink')
  • 后代
js 复制代码
//ul后代的li  加粗
$('ul li').css('font-weight', '700')

3、过滤选择器

索引获取 :eq(索引)

js 复制代码
//获取到的li元素中 选择索引为1的元素  文字居中显示   一定用冒号
$('li:eq(1)').css('text-align', 'center')

索引为奇数的

js 复制代码
//获取到的li元素中 选择索引为奇数的元素   字体倾斜
$('li:odd').css('font-style', 'italic')

索引为偶数的

js 复制代码
//获取到的li元素中 选择索引为偶数的元素  加下划线
$('li:even').css('text-decoration', 'underline')

4、筛选选择器(方法)

子类选择器 $("ul").children("li")

js 复制代码
console.log($('ul').children())//获取ul下的所有孩子
//相当于$('ul>li')
console.log($('ul').children('li'))//获取ul下名字为li的孩子

后代选择器,$("ul").find("li"); 必须添加参数

js 复制代码
//获取ul后代的p标签
console.log($('ul').find('p'))

查找兄弟节点,不包括自己本身,$("#first").siblings("li"); 添加参数返回指定的兄弟

js 复制代码
//兄弟包括 .li3 上面的下面的
console.log($('.li3').siblings())  //选择所有兄弟
console.log($('.li3').siblings('li'))  //选择名字为li兄弟

查找父亲 $("#first").parent();

js 复制代码
console.log($('.li3').parenet())//获取li3的父亲  ul

祖先

js 复制代码
console.log($('.li3').parents())//0:ul#list, 1: body, 2: html

索引

js 复制代码
//获取#list下面的索引为2的li
console.log($('#list>li').eq(2))

下一个兄弟 $("li").next()

js 复制代码
console.log($('.li3').next())//获取li3下一个的标签

下边所有的兄弟

js 复制代码
console.log($('.li3').nextAll())

上一个兄弟 $("li").prev()

js 复制代码
console.log($('.li3').prev())//获取li3的上一个元素

获取当前的位置(索引)$("li").index()

js 复制代码
console.log($('.li3').index())//获取li3的索引  2

返回不带有类名 "intro" 的所有

元素$("p").not(".intro")

js 复制代码
console.log($('.liC').not('li'))//选择class为liC  但是不是li的元素

四、jQuery事件 (不用on)

1、鼠标事件

js 复制代码
//jQuery中绑定事件: 事件源(jquery对象).事件类型(不加on事件的处理程序)
$('#btn').click(function () {
  console.log("单击了")
  console.log($(this))
  $(this).css('background-color', 'red')
}
js 复制代码
//鼠标按下  按钮改变
$('button').mousedown(function () {
  $(this).css({  
    height: '100px',
    'font-size': '30px',
  })
})

2、键盘事件

js 复制代码
$('#user').keydown(function () {
  console.log(this.value)//内容
  console.log($(this).value)//undefined
})

3、浏览器事件

js 复制代码
$(window).scroll(function () {
  console.log('滚动了')
})

五、jQuery css类

1、addClass()向被选元素添加一个或者多个类

js 复制代码
$('#add').click(function () {
//获取类名为box的元素   添加类名select_1 select_2
  $('.box').addClass('select_1 select_2')
})

2、removeClass()向被选元素删除一个或者多个类

js 复制代码
//鼠标进入  获取类名为box的元素  删除两个类
$('#remove').mouseenter(function () {
  $('.box').removeClass('box select_2')
})

3、toggleClass()删除类和添加类的切换操作

js 复制代码
$('#toggle').click(function () {
  $('.box').toggleClass('select_1')
})

六、jQuery 动画方法

1、隐藏hide()

js 复制代码
$('#hide').click(function () {
  $('#box').hide()//单击按钮  box隐藏
//相当于 display:none;不占位置
})

2、显示show()

js 复制代码
$('#show').click(function () {
  $('#box').show()//点击按钮显示
})

3、显示隐藏切换 toggle()

js 复制代码
$('#toggle').click(function () {
  $('#box').toggle()//点击按钮切换
})

4、淡出 fadeOut() 慢慢消失

  • ()加参数 参数为动画时间
js 复制代码
$('#fadeOut').click(function () {
// $('#box').fadeOut()
$('#box').fadeOut(5000)//获取id为box的元素,动画时间为5s
})

5、淡入 fadeIn() 显示出来

js 复制代码
$('#fadeIn').click(function () {
      // $('#box').fadeIn()
      $('#box').fadeIn(5000)
    })

6、淡入淡出切换 fadeToggle()

js 复制代码
$('#fadeToggle').click(function () {
// $('#box').fadeIn()
  $('#box').fadeToggle(2000)
})

7、滑动向上 slideUp()

  • 点击按钮 高度慢慢减小
js 复制代码
//点击按钮  高度慢慢减小
$('#slideUp').click(function () {
  $('#box').slideUp(3000)
})

8、滑动向下 slideDown()

js 复制代码
//点击按钮 高度慢慢变大  时间为3s
$('#slideDown').click(function () {
  $('#box').slideDown(3000)
})

9、滑动上下的切换 slideToggle()

js 复制代码
$('#slideToggle').click(function () {
  $('#box').slideToggle(2000)
})

10、定义动画 animate(对象,时间间隔)

暂时能改变颜色属性

js 复制代码
$('#animate').click(function () { //自定义动画
  $('#boxTwo').animate(  //获取元素添加动画
    {
      width: '500px', 
      height: 500,
      'border-radius': '50%',
      'background-color': 'red',//暂时不以改变颜色
      color: 'red',//暂时不以改变颜色
    },
    3000   //时间为3s
  )
})
相关推荐
逐·風38 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫1 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦2 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山3 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享3 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf5 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨5 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL5 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1116 小时前
css实现div被图片撑开
前端·css