JQuery常用操作

最新推荐文章于 2024-07-04 12:16:35 发布

Zz Apollo

最新推荐文章于 2024-07-04 12:16:35 发布

阅读量1.3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/ch_improve/article/details/90342360

html 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了jQuery的使用方法，包括引入方式、入口函数的完整与化简写法、选择器的过滤和转移操作、自定义动画animate的格式，还阐述了控制html属性的html()、prop()、attr()方法及jq事件属性等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.jQuery引入

    <script src="js/jquery-1.12.4.js"></script>

2.jQuery入口函数

格式一：完整写法

        $(document).ready(function(){
            alert(1)
        })

格式二：化简写法

        $(function(){
            alert(2)
        })

3.jq选择器

$('#myId') 	选择id为myId的网页元素
$('.myClass') 	选择class为myClass的元素
$('li') 	选择所有的li元素
$('#ul1 li span') 	选择id为为ul1元素下的所有li下的span元素
$('input[name=first]')	选择name属性等于first的input元素

对选择集进行过滤

$('div').has('p')	选择包含p元素的div元素
$('div').not('.myClass')	选择class不等于myClass的div元素
$('div').eq(5)	选择第6个div元素
$('div').eq(-2)	选择倒数第二个div元素

选择集转移

$('#box').prev()	选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll()	选择id是box的元素之前所有的同辈元素
$('#box').next()	选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll()	选择id是box的元素后面所有的同辈元素
$('#box').parent()	选择id是box的元素的父元素
$('#box').children()	选择id是box的元素的所有子元素
$('#box').siblings()	选择id是box的元素的同级元素
$('#box').find('.myClass')	选择id是box的元素内的class等于myClass的元素

4.自定义动画animate

格式：
$(目标|选择器).animate(字典形式写的css键值对，时间，运动曲线，回调函数)

css键值对：{属性：值， 属性：值， 属性：值……}  最重要的参数
时间：单位毫秒，不写的话，默认值600
运动曲线：seing linear……工作中不用
回调函数：是匿名函数，表示动画完成之后要执行的命令

5.jq控制html属性

1、html() 取出或设置html内容
             格式：1.html（）取html的内容
                        2.html（内容）更改html的内容
2、prop() 取出或设置某个属性的值
             格式：1.prop（属性）获取某个属性的值
                        2.prop（属性，值）更改某个属性的值
3、attr() 取出或设置某个属性的值，可以是自定义的属性
              格式：1.attr（属性）获取某个属性的值
                         2.attr（属性，值）更改某个属性的值

6.jq事件属性

blur()  元素失去焦点
focus()  元素获得焦点
click()    单击
mouseover()  鼠标进入，子集触发
mouseout()  鼠标离开，子集触发
mouseenter()  鼠标进入，子集不触发
mouseleave()  鼠标离开，子集不触发
hover(函数1， 函数2)   鼠标滑过
ready()    DOM加载完成
submit()   用户递交表单触发
each()   同级元素循环