前端学习之JQ

最新推荐文章于 2024-06-24 22:10:15 发布

程序媛刘刘

最新推荐文章于 2024-06-24 22:10:15 发布

阅读量421

点赞数

分类专栏：前端学习文章标签：前端学习 jquery

本文链接：https://blog.csdn.net/weixin_53105591/article/details/125780616

版权

前端学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

含义：

是js的框架,是js库

特点：

链式操作

mvp模式：

moduel view presenter 数据视图逻辑

使用：

1引入jq库
CDN 网络地址 jq CDn
本地引入 jq22
NPM
2 入口函数
3 实现功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery</title>
	<!-- cdn法 -->
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<!-- 本地引入 -->
	<script src="./jquery-3.5.1.js"></script>
</head>
<body>

    <div class="box"type='color:pink;width:100px;height:100px;'></div>
    <script>
	// 入门函数：
	 	   // JS
	   window.onload=function(){
              console.log('js');     
 	   }
 	   //jq
 	   $(function(){
         console.log('jq');
 	   })
	 $(document).ready(function() {});

    </script>
</body>
</html>

jq 和 js 的区别：

js对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。dom对象只可以使用dom对象的方法和属性
jq对象： jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。jquery对象只能使用jquery对象的方法

1 入口函数
js的入口函数只能有一个，所有内容都加载完之后，在加载js
jq的入口函数可以有多个
2 容错性
js代码容错性差，代码错误影响后面的运行
jq代码容错性好，屏蔽错误不会影响后面运行
3 兼容性：
js兼容性差
jq对浏览器兼容性做了封装，不存在兼容性问题
4 操作复杂性
DOM 操作复杂，对一些简单的动画效果，实现麻烦
DOM操作简单，支持隐式指代，实现效果简单

jq与js对象间的转换：

  js转jq：
     将js对象用$(函数)包裹起来
  jq转js
     加一个[0]即可或者get（0）

//js与jq转换
$(function(){
	
	// let box=document.querySelector('.box');
	//   box.innerHTML=222222;
   console.log(	 $('.box'));
})
// jq与js
$(function(){
	
	// let box=document.querySelector('.box');
	//   box.innerHTML=222222;
//    console.log(	 $('.box')[0]);
   console.log(	 $('.box').get(0));
 
})

选择器：

基础选择器：

ID选择器
    $('#ID名')
Class选择器
     $('.Class名')
标签名选择器
     $('标签名')
后代选择器
     $('父级 子级')
子代选择器
     $('父级>子级')
并集选择器
     $('标签,标签')
交集选择器
    $('父级 属性')

// 入口函数:
$(function(){
    // ID选择器
    console.log($('#hhh'));
    console.log($('.hhh'));
    console.log($('p'));
    console.log($('.mmm li'));
    console.log($('.mmm>li'));
    console.log($('div,a'));
    console.log($('.mmm a'));
})

过滤选择器：

：odd   奇数选择器
：even    偶数选择器
：eq（）  按照索引选择指定元素
：first  选择第一个子元素
：last   选择最后一个子元素

// 选择奇数行li
$('li:odd').html(11111)
// 选择偶数行li
$('li:even').html(22222)       
// 选择指定元素
$('li:eq(9)').html(333)
// 选择第一个元素
$('li:first').html(44444)
// 选择最后一个元素
$('li:last').html(55555)

表单选择器：

:text获取文本框
:password获取密码框
:radio  获取单选框+
:checkbox 获取复选框
:submit  获取提交按钮
:reset   获取重置按钮

//表单选择器： 
console.log($('input:text'));
console.log($('input:password'));
// 属性选择器：不仅针对表单
console.log($('input[type="text"]'));

遍历：

js遍历：
  数组，字符串，伪数组， for
  对象                  for  in
jq万能遍历方法：
  $.each(遍历对象，回调函数)

//  $.each()
let arr=[1,2,3,6,9,8];
 $.each(arr,function(index,item){
     console.log(index,item);
 })
 let obj={
     name:'kij',
     age:16,
 }
 $.each(obj,(key,value)=>{
   console.log(key,value);
 })

文本操作：

html（）  不传数值获取一个HTML内容，传数值设置所有HTML内容
text（）  注意：不能解析标签       不传数值获取一个HTML内容，传数值设置所有HTM
val（）   专门用于表单，获取设置元素值

 // 获取
 console.log( $('.box').html());
 console.log( $('.box').eq(3).html());
 // 设置
 $('.box').html(11111);
 $('.box').html('<a href="">hishfuhhf</a>');
 $('.box').text('<a href="">hishfuhhf</a>');
 console.log($('input').val());
 console.log($('input').val('111111'));

属性操作：

attr（）       获取一个属性值，设置所有值
removeAttr（） 删除属性
prop()        表单专用（checked，selected，disabled），没有数值时,返回underfined，
              有一个数值时，判断是否包含指定的属性，返回布尔值
              有两个数值时，设置属性，最后一个值填写布尔值

  //获取
  console.log($('.box').attr('class'));
       
 //设置
 $('.box').attr('ssss','123564215445')
 $('.box').removeAttr('class');
 console.log($('input').prop('checked'));
 $('input').prop('checked',false);

class操作：

addClass()    添加一个或多个类
removeClass() 删除一个或多个类
hasClass（）   判断是否包含类，返回布尔值
toggleClass（）  转换类，有此类时，删掉，无此类，添加

$('.box').addClass('a');
$('.box').addClass('a b');
$('.box').removeClass('a');
$('.box').removeClass('box');
onsole.log( $('.box').hasClass('a'));
console.log(  $('.box').hasClass('box'));
console.log(  $('.box').toggleClass('a'));

css操作：

设置：单个属性
      多个属性，用对象
获取：可以获取行内或者style标签内的属性 

$('.box').css('color','pink');
$('.box').css({
    'color':'red',
    'width':200,
    'height':200,
    'backgroundColor':'green',
});
 console.log( $('.box').css('color'));
 console.log( $('.box').css('width'));

样式操作：

width()           获取/设置宽度
innerWidth()      获取width+padding   设置width
outerWidth()        获取width+padding+border  设置width
height()         获取/设置高度
offset()          获取/设置当前元素距离页面左上角的位置
position()        获取当前元素的top和left值      不可以设置
$(window).scrollTop()        获取上下滚动的距离
$(window).scrollLeft()       获取左右滚动的距离
注意:设置时像素不加单位px

console.log($('.box').css('width'));  //200px
console.log($('.box').width());       //200
$('.box').width(400)
console.log($('.box').innerWidth()); 
$('.box').innerWidth(250)
console.log($('.box').outerWidth()); 
$('.box').outerWidth(222)
console.log(  $('.box').offset());
console.log($('.box1').position());
console.log(   $(window).scrollTop());

节点操作:

获取节点：

获取节点：
父级节点：
   1 parent()    获取父节点
   2 parents()   获取所有的祖先节点
   3 parentsUntil()   获取父节点直到指定的
子节点：
   1 children()   获取子节点
   2 find()       获取后代节点
兄弟节点：
   1 prev（）     获取上一个兄弟节点
   2 prevAll（）   获取上面所有兄弟节点
   3 prevUntil（）  获取兄弟节点直到指定范
   4 next（）      获取下一个兄弟节点
   5 nextAll（）  获取下面所有兄弟节点
   6 nextUntil（）获取兄弟节点直到指定范围
   7 siblings（）  获取所有兄弟节点

过滤：
 1 filter（选择器） 过滤，返回匹配的元素
 2 eq（）        返回指定元素的指定索引
 3 not（选择器）      返回不符合标准的
 4 first（） 过滤第一个获取节点
 5 last（）    过滤最后一个获取节点 

// 获取父节点：
console.log($('li').parent());
console.log($('li').parents());
console.log($('.12').parentsUntil('span'));
//获取子节点：
console.log($('div').children('a'));
console.log($('div').find('ul'));
// 获取兄弟节点：
console.log($('.BOX').prev());
console.log($('.BOX').prevAll());
console.log($('.BOX').prevUntil('.mmm'));
console.log($('.mmm').next());
console.log($('.mmm').nextAll());
console.log($('.mmm').nextUntil('.BOX'));
console.log($('.mmm').siblings());
//过滤:
console.log($('.12').first());
console.log($('.12').last());
console.log($('.12').filter());
console.log($('.12').eq());
console.log($('.12').not());

节点操作：

创建：   
   $(‘<a href=””>《/a>’)
   Wrap()   匹配元素外层包裹
插入：
   1 append（）  插入到匹配内容的末尾
   2 prepend（）  插入到匹配内容的开头
   3 appendTo()    匹配内容插入到元素内容的末尾，主动与被动调换
   4 preappendTo()    匹配内容插入到元素内容的开头，主动与被动调换
   5 after（）    插入到元素的末尾
   6 before（）    插入到元素的开头
   7 insertAfter（）  匹配内容插入到元素的末尾，主动与被动调换
   8 insertBefore（） 匹配内容插入到元素的开头，主动与被动调换
删除：
   1 remove（[expr]）  删除节点expr参数用于筛选元素
   2 empty()     清空节点内容，但是保留节点
   3 detach（[expr]）  删除节点，但是保留节点的事件
替换：
   1 replaceWith()   替换节点 
   2 replaceAll()     匹配元素替换节点，主动与被动调换
克隆:
  1 clone()         复制元素，不复制事件,默认值：false
  2 clone(true)     复制元素，且复制事件
   

$('.box').append('<a href="http://book.qq.com">append</a>');
$('.box').prepend('<a href="http://book.qq.com">prepend</a>');
$('<a href="http://book.qq.com">appendTo</a>').appendTo($('.box'));
$('<a href="http://book.qq.com">prependTo</a>').prependTo($('.box'));
$('.box').after('<a href="http://book.qq.com">after</a>');
$('.box').before('<a href="http://book.qq.com">before</a>');
$('<a href="http://book.qq.com">555</a>').insertAfter($('.box'));
$('<a href="http://book.qq.com">555555</a>').insertBefore($('.box'));
$('.box').remove()
$('.box').empty()
$('.box').detach()
$('p').replaceWith('<li>55555</li>')
$('p').replaceAll($('li'))
$('.box').click(()=>console.log(1111))
$('.box').clone().appendTo($('body'))
$('.box').clone(true).appendTo($('body'))

事件：

事件绑定：

绑定：
 1 直接写事件名
      $(selector).click(function(){})
 2 使用on绑定，可以同时绑定多个事件(用对象包裹函数)，不会覆盖之前的事件，
        一个事件：
           $(selector).on(‘click’,function(){})
        多个事件：
           $(selector).on({
        Click:function(){
        },
        Mouseover:function(){
        })
               事件委托，一些事件只能用on绑定
               $(selector).on(‘click’,‘span’，function（）{})
 3 解绑：$(selector).off(‘事件名’)

// jq绑定
$('.box').click(()=>console.log(2222))
//jq绑定
$('.box').on('click',()=>{
    console.log(333);
})
// 多个绑定
$('.box').on({
    'click':()=>{
        console.log(1111);
    },
    'mouseenter':()=>{
        console.log(222);
    },
    'mouseleave':()=>{
        console.log(333);
    }
})

事件类型：

鼠标事件：

click      单击
ablclick   双击
mouseenter 移入
mouseleave  移出
mousemove   移动
hover      移入移出的结合

键盘事件：

keydown  按下任意键
keypress 按下字符键
keyup    抬起

表单事件：

change  内容改变且失去焦点
input   输入事件
focus   获取焦点
blur    失去焦点

window事件：

resize 窗口改变
scroll 滚动事件

事件对象：

同js，不需要考虑兼容性

阻止事件冒泡： ev.stopPropagation()
阻止浏览器默认行为： ev.preventDefault()
阻止事件冒泡和默认行为：return false.
按下键盘代码：ev.keyCode ev.which

 // 事件委托
 $('.box').on('click','p',()=>{
     console.log(222222322322);
 })

动画：

参数（时间，回调函数--当动画执行完毕后执行的函数）
参数（动画速度[speed]，切换效果[easing]，动画执行完成后执行的函数[fn]）
    速度：slow，fast，normal
     效果：swing（默认），linear
1 hide()     隐藏
2 show()     显示
3 toggle()   隐藏显示转换
4 fadeIn（）   淡入
5 fadeOut（）  淡出
6 fadeToggle() 淡入淡出转换
   fadeTo([speed],opacity,[easing],[fn])  淡入淡出的方式将匹配元素调整到指定的透明度
        Opacity :透明度数值：范围：0到1，0 完全透明，0.5 50%透明， 1完全不透明
7 slideDown（） 卷出
8 slideUp（）   卷入
9 slideToggle（）卷入卷出转换

animate自定义动画:
   1 animate（params，[speed],[easing],[fn]）自定义动画的函数
    2 queue(queuename) 显示被选元素的排队函数
    3 dequeue（queuename） 运行被选元素的下一个排队函数
    4 stop（[clearqueue],[jumptoend]）  停止所有在指定元素上正在运行的动画
   Params:一组包含动画最终属性值的集合
   Queuename：队列名称，默认值fx标准效果队列
  Clearqueue，jumptoend 都是布尔类型，默认值false
          Clearqueue：规定是否停止被选元素所有加入队列的动画
          jumptoend ：规定是否立即完成当前的动画    

$('button').click(()=>{
    $('.box').animate({
        'width':500,
        'height':500,
        'background-color':'red'
    },10000,'linear').animate({
        'width':1000,
        'background-color':'green'
    },10000)
})

颜色变化插件：

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

程序媛刘刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录