jQuery语法介绍

Posted 2020-08-16 manmanlu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery语法介绍相关的知识，希望对你有一定的参考价值。

来自：http://www.cnblogs.com/ccorz/p/5803353.html

jQuery类似于Python中模块的概念,是集成了javascript和Dom的模块.大致分为两种版本1.12....或者2....的版本,由于2以上的版本去掉了IE9以下的兼容性,所以我们一般写页面使用1.12XXX的版本.jQuery的语法很多,jQuery API 中文在线手册

jQuery1.12.4下载地址

查找

选择器

id选择器

根据给定的ID匹配一个元素。
使用任何的元字符（如 !"#$%&\'()*+,./:;<=>?@[\\]^`{|}~）作为名称的文本部分， 它必须被两个反斜杠转义：\\\\。

$("#myDiv");
#foo\\\\[bar\\\\]

标签选择器

根据给定的元素标签名匹配所有元素

//查找DIV的元素集合
$("div");

类选择器

根据给定的css类名匹配元素。一个元素可以有多个类，只要有一个符合就能被匹配到。

//查找所有类是 "myClass" 的元素.
$("#.myClass");

通配符

*,匹配所有元素,多用于结合上下文来搜索:$("*").

组合选择器

将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

//找到匹配任意一个类的元素
$("div,span,p.myClass")

层级选择器

ancestor descendant

在给定的祖先元素下匹配所有的后代元素

//找到表单中所有的 input 元素
$("form input")

parent > child

在给定的父元素下匹配所有的子元素

//匹配表单中所有的子级input元素。
$("form > input")

prev + next

匹配所有紧接在 prev 元素后的 next 元素,包括后面的子元素

//匹配所有跟在 label 后面的 input 元素
$("label + input")

prev ~ siblings

兄弟元素,匹配 prev 元素之后的所有 siblings 元素

//找到所有与表单同辈的 input 元素
$("form ~ input")

基本筛选器

:first

获取匹配的第一个元素

HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$(\'li:first\');

结果:
[ <li>list item 1</li> ]

:not(selector)

去除所有与给定选择器匹配的元素

描述:
查找所有未选中的 input 元素

HTML 代码:
<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代码:
$("input:not(:checked)")

结果:
[ <input name="apple" /> ]

:even

匹配所有索引值为偶数的元素，从 0 开始计数

描述:
查找表格的1、3、5...行（即索引值0、2、4...）
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:even")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

:odd

匹配所有索引值为奇数的元素，从 0 开始计数

描述:
查找表格的2、4、6行（即索引值1、3、5...）
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:odd")

结果:
[ <tr><td>Value 1</td></tr> ]

:eq(index)

匹配一个给定索引值的元素,从 0 开始计数

描述:
查找第二行
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:eq(1)")

结果:
[ <tr><td>Value 1</td></tr> ]

:gt(index)

匹配所有大于给定索引值的元素,从0开始计数

描述:
查找第二第三行，即索引值是1和2，也就是比0大
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:gt(0)")

结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

:last()

获取匹配的最后几个元素

描述:
获取匹配的最后个元素
HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$(\'li:last\')

结果:
[ <li>list item 5</li> ]

:lt(index)

匹配所有小于给定索引值的元素,从0开始计数

查找第一第二行，即索引值是0和1，也就是比2小
HTML 代码:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:lt(2)")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

内容

:contains(text)

匹配包含给定文本的元素,参数为一个用以查找的字符串

描述:
查找所有包含 "John" 的 div 元素
HTML 代码:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

jQuery 代码:
$("div:contains(\'John\')")

结果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

:empty

匹配所有不包含子元素或者文本的空元素

描述:
查找所有不包含子元素或者文本的空元素
HTML 代码:
<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:
$("td:empty")

结果:
[ <td></td>, <td></td> ]

:has(selector)

匹配含有选择器所匹配的元素的元素

描述:
给所有包含 p 元素的 div 元素添加一个 text 类
HTML 代码:
<div><p>Hello</p></div>
<div>Hello again!</div>

jQuery 代码:
$("div:has(p)").addClass("test");

结果:
[ <div class="test"><p>Hello</p></div> ]

可见性

:hidden

匹配所有不可见元素，或者type为hidden的元素

描述:
查找隐藏的 tr
HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:hidden")

结果:
[ <tr style="display:none"><td>Value 1</td></tr> ]
--------------------------------
描述:
匹配type为hidden的元素
HTML 代码:
<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jQuery 代码:
$("input:hidden")

结果:
[ <input type="hidden" name="id" /> ]

:visible

匹配所有的可见元素

描述:
查找所有可见的 tr 元素
HTML 代码:
<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:
$("tr:visible")

结果:
[ <tr><td>Value 2</td></tr> ]

属性

[attribute=value]

匹配给定的属性是某个特定值的元素

查找所有 name 属性是 newsletter 的 input 元素
HTML 代码:
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:
$("input[name=\'newsletter\']").attr("checked", true);

结果:
[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]

筛选

过滤

eq(index|-index)

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，具体可以看以下示例。

参数index描述:
获取匹配的第二个元素
HTML 代码:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:
$("p").eq(1)

结果:
[ <p> So is this</p> ]

first()

获取第一个元素

描述:
获取匹配的第一个元素
HTML 代码:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:
$(\'li\').first()

结果:
[ <li>list item 1</li> ]

last()

获取最后个元素

hasClass(class)

检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。

描述:
给包含有某个类的元素进行一个动画。
HTML 代码:
<div class="protected"></div><div></div>

jQuery 代码:
$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

查找

children([expr])

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

描述:
查找DIV中的每个子元素。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:
$("div").children()

结果:
[ <span>Hello Again</span> ]
--------------------
描述:
在每个div中查找 .selected 的类。
HTML 代码:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:
$("div").children(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

find(expr|obj|ele)

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

描述:
从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
HTML 代码:
<p><span>Hello</span>, how are you?</p>

jQuery 代码:
$("p").find("span")

结果:
[ <span>Hello</span> ]

next([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合.这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

描述:
找到每个段落的后面紧邻的同辈元素。
HTML 代码:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:
$("p").next()

结果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]
----------------
描述:
找到每个段落的后面紧邻的同辈元素中类名为selected的元素。
HTML 代码:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:
$("p").next(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

nextAll([expr])

查找当前元素之后所有的同辈元素。可以用表达式过滤

描述:
给第一个div之后的所有元素加个类
HTML 代码:
<div></div><div></div><div></div><div></div>

jQuery 代码:
$("div:first").nextAll().addClass("after");

结果:
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

nextUntil([exp|ele][,fil])

查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll() 效果一样。

offsetParent()

返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

描述:
设置最近的祖先定位元素的背景颜色
HTML 代码:
<div style="width:70%;position:absolute;left:100px;top:100px">
  <div style="margin:50px;background-color:yellow">
     <p>点击下面的按钮可以设置本段落的最近的父（祖先）元素的背景色。</p>
   <div>
</div>
<button>点击这里</button>

jQuery 代码:
$("button").click(function(){
    $("p").offsetParent().css("background-color","red");
});

parent([expr])

取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。

描述:
查找每个段落的父元素
HTML 代码:
<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:
$("p").parent()

结果:
[ <div><p>Hello</p><p>Hello</p></div>]
--------------------
描述:
查找段落的父元素中每个类名为selected的父元素。
HTML 代码:
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

jQuery 代码:
$("p").parent(".selected")

结果:
[ <div class="selected"><p>Hello Again</p></div> ]

parents([expr])

取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

描述:
找到每个span元素的所有祖先元素。
HTML 代码:
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

jQuery 代码:
$("span").parents()
------------------
描述:
找到每个span的所有是p元素的祖先元素。

jQuery 代码:
$("span").parents("p")

parentsUntil([expr|element][,filter])

查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。如果提供的jQuery代表了一组DOM元素，.parentsUntil()方法也能让我们找遍所有元素的祖先元素，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的jQuery对象里包含了下面所有找到的父辈元素，但不包括那个选择器匹配到的元素

prev([expr])

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

描述:
找到每个段落紧邻的前一个同辈元素。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:
$("p").prev()

结果:
[ <div><span>Hello Again</span></div> ]
-------------------
描述:
找到每个段落紧邻的前一个同辈元素中类名为selected的元素。
HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:
$("p").prev(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

prevAll([expr])

查找当前元素之前所有的同辈元素

描述:
给最后一个之前的所有div加上一个类
HTML 代码:
<div></div><div></div><div></div><div></div>

jQuery 代码:
$("div:last").prevAll().addClass("before");

结果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

prevUntil([exp|ele][,fil])

查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止。
如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了前面所有找到的同辈元素，但不包括那个选择器匹配到的元素。
如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。

siblings([expr])

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

描述:
找到每个div的所有同辈元素。
HTML 代码:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:
$("div").siblings()

结果:
[ <p>Hello</p>, <p>And Again</p> ]

------------
描述:
找到每个div的所有同辈元素中带有类名为selected的元素。
HTML 代码:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:
$("div").siblings(".selected")

结果:
[ <p class="selected">Hello Again</p> ]

属性

attr(name|pro|key,val|fn)

设置或返回被选元素的属性值。

参数name 描述:
返回文档中所有图像的src属性值。
jQuery 代码:
$("img").attr("src");

参数properties 描述:
为所有图像设置src和alt属性。
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });

参数key,value 描述:
为所有图像设置src属性。
jQuery 代码:
$("img").attr("src","test.jpg");

参数key,回调函数 描述:
把src属性的值设置为title属性的值。
jQuery 代码:
$("img").attr("title", function() { return this.src });

removeAttr(name)

从每一个匹配的元素中删除一个属性

描述:
将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:
$("img").removeAttr("src");
结果:
[ <img /> ]

prop(name|properties|key,value|fn)

获取在匹配的元素集中的第一个元素的属性值。相当于对attr的一个补充吧:随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误

参数name 描述:
选中复选框为true，没选中为false
jQuery 代码:
$("input[type=\'checkbox\']").prop("checked");

参数properties 描述:
禁用页面上的所有复选框。
jQuery 代码:
$("input[type=\'checkbox\']").prop({
  disabled: true
});

参数key,value 描述:
禁用和选中所有页面上的复选框。
jQuery 代码:
$("input[type=\'checkbox\']").prop("disabled", false);
$("input[type=\'checkbox\']").prop("checked", true);

参数key,回调函数 描述:
通过函数来设置所有页面上的复选框被选中。
jQuery 代码:
$("input[type=\'checkbox\']").prop("checked", function( i, val ) {
  return !val;
});

removeProp(name)

用来删除由.prop()方法设置的属性集.

描述:
设置一个段落数字属性，然后将其删除。
HTML 代码:
<p> </p>

jQuery 代码:
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");

结果:
The secret luggage code is: 1234. Now the secret luggage code is: undefined.

CSS类

addClass(class|fn)

为每个匹配的元素添加指定的类名。一个或多个要添加到元素中的CSS类名，请用空格分开.

参数class 描述:
为匹配的元素加上 \'selected\' 类
jQuery 代码:
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

-----------------
回调函数 描述:
给li加上不同的class
HTML 代码:
<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>
jQuery 代码:
$(\'ul li:last\').addClass(function() {
  return \'item-\' + $(this).index();
});

removeClass([class|fn])

从所有匹配的元素中删除全部或者指定的类。一个或多个要删除的CSS类名，请用空格分开.此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

参数class 描述:
从匹配的元素中删除 \'selected\' 类
jQuery 代码:
$("p").removeClass("selected");

----------------------
参数class 描述:
删除匹配元素的所有类
jQuery 代码:
$("p").removeClass();

------------------------
回调函数描述:
删除最后一个元素上与前面重复的class
jQuery 代码:
$(\'li:last\').removeClass(function() {
    return $(this).prev().attr(\'class\');
});

toggleClass(class|fn[,sw])

如果存在（不存在）就删除（添加）一个类。

参数class 描述:
为匹配的元素切换 \'selected\' 类
jQuery 代码:
$("p").toggleClass("selected");

---------------
参数class,switch 描述:
每点击三下加上一次 \'highlight\' 类
HTML 代码:
<strong>jQuery 代码:</strong>
jQuery 代码:
  var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });
  
---------------  
回调函数 描述:
根据父元素来设置class属性
jQuery 代码:
$(\'div.foo\').toggleClass(function() {
  if ($(this).parent().is(\'.bar\') {
    return \'happy\';
  } else {
    return \'sad\';
  }
});

HTML代码/文本/值

html([val|fn])

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

无参数 描述:
返回p元素的内容。
jQuery 代码:
$(\'p\').html();

------------------------
参数val 描述:
设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");

------------------------
回调函数描述:
使用函数来设置所有匹配元素的内容。
jQuery 代码:
$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

text([val|fn])

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

无参数 描述:
返回p元素的文本内容。
jQuery 代码:
$(\'p\').text();

--------------
参数val 描述:
设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");

--------------
回调函数 描述:
使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
    });

val([val|fn|arr])

获得匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值.

无参数 描述:
获取文本框中的值
jQuery 代码:
$("input").val();

--------------
参数val 描述:
设定文本框的值
jQuery 代码:
$("input").val("hello world!");

--------------
回调函数 描述:
设定文本框的值
jQuery 代码:
$(\'input:text.items\').val(function() {
  return this.value + \' \' + this.className;
});

--------------
参数array 描述:
设定一个select和一个多选的select的值
HTML 代码:
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2

jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

CSS

css(name|pro|[,val|fn])

访问匹配元素的样式属性。

参数name 描述:
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");

----------------------
参数properties 描述:
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ "color": "#ff0011", "background": "blue" });

----------------------
参数name,value 描述:
将所有段落字体设为红色
jQuery 代码:
$("p").css("color","red");

----------------------
参数name,回调函数 描述:
逐渐增加div的大小
jQuery 代码:
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

位置

offset([coordinates])

针对body,整个页面,有多高,左边有多宽.获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

无参数描述:
获取第二段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

结果:
<p>Hello</p><p>left: 0, top: 35</p>

-------------------------
参数coordinates 描述:
获取第二段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
$("p:last").offset({ top: 10, left: 30 });

position()

获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

描述:
获取第一段的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

结果:
<p>Hello</p><p>left: 15, top: 15</p>

scrollTop([val])

获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。

无参数描述:
获取第一段相对滚动条顶部的偏移
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>
jQuery 代码:
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
结果:
<p>Hello</p><p>scrollTop: 0</p>

------------------
参数val 描述:
设置相对滚动条顶部的偏移
jQuery 代码:
$("div.demo").scrollTop(300);

scrollLeft([val])

获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。

尺寸

height([val|fn])

取得匹配元素当前计算的高度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的高

无参数描述:
获取第一段的高
jQuery 代码:
$("p").height();

------------------
参数val 描述:
把所有段落的高设为 20:
jQuery 代码:
$("p").height(20);

------------------
参数function(index, height) 描述:
以 10 像素的幅度增加 p 元素的高度
jQuery 代码:
  $("button").click(function(){
    $("p").height(function(n,c){
    return c+10;
    });
  });

width([val|fn])

取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

innerHeight()

相对padding,获取第一个匹配元素内部区域高度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

描述:
获取第一段落内部区域高度。
HTML 代码:
<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

结果:
<p>Hello</p><p>innerHeight: 16</p>

innerWidth()

获取第一个匹配元素内部区域宽度（包括补白、不包括边框）。此方法对可见和隐藏元素均有效。

outerHeight([options])

获取第一个匹配元素外部高度（默认包括补白和边框）。此方法对可见和

以上是关于jQuery语法介绍的主要内容，如果未能解决你的问题，请参考以下文章

Visual Studio 2012-2019的130多个jQuery代码片段。

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

在下面的代码片段中的剩余 ='passthrough' 处的代码中出现语法错误

几个有用的JavaScript/jQuery代码片段（转）