首页 > 其他分享 >Jquery

Jquery

时间:2023-09-25 15:32:06浏览次数:32  
标签:Jquery jquery 对象 元素 事件 div 选择器

1.jquery就是一个js库

2.jquery这个库向外暴露了jQuery或者$()这个函数。

3.得到一个jquery对象 let obj=$('#id')

4.$()此时$代表函数,$.each()此时$代表对象。

Jquery_jquery

参数是选择器字符串返回一个jquery对象。注意只有jquery对象才能够调用val()...html()的jquery方法。

5.jquery对象里面包含的是dom元素的伪数组,可能也只有一个dom元素。

$('<input type="text" name="" id="hello">')  = $('#hello')

要分清dom对象还是jquery对象。$()返回的是jquery对象。

6.伪数组是一个对象

Jquery_选择器_02

7.选择器:

交集选择器:不使用任何分隔符,选择同时满足多个条件的元素,只有同时匹配两个选择器的元素才会被选中。(例如div.name)选的就是div并且有class=name的div。

子代选择器:使用 >,选择所有被父元素包含的直接子元素,更深一层的元素不起作用。

兄弟选择器:使用 ~,在同一父元素下选择在指定元素之后的所有兄弟元素

兄弟选择器用来选择与某元素位于同一个父元素之中,且位于该元素之后的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种,对它们的讲解如下。

临近兄弟选择器

该选择器使用加号“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素,而且第二个元素必须紧跟第一个元素。

$('li:gt(0):lt(2)').css('background-color','red')

大于0就是除去第一个,小于2除去第一个后选2个

8.$.attr(attr,value):用来追加一个属性,这是一个jquery方法。操作css属性值为费布尔值

$(:checkboxs).prop('checked',true):专门操作css属性值为布尔值的属性.

9:$('p:eq(index)')选择索引下表为index的p标签

10.$.offset()获取元素对于页面的位置。$.position()获取元素相对于父元素左上角的位置

$.scrollTop():获取元素的滚动条的坐标

11.jquery返回的伪数组是一个对象,里面都是dom元素,比如$('div')返回的是一个{div,div,div........}对象。$('div').first()得到的是第一个的div的jquery对象。$('div')[0]得到的是div的dom元素。

12.事件绑定

Jquery_jquery对象_03

Jquery_jquery_04

mouseover在父元素在嵌套子元素的时候,如果鼠标移入子元素中也会触发父元素的mouseover事件

mouseenter不会触发.

Jquery_jquery对象_05

13.事件委托:现在每个li需要添加一个事件,所以用事件委托 给ul加一个事件就行。(事件委托是给父元素添加的)

<ul>//把事件给ul,而不是给li
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

$().delegate('委托元素','委托事件名',callback)

14.关于坐标

scrollTop():获取元素的滚动条坐标 offse()获取元素的页面坐标

Jquery_jquery对象_06

15.jquey对象的查找,过滤:注意是对象元素的内部元素

Jquery_jquery_07

16.文档处理:插入后部是指插入元素里面的最后。。。。

Jquery_jquery对象_08

17.事件模块:

Jquery_选择器_09

18事件坐标:

Jquery_jquery对象_10

19.关于页面加载问题:

Jquery_选择器_11

标签:Jquery,jquery,对象,元素,事件,div,选择器
From: https://blog.51cto.com/u_14234172/7596314

相关文章

  • JQuery
    一、简介目前最流行的JavaScript函数库之一,对JavaScript进行了封装。并不是一门新语言,而是将常用的、复杂的JavaScript操作进行函数化封装,封装后可以直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。扩展:目前jQuery有三个大版本1.x:兼容ie678,使......
  • jQuery对输入框进行验证,只允许输入字母和数字
    使用jQuery来对这两个输入框进行验证,确保只允许输入字母和数字,不允许输入中文字符。以下是相应的示例代码:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> <scriptsrc="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js&qu......
  • js jquery input radio点击事件
     HTML:<inputtype="radio"name="myname"value="1"/>1<inputtype="radio"name="myname"value="2"/>2 jquery代码: //点击事件change$('input[type=radio][name=myname]').ch......
  • jQuery 指定区域的内容循环滚动
    需求:页面指定区域内的内容循环滚动,但是内容形式、高度都不固定,是接口从编辑器提取出来的内容。代码:<divid="container5"><divclass="content"id="f12red1">自2023年9月20日24时起,国内汽、<br>柴油价格(标准品,下同)每吨分别提高70元。<br>自202......
  • struts2.1.8.1+jquery1.4.2返回json数据
    1、引入包(本文中的包全部引自struts-2.1.8.1\lib):struts2-json-plugin-2.1.8.1.jarjson-lib-2.1.jarcommons-collections-3.2.jarcommons-beanutils-1.7.0.jarcommons-lang-2.3.jarcommons-logging-1.0.4.jarezmorph-1.0.3.jar这7个包是返回json形式的数据必须的。因为jso......
  • js/jquery 关于select 的一些操作
    1.如何设置默认选中呢设置默认选中可在option中添加selected="selected",具体举例如下:<optionvalue="2"selected="selected">test2</option><selectid="citySel"class="select"><optionvalue="......
  • jQuery与Ajax:“特别的”load()方法(筛选文档、传递方法、回调函数)
    “大名鼎鼎的”jQuery因为其极简的引用方式而在N年前备受追捧,而今“浪潮”过去,还剩下什么?我认识jQuery,只是在去年接触ajax时了解,从而感兴趣,进而深入探究(其实也没多深入,只是相关的看了一下)。不得不说,jQuery对ajax支持的四个type:post(一般用于发送)、get(一般常用于接收)、put(修改)、dele......
  • Jquery设置select控件指定text的值为选中项
    北环路天河路清华园路徐寨路朝凤路园田路varstreet=‘清华园路’;(‘#streetidoption:contains(’+street+‘)’).each(function(){if((this).text()==street){$(this).attr(‘selected’,true);}});......
  • jquery设置图片可手动拖拽
    JQuery是一款流行的JavaScript框架,可以轻松实现网页交互效果。而其中一种常见效果是图片手动拖拽。以下是设置图片手动拖拽的JQuery代码。$(document).ready(function(){varisDragging=false;varmousePos={x:0,y:0};varelemPos={x:0,y:0};var$elem=$......
  • Web阶段:第五章:JQuery库
    Jquery介绍1.什么是JQuery?jQuery,顾名思义,也就是JavaScript和查询(Query),它就是辅助JavaScript开发的js类库。2.JQuery核心思想:它的核心思想是writeless,domore(写得更少,做得更多),所以它实现了很多浏览器的兼容问题。3.JQuery流行程度jQuery现在已经成为最流行的javascript库......