JQuery 认知

最新推荐文章于 2022-10-13 19:40:34 发布

Star_kang

最新推荐文章于 2022-10-13 19:40:34 发布

阅读量148

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/Star_kang/article/details/83303812

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一，jQuery框架
jQuery是JavaScript框架
jQuery功能：HTML标签的选区，标签的操作，CSS操作，事件操作，动画设置，DOM操作，Ajax等
jQuery是轻量级“写的少”，“做的多”，

二，jQuery的语法
$：表示 j Q u e r y 框架的标识符基本方法：$ (选择器或标签对象)，方法();
三，jQuery选择器
id选择器 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id 选择器名") \dots$ (".class名字")
标签选择器： $(" 标签名 ") 通配符：$ ("*")：选取页面上所有的标签；
分组： $(" d i v, h 1 ") : 选取 d i v 和 h 1 派生：$ (“div h2”):选取div中的h2
当前标签：$(“this”);
$(" p : f i r s t ") 选取第一个 p 标签后代$ (“ul li:first”);选取 ul的第一个li标签；
$(“ul li:first-child”);选取每个ul的每一个li标签
$(" [属性] ") ：选取带有此属性的标签，$ ("[href]"):选取到a标签
$(" [属性 -^{'} 值^{'}] ") ：选取带有此属性 = 值的标签比如：$ (“target=’_blank’”)
$(“div:even”)下标的偶数的位置的div标签
$(“div:odd”)下标的奇数的位置的div标签
$(“p:eq(0)”)选取下标为0 的div标签

四，文档就绪
//预加载方法，加载标签之后，再加载jQuery方法
$(document).ready(function () {
//事件绑定；把事件绑定到标签中；

        });
        //简写
        $(function () {

        });
  目的：
    1，代码是从上往下执行的，防止提前运行，jQuery方法，先加载document：DOM文档对象模型，页面中的标签
    2，先加载页面中的标签，再加载或者运行jQuery方法；
    JavaScript中；<body onload=""></body>
    onload事件：window。onload-function(){}
    jQuery的加载速度更快比onload更早
    jQuery预加载：只要等加载DOM标签之后，就会执行
    onload等所有的内容都加载完成，才会执行；

五,jQuery事件
以JavaScript中的事件的on后的动作为jQuery事件的方法名
常用的jQuery事件
点击事件，click（）；
双击：dbclick（）；
鼠标悬停事件：mouseenter
鼠标移开事件：mouseleave（）
键盘事件：keydown（），keyup（）；
表单事件：获取焦点focus（），失去焦点：blur（），表单提交：submit（）；
值发生改变change（）；
//hover(悬停的方法，离开的方法)
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲p1").hover( \dots$ (选择器)
绑定事件： $(选择器) ，事件名 (f u n c t i o n ()) e g ；$ ("#id").click(function(){
$(this).css(“color”,“red”)
});
六，jQuery效果
隐藏显现
hide(),和show();
hide(时间，方法执行完后调用的方法)；
toggle();在隐藏和显现之间切换，
淡入，淡出效果
实现元素的淡入，淡出
fadeIn（）淡入
fadeOut（）淡出
fadeToggle（）
fadeTo()
fadeInI()淡入；淡入已经隐藏的元素–》以透明度0变成1；
fadeOut（）淡出，淡出已经显现的元素，–》以透明度1变成0
fadeIn（时间，回调函数）
fadeTo(“fast”,0.5,“swing”);
fadeTo(时间，透明度值，速度，回调函数)
实际调用animtea（{opcity：透明度值}，时间，速度，回调函数）方法
滑动
滑动方法：
slidedown（）；向下滑动显示
slideup();向上滑动隐藏
slideToggle();滑动切换隐藏与显现
slidedown（时间）；

    动画：
    animate
    备注：色彩动画不能设置，包括背景颜色，字体颜色

Star_kang

关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录