JQuery函数 | 选择器 | 事件

最新推荐文章于 2024-06-04 14:04:24 发布

绯世&

最新推荐文章于 2024-06-04 14:04:24 发布

阅读量937

点赞数 23

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_73054157/article/details/135378360

版权

一.JQ入口函数

1.第一种入口函数

<script type="text/javascript">
    //JQuery的第一种入口函数
    $(document).ready(function(){
        //可以有多个入口函数，其他相关代码
    });
</script>

2.第二种入口函数

<script type="text/javascript">
    //JQuery的第一种入口函数
    $(function(){
        //可以有多个入口函数，其他相关代码
    });
</script>

3.JavaScript与JQuery入口函数的区别

JavaScript的window.onload入口函数事件是等到所有内容、外部图片等文件加载完成之后，才去执行window.onload事件。
JQuery的ready入口函数事件是在HTML所有标签加载完成之后，才去执行ready事件。
JQuery能做的JavaScript都能做到；而JavaScript能做的，JQuery不一定能做到。

二.选择器

JQ选择器分为“基本选择器，层级选择器，过滤选择器，属性选择器，筛选选择器，表单选择器”

1.基本选择器

基本选择器
名称	语义	代码
标签选择器	所有的标签，都是选择器。选择的是页面上所有这种类型的标签	`<script type="text/javascript"> //JQuery中的标签选择器 $("div").css("width","100%"); </script>`
id选择器	任何的HTML标签都可以有id属性，表示这个标签的名字或语义。一个HTML页面，不能出现相同id属性的标签。	`<script type="text/javascript"> //JQuery基本选择器中的ID选择器 $("#logo").css("width","60px"); </script>`
类选择器	任何的HTML标签都看可以有class属性。可以出现多个相同的class属性。同一个标签，可以同时属于多个类，可以有多个class属性，用空格隔开。	`<script type="text/javascript"> //JQuery基本选择器中的类选择器 $(".logo").css("width","60px"); </script>`
并集选择器	两个标签或多个标签同时进行修改	`<script type="text/javascript"> //JQuery基本选择器中的并集选择器 $("h2,span").css("font-size","20px"); </script>`
通配符*	HTML页面上所有的标签、内容等	`<script type="text/javascript"> //JQuery基本选择器中的通配符 $("*").css("padding","0"); </script>`

2.层级选择器

层级选择器
名称	语义	代码
后代选择器	选择的是某个标签的后代	`<script type="text/javascript"> //JQuery基本选择器中的后代选择器 $("div a").css("padding","0"); </script>`
儿子选择器	选择某元素的子元素	`<script type="text/javascript"> //JQuery基本选择器中的儿子选择器 $("h2>p").css("text-align","center"); </script>`
兄弟选择器	选择紧接着某个元素的所有某个元素	`<script type="text/javascript"> //JQuery基本选择器中的兄弟选择器 $("div~p").css("font-size","20px"); </script>`
下一个兄弟选择器	选择紧接着某个元素的所有某个元素	`<script type="text/javascript"> //JQuery基本选择器中的下一个兄弟选择器 $("div+h2").css("font-size","20px"); </script>`

3.过滤选择器

名称语义代码

:first

选择第一个元素

<script type="text/javascript">
//选择第一个元素
$("li:first").css("font-size","20px");
</script>

:last

选择最后一个元素

<script type="text/javascript">
//选择最后一个元素
$("li:last").css("font-size","20px");
</script>

:even

选择所有元素中偶数的元素，索引从0开始，包含0

<script type="text/javascript">
//选择所有元素中偶数的元素，索引从0开始，包含0
//隔行变色
$("li:even").css("color","red");
</script>

:odd

选择所有元素中奇数的元素，索引从0开始

<script type="text/javascript">
//选择所有元素中奇数的元素，索引从0开始
//隔行变色
$("li:odd").css("colo","bule");
</script>

:eq(index)

选择指定索引的元素，索引从0开始

<script type="text/javascript">
//选择指定索引的元素，索引从0开始
$("li:eq(3)").css("font-size","20px");
</script>

:gt(index)

选择索引大于指定index的元素，索引从0开始

<script type="text/javascript">
//选择索引大于指定index的元素，索引从0开始
$("li:gt(3)").css("font-size","20px");
</script>

:lt(index)

选择索引小于指定index的元素，索引从0开始

<script type="text/javascript">
//选择索引小于指定index的元素，索引从0开始
$("li:lt(3)").css("font-size","20px");
</script>

:header

选择所有的标题元素

<script type="text/javascript">
//选择所有的标题元素
$("li:header").css("font-size","20px");
</script>

:animated

选择当前正在执行所有动画的元素

<script type="text/javascript">
//选择当前正在执行所有动画的元素
$("li:animated").css("font-size","20px");
</script>

内容过滤选择器

名称语义代码

:contains(text)

选择包含text文本内容的元素

<script type="text/javascript">
//选择包含text文本内容的元素
$("p:contains(text)").css("background-color","bule");
</script>

:empty

选择不包含子元素或者文本节点的空元素

<script type="text/javascript">
//选择不包含子元素或者文本节点的空元素
$("p:empty").css("background-color","bule");
</script>

可见性过滤选择器

名称语义代码

:hidden

选择所有不可见元素

<script type="text/javascript">
//选择所有不可见元素
$("p:hidden").css("display","block");
</script>

:visible

选择所有可见元素

<script type="text/javascript">
//选择所有可见元素
$("p:visible").css("background-color","bule");
</script>

4.属性选择器

属性选择器
名称	语义	代码
[attribute]	选择拥有此属性的元素	`<script type="text/javascript"> //选择拥有此属性的元素 $("a[href]").css("background","bule"); </script>`
[attribute=value]	选择指定属性值为value的所有元素	`<script type="text/javascript"> //选择指定属性值为value的所有元素 $("a[href='baidu']").css("background","bule"); </script>`
[attribute!=value]	选择指定属性值不为value的所有元素	`<script type="text/javascript"> //选择指定属性值不为value的所有元素 $("a[href!='baidu']").css("background","bule"); </script>`
[attribute^=value]	选择属性值以value开始的所有元素	`<script type="text/javascript"> //选择属性值以value开始的所有元素 $("a[href^='web']").css("background","bule"); </script>`
[attribute$=value]	选择属性值以value结束的所有元素	`<script type="text/javascript"> //选择属性值以value结束的所有元素 $("a[href$='com']").css("background","bule"); </script>`
[attribute*=value]	选择属性值包含value的所有元素	`<script type="text/javascript"> //选择属性值包含value的所有元素 $("a[href*='w']").css("background","bule"); </script>`
[attrSel1] [attrSel2][attrSelN]	复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合。	`<script type="text/javascript"> //选择所有符合指定属性规则的元素，都符合才会被选中。 $("a[href][title='标题']").css("background","bule"); </script>`

5.筛选选择器

筛选选择器
名称	语义	代码
.eq(index)	选择指定索引的元素，索引从0开始	`<script type="text/javascript"> //选择指定索引的元素，索引从0开始 $("span").eq(1).css("font-size","40px"); </script>`
.first()	选择第一个元素	`<script type="text/javascript"> //选择第一个元素 $("span").first().css("font-size","40px"); </script>`
.parent()	选择父亲元素	`<script type="text/javascript"> //选择父亲元素 $("#sp").parent().css("font-size","40px"); $("p").parent("#logo").css("font-size","40px"); </script>`
.siblings()	选择所有的兄弟元素	`<script type="text/javascript"> //选择所有的兄弟元素 $("#li04").siblings().css("background", "gold"); $("#li04").siblings(".liItem").css("background", "gold"); </script>`
.find()	选择所有后代元素	`<script type="text/javascript"> //选择所有后代元素 $("#div").find().css("background", "gold"); $("div").find("#li04").css("background", "gold"); </script>`

6.表单选择器

表单选择器
名称	语义	代码
:input	选择所有<input>等表单元素	`<script type="text/javascript"> //选择所有<input>等表单元素 $(":input").css("background-color","red"); </script>`
:text	选择所有所有 type="text" 的 <input> 元素	`<script type="text/javascript"> //选择所有所有 type="text" 的 <input> 元素 $(":text").css("background-color","red"); </script>`
:password	选择所有 type="password" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="password" 的 <input> 元素 $(":password").css("background-color","red"); </script>`
:radio	选择所有 type="radio" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="radio" 的 <input> 元素 $(":radio").css("background-color","red"); </script>`
:checkbox	选择所有 type="checkbox" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="checkbox" 的 <input> 元素 $(":checkbox").css("background-color","red"); </script>`
:submit	选择所有 type="submit" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="submit" 的 <input> 元素 $(":submit").css("background-color","red"); </script>`
:image	选择所有 type="image" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="image" 的 <input> 元素 $(":image").css("background-color","red"); </script>`
:reset	选择所有 type="reset" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="reset" 的 <input> 元素 $(":reset").css("background-color","red"); </script>`
:button	选择所有 type="button" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="button" 的 <input> 元素 $(":button").css("background-color","red"); </script>`
:file	选择所有 type="file" 的 <input> 元素	`<script type="text/javascript"> //选择所有 type="file" 的 <input> 元素 $(":file").css("background-color","red"); </script>`

名称	语义	代码
:enabled	选择所有可用元素	`<script type="text/javascript"> //选择所有可用元素 $(":enabled").css("background-color","red"); </script>`
:disabled	选择所有不可用元素	`<script type="text/javascript"> //选择所有不可用元素 $(":disabled").css("background-color","red"); </script>`
:checked	选择所有被选中的元素，如单选框、多选框	`<script type="text/javascript"> //选择所有被选中的元素，如单选框、多选框 $(":checked").css("background-color","red"); </script>`
:selected	选择所有被选中项元素，如下拉列表、列表框	`<script type="text/javascript"> //选择所有被选中项元素，如下拉列表、列表框 $(":selected").css("background-color","red"); </script>`

三.事件

1.事件处理程序

2.事件对象操作

1）.绑定事件

<script type="text/javascript">
  //绑定一个事件一个条件
  $("button").click(function(){
      alert("绑定了Click事件");
  });
  //绑定多个事件一个条件
  $("button").bind("click mouseenter",function(){
      alert("绑定了Click、Mouseenter事件");
  });
  //绑定多个事件多个条件
  $("button").bind({
      "click" : function(){
          alert("绑定了Click事件");
      },
      "mouseenter" : function(){
          alert("绑定了Mouseenter事件");
      }
  });
  //绑定一个事件一个条件并传递参数
  $("button").bind("click","传递参数",function(event){
      alert(event.data);  //结果为：传递参数
  });
  //绑定一个事件一个条件并传递参数对象
  $("button").bind("click",{color : "pink"},function(event){
      alert(event.data.color);  //结果为：pink
  });
  //只触发一次的事件
  $("button").one("click",function(){
      alert("使用One事件只能触发一次");
  });
  //给所有的子元素绑定事件
  $("ul").delegate("li","click",function(){
      alert($(this).html());  //输出结果为当前点击的某个li元素
  });
  //绑定事件，推荐使用，JQuery版本1.7+
  //第一个参数为使用空格分隔的事件类型
  //第二个参数为用于触发事件的元素的后代
  //第三个参数为事件被触发时要传递的event.data参数
  //第四个参数为该事件被触发时执行的函数
  $("ul").on("click","li",{color : "pink"},function(event){
      alert($(this).html());  //输出结果为当前点击的某个li元素
      alert(event.data.color);  //输出传递的参数：pink
  });
</script>

2）.解绑事件

3）.触发事件

3.阻止事件冒泡和默认行为

4.事件属性

事件
事件属性	当以下情况发生时，执行此事件
bind()	向匹配元素附加一个或更多事件处理器，绑定事件
blur()	触发、或将函数绑定到指定元素的 blur 事件，失去焦点事件
change()	触发、或将函数绑定到指定元素的 change 事件，改变事件
click()	触发、或将函数绑定到指定元素的 click 事件，点击事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件，双击事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序
error()	触发、或将函数绑定到指定元素的 error 事件，当加载文档或图像时发生某个错误
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()
event.pageX	相对于文档左边缘的鼠标位置
event.pageY	相对于文档上边缘的鼠标位置
event.preventDefault()	阻止事件的默认动作
event.result	包含由被指定事件触发的事件处理器返回的最后一个值
event.target	触发该事件的 DOM 元素
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
event.type	描述事件的类型
event.which	指示按了哪个键或按钮
focus()	触发、或将函数绑定到指定元素的 focus 事件，获得焦点事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件，某个键盘的键被按下
keypress()	触发、或将函数绑定到指定元素的 key press 事件，某个键盘的键被按下或按住
keyup()	触发、或将函数绑定到指定元素的 key up 事件，某个键盘的键被松开
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件，加载事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件，某个鼠标按键被按下
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件，鼠标进入元素，鼠标经过只会触发一次
mouseleave()	触发、或将函数绑定到指定元素的 mouse leave 事件，鼠标离开元素，鼠标经过只会触发一次
mousemove()	触发、或将函数绑定到指定元素的 mouse move 事件，鼠标被移动
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件，鼠标从某元素移开，每遇到一个子元素就会触发一次
mouseover()	触发、或将函数绑定到指定元素的 mouse over 事件，鼠标被移到某元素之上，每遇到一个子元素就会触发一次
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件，某个鼠标按键被松开
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
select()	触发、或将函数绑定到指定元素的 select 事件，文本被选定
submit()	触发、或将函数绑定到指定元素的 submit 事件，提交按钮被点击，提交事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload()	触发、或将函数绑定到指定元素的 unload 事件，用户退出页面

绯世&

关注

23
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
JQuery函数 | 选择器 | 事件

JavaScript的window.onload入口函数事件是等到所有内容、外部图片等文件加载完成之后，才去执行window.onload事件。JQuery能做的JavaScript都能做到；而JavaScript能做的，JQuery不一定能做到。JQuery的ready入口函数事件是在HTML所有标签加载完成之后，才去执行ready事件。JQ选择器分为“基本选择器，层级选择器，过滤选择器，属性选择器，筛选选择器，表单选择器”一个HTML页面，不能出现相同id属性的标签。
复制链接

扫一扫