jQuery

jQuery

导入jQuery

导入在线的 或者本地的

1
2
3
4
5
6
7
8
9
//在线引用
<script src = "某某在线引用网址"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

//本地引用
<script src = "文件的目录"></script>
<script src="js/jquery-1.11.2.js"> </script>

//仔细一想这不是智障吗，我为什么还要拎出来写

基本语法

$(“p”)是用于选择网页中所有的p元素；

$(“p”).click()方法指定选中的<p>元素的click单击事件处理函数

$(this)是一个 jQuery对象，表示当前引用的HTML元素对象（此处指p元素）。

$(this).hide()表示选中当前的HTML元素，并将其隐藏。

1
$(selector).action() //这个就是jQuery最核心的内容

选择器

ID选择器

ID选择器可以根据指定ID值返回一个唯一的元素，下面主要就是这个公式的具体应用

1
2
3
4
5
6
7
8
<body>
    <a href = "" id = "test-jqery">牛逼</a>
    <script>
        $("#test-jqery").click(function(){        //id选择器就是在前面加上一个#
            alert("hello jqery")
        })
    </script>
</body>

标签选择器

1
$("p").click();

选择所有的p标签

类选择器

类选择器可以根据元素的CSS类选择一组元素。

例如：

1
2
3
$(".left")               //为选择页面中所有的class属性为left的元素；

$("p.left")              //为选择页面中所有的class为left的p元素。

祖先后代选择器

祖先后代选择器中祖先和后代选择符之间使用空格隔开，不限制嵌套层次数。

1
2
3
$(".left p") 

$("form input")

父子选择器

父子选择器的父元素和子元素之间使用符号“>”隔开，前后元素的嵌套关系只能是一层。

1
$("div > ul")       //为选择div元素内直接嵌套的ul元素。
父子选择器和祖先后代选择器的区别

父子选择器的父元素和子元素之间使用符号“>”隔开，前后元素的嵌套关系只能是一层。

祖先后代选择器中祖先和后代选择符之间使用空格隔开，不限制嵌套层次数。

前后选择器

前后选择器可以选择某元素的下一个同级兄弟元素

前后元素中间使用“+”分隔，选择在某元素后面的next元素，相当于next()方法

1
2
3
$("#my+img")              //是选择id为my的元素后的第一个同级别img元素，相当于

$("#my").next("img")

过滤器

内容过滤器

选择器 说明
:contains(text) 匹配包含给定文本的元素
:has(selector) 匹配含有选择器所匹配的元素的元素
:empty() 匹配所有不包含子元素或者文本的空元素
:parent() 匹配含有子元素或者文本的元素，与:empty()相反

可见性过滤器

可见性过滤器可以根据元素的可见性进行选择，可见性过滤器包括:hidden和:visible。

其中可见选择器“:hidden”不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 （<input type="hidden">）和visible:hidden之类的元素；

可见选择器“:visible”可以匹配所有可见的元素。

属性过滤器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

选择器 说明
[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定属性为特定值的元素
[attribute!=value] 匹配给定属性不等于特定值的元素
[attribute^=value] 匹配给定属性是以特定值开头的元素
[attribute$=value] 匹配给定属性是以特定值结尾的元素
[attribute*=value] 匹配给定属性包含特定值的元素
[attributeFilter1] [attributeFilter2] … 复合属性选择器，匹配属性同时满足多个条件的元素

子元素过滤器

选择器 说明
:first-child 获取第一个子元素
:last-child 获取最后一个子元素
:nth-child(index|even|eq|odd) 通过相关指数获取子元素
:only-child 获取子元素唯一的元素

获取或设置HTML元素的内容

如果要获取HTML元素的内容，其语法格式如下：

1
var htmlStr= $(selector).html();

如果要设置HTML元素的内容，其语法格式如下：

1
$(selector).html("修改字符串");
方 法 说 明
$(selector).text() 用于返回或设置元素的文本内容；
$(selector).html() 用于返回或设置元素的内容（包括HTML标记在内）；
$(selector).val() 用于返回或设置表单字段的值；

jQuery常用事件

事件函数 说 明
$(“选择器”).click() 鼠标单击触发事件，参数可选（data，function）
$(“选择器”).dblclick() 双击触发，同上
$(“选择器”).mousedown()/mouseup() 鼠标按下/弹起触发事件
$(“选择器”).mousemove() 鼠标移动事件
$(“选择器”).mouseover()/mouseout() 鼠标移入/移出触发事件
$(“选择器”).mouseenter()/mouseleave() 鼠标进入/离开触发事件*
$(“选择器”).hover(func1,func2) 鼠标移入调用func1函数，移出调用func2函数
$(“选择器”).focusin() 鼠标聚焦到该元素时触发事件
$(“选择器”).focusout() 鼠标失去焦点时触发事件
$(“选择器”).focus()/.blur() 鼠标聚焦/失去焦点触发事件（不支持冒泡）
$(“选择器”).change() 表单元素发生改变时触发事件
$(“选择器”).select() 文本元素被选中时触发事件
$(“选择器”).submit() 表单提交动作触发*
$(“选择器”).keydown()/keyup() 键盘按键按下/弹起触发
$(“选择器”).keypress() 键盘按下过程中触发

jQuery显示与隐藏

在jQuery中使用show()方法显示，hide()方法进行隐藏。

其语法格式如下所示：

1
2
3
$("选择器").hide(speed,callback)

$("选择器").show(speed,callback)

jQuery淡入与淡出

fadeIn()：用于淡入已隐藏的元素；

fadeOut()：用于淡出可见元素；

fadeToggle()：可以在 fadeIn() 与 fadeOut() 方法之间进行切换；

fadeTo()：允许渐变到指定的不透明度

jQuery向上或向下滑动

slideUp()用于向上滑动元素

slideDown()方法用于向下滑动元素

调用方法分别为：

1
2
3
$(selector).slideUp(speed,[callback])

$(selector).slideDown(speed,[callback])

jQuery简单动画

自定义动画的语法定义格式如下所示：

1
animate(params,speed,callback)

停止动画

网页中有时需要停止匹配元素正在进行的动画，这时要使用停止元素的动画方法stop()，其语法结构形式如下所示：

1
stop([clearQueue],[gotoEnd])
前端
#jQuery
jQuery
http://example.com/2022/04/22/jQuery/
作者
Mercury
发布于
2022年4月22日
许可协议