jQuery学习笔记_计算机 jq-CSDN博客

本文链接：https://blog.csdn.net/qq_51865098/article/details/120536454

初学分享，不足之处敬请批评指正！

学习了js之后再学习jquery感觉轻松了不少。但是我认为js的思想很重要，掌握了思想之后，再学jQuery就更加得心应手。jQuery在语法使用起来比较方便容易理解，特别是在操作dom的时候比js简便许多。

jQuery介绍

jq实际上就是一个类库，里面封装了许多方法（function），我们在使用的时候可以直接调用，使编程的时候更加便捷。jQ的优点包括：dom操作、链式写法、动画便捷、强大的Ajax功能、生态丰富（开源）、支持第三方插件。

jQuery的引入方式

1、将jQuery核心类下载到本地，然后按照路径引入：

jQuery下载官网：http://www.jq22.com/jquery-info122;

2、可以通过 CDN（内容分发网络）引用它：

这个是百度，还有Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery

jQuery入口函数：

1、 $(function(){...})

2、 $(document).ready(function(){...})

js和jQ互转

        js与jq互转
                    jQ->js
                               $("标签名")[下标]
                                $("标签名").get(下标)
                   js->jQ
                               $(js变量        )
                                $("#id/.class")

jQuery事件

        click()点击
        ready()准备完毕
        hover()鼠标移入移除
        change()当表单值发生改变

事件	描述	支持元素或对象
blur( )	元素失去焦点	a, input, textarea, button, select, label, map, area
change( )	用户改变域的内容	input, textarea, select
click( )	鼠标点击某个对象	几乎所有元素
dblclick( )	鼠标双击某个对象	几乎所有元素
error( )	当加载文档或图像时发生某个错误	window, img
focus( )	元素获得焦点	a, input, textarea, button, select, label, map, area
keydown( )	某个键盘的键被按下	几乎所有元素
keypress( )	某个键盘的键被按下或按住	几乎所有元素
keyup( )	某个键盘的键被松开	几乎所有元素
load( fn )	某个页面或图像被完成加载	window, img
mousedown( fn )	某个鼠标按键被按下	几乎所有元素
mousemove( fn )	鼠标被移动	几乎所有元素
mouseout( fn )	鼠标从某元素移开	几乎所有元素
mouseover( fn )	鼠标被移到某元素之上	几乎所有元素
mouseup( fn )	某个鼠标按键被松开	几乎所有元素
resize( fn )	窗口或框架被调整尺寸	window, iframe, frame
scroll( fn )	滚动文档的可视部分时	window
select( )	文本被选定	document, input, textarea
submit( )	提交按钮被点击	form
unload( fn )	用户退出页面	window

jQuery类的操作

                addClass()添加类
                removeClass()切换类
                toggleClass()切换类

hasClass() 检查匹配的元素是否拥有指定的类。

$(selector).css() 设置或返回样式属性

css("width","200px")
css({width:"200px",height:"300px"}

jQuery文本与值

                text()设置或获取文本
                html()设置或获取html
                val()设置或获取值

jQuery常用切换方法

$(selector).hide(speed,callback) 隐藏选中的元素
             $(selector).show(speed,callback) 显示选中的元素
             $(selector).toggle(speed,callback) 对被选元素进行隐藏和显示的切换
$(selector).slideDown(speed,callback) 向下滑动显示
$(selector).slideUp(speed,callback) 向上滑动隐藏
             $(selector).slideToggle(speed,callback)滑动切换
             $(selector).fadeToggle(speed,callback)淡入淡出切换
$(selector).fadeIn(speed,callback)淡入
$(selector).fadeOut(speed,callback)淡出
$(selector).fadeTo(speed,callback)把选中的元素改变到给定的透明度

speed可以是fast、normal、slow，也可以直接写毫秒值

callback是回调函数在方法执行结束后执行

jQuery常用的dom操作方法

$(selector).parent() 返回被选元素的直接父元素。
         $(selector).parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素                                                 (<html>)，可选参数来过滤对祖先元素的搜索
        $(selector).children() 返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索
        $(selector).find() 返回被选元素的后代元素，一路向下直到最后一个后代，可选参数来过滤对后后代元素的搜索
        $(selector).siblings() 返回被选元素的所有同胞元素。过滤对同胞元素的搜索。
        $(selector).next() 返回被选元素的下一个同胞元素。
        $(selector).nextAll() 返回匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选
        $(selector).prev() 返回的是前面的同胞元素
        $(selector).prevAll() 返回匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选
        $(selector).first() 将匹配元素集合缩减为集合中的第一个元素。
        $(selector).last() 将匹配元素集合缩减为集合中的最后一个元素。
        $(selector).eq() 指定索引的新元素。
        $(selector).get() 获得由选择器指定的 DOM 元素。
        $(selector).index() 返回指定元素相对于其他指定元素的 index 位置。
        注：parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选，比如：parents()、siblings()、nextAll()、prevAll()、siblings()。
        原文链接：https://blog.csdn.net/zhongqi2513/article/details/51394454

jQuery属性操作

1、attr 属性
            .prop(属性名) 获取节点属性值
            .prop(name,value)设置节点属性值
            .prop({name1:value1,name2:value2}) 设置多个节点属性值
     2、attr 属性
            .attr(属性名) 获取节点属性值
            .attr(name,value)设置节点属性值
            .attr({name1:value1,name2:value2}) 设置多个节点属性值
3、 prop和attr的区别
            1. attr获取节点的初始属性值
          prop获取的是节点的动态值
            2. attr设置的属性值在dom节点是可见的
          prop设置的属性值在dom节点上不可见