（本文年代久远，请谨慎阅读）今天学习了JQuery的一些基本用法，包括JQuery选择器和JQuery包装集；

从现在开始，要慎重区分DOM对象和JQuery对象，两种对象的方法不同，属性不同，在使用中要特别注意

JQuery选择器

编写任何javascript程序都需要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象,

比如”拥有title属性并且值中包含test的元素”, 完成这些工作只需要编写一个jQuery选择器字符串. 学习jQuery选择器是学习jQuery最重要的一步.

DOM对象获取方法：

单个对象：var objDiv =document.getElementById(“id”);
多个对象：Var arrObj = document.getElementsByTagName(“id”);

JQuery对象获取方法：

单个对象：var objDiv = $ (“#Id"); 
多个对象：var arrObj = $('div');
//警告：此处是JQuery语法形式，但依然是dom对象数组！！

在DOM编程中我们只能使用有限的函数根据id或者TagName获取DOM对象。

而在JQUERY中则完全不同，JQUERY提供了异常强大的选择器用来帮助我们获取页面上的对象,并且将对象以JQUERY包装集的形式返回。

"$"符号在JQUERY中代表对JQUERY框架集的引用。

JQUERY选择器包括以下几种：

1、基础选择器
2、层次选择器
3、基本过滤器
4、内容过滤器
5、可见性过滤器
6、属性过滤器
7、子元素过滤器
8、表单选择器
9、表单过滤器

下面列出几种重要的选择器：

基础选择器

$("#Id") 选择ID为divId的元素（根据元素Id选择）

$("element") 选择所有元素（根据元素的名称选择）

$(".class") 选择所用CSS类为bgRed的元素（根据元素的css类选择）

$("*")选择页面所有元素（选择所有元素）

$("#divId, element, .class")（可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.）

属性过滤器

$("div[id]")匹配包含给定属性的元素

$("input[name='...']") 匹配给定的属性是某个特定值的元素  name='...'

$("input[name!='...']")匹配给定的属性是不包含某个特定值的元素 name='...'

$("input[name^='...']")匹配给定的属性是以某些值开始的元素 name^='...'

$("input[name$='...']")匹配给定的属性是以某些值结尾的元素 name$='...'

$("input[name*='...']")匹配给定的属性是以包含某些值的元素 name*='...'

$("input[id][name$='...']")复合属性选择器，需要同时满足多个条件时使用 [id][name$='...']

表单过滤器

$("input:enabled")匹配所有可用元素

$("input:disabled")匹配所有不可用元素

$("input:checked")匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

$("select option:selected")匹配所有选中的option元素

注意

  1. DOM转JQUERY包装集：$(arrDiv[i]).html(‘div’+i);//arrDivp[i]是DOM对象，直接用$()转为JQuery对象后调用html方法；
  2. JQUERY包装集转DOM对象
  3. 通过索引访问到的JQUERY包装集中的单个元素是DOM对象
  4. 通过包装集的某些遍历函数，例如each中传递的遍历函数中的this也是DOM元素
    1
    2
    3
    4
    var arrDiv = $('div');
    for( var i = 0;i < arrDiv.length; i++) {
        arrDiv[i].innerHTML = 'div' + i;//通过索引访问到的元素不是JQuery对象，而是DOM对象
    }

JQuery包装集

在此介绍一些基本的JQuery包装集及使用

ready()方法

在使用JQUERY时，当 DOM（文档对象模型） 已经加载完成时，就会发生 ready 事件。由于该事件在文档就绪后发生，因此把所有其他的 JQUERY事件和函数置于该事件中是非常好的做法。

即将JQuery函数及事件全部放到$(document).ready(function(){…all jquery functions..});

相比较而言，<body onload=""></body>中的onload同ready的区别有：

onload是原生的JAVASCRIPT事件方法；

onload必须等到页面内包括图片的所有元素加载完毕后才能执行，ready是DOM结构绘制完毕后就执行，不必等到加载完毕；

onload不能同时编写多个，如果有多个onload方法，只会执行一个，而ready可以同时编写多个，并且都可以得到执行 ；

onload无简化写法，ready有简化的写法，可以简写成$(function(){…})；

<< 更多精彩尽在『程序萌部落』>>
<< https://www.cxmoe.com >>

appendTo()方法

在被选元素的结尾（仍然在内部）插入指定内容，可以被用来动态添加若干句HTML语句；

1
2
var testDiv = $('#testDiv');
$('<select><option>choose1</option><option>choose2</option></select>').appendTo(testDiv);

意思是将此行html语句先转换成JQuery对象，然后用对象的appendTo方法追加到testDiv这个被选元素的结尾，这个被选元素即某个控件，

如一个div块或者一个文本框，效果是在此控件后显示一个下拉框；

其他一些常用的操作JQUERY包装集的函数

$("p").eq(1) 获取第N个元素：.eq(Index)

$("p").filter(".bgRed")筛选出与指定表达式匹配的元素集合：.filter("Express")

$("div").filter(function(index) {});筛选出与指定函数返回值匹配的元素集合：.filter(function)

$("input[type='checkbox']").parent().is("form")用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

$("p").parent()查找每个段落的父元素：

示例

HTML 代码：<div><p>Hello</p><p>Hello</p></div>执行$("p").parent()之后结果为：[ <div><p>Hello</p><p>Hello</p></div>]

$("p").parent(".selected")查找段落的父元素中每个类名为selected的父元素：

HTML 代码：<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>执行$("p").parent(".selected")之后结果为：[ <div class="selected"><p>Hello Again</p></div> ]

其他

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
使用is()方法查找段落的父元素中每个类名为selected的父元素（带返回值true/false）：

使用var flagValue = $("p").parent().is("select") 代替 $("p").parent(".selected") // 使用is()方法会有返回值，如果满足条件，则flagValue会为true;

$("input").map(function(){}).get().join(", ")把form中的每个input元素的值建立一个列表

<p><b>Values: </b></p>

<form>  
    <input type="text" name="name" value="John"/>  
    <input type="text" name="password" value="password"/>  
    <input type="text" name="url" value="http://ejohn.org/"/>
</form>

JS：$("p").append(  $("input").map(function(){  return $(this).val();}).get().join(", ")  ); 

结果：在<p>标签后追加字符串，其内容是取出所有<input>标签的value值，并用“，”分隔，最后结果为：

<p><b>Values:John, password, http://ejohn.org/</b></p>

jQuery.map(arr|obj,callback) //将一个数组转换为另一个数组

将原数组中每个元素加 4 转换为一个新数组：$.map( [0,1,2], function(n){  return n + 4;});  结果:[4, 5, 6]

原数组中大于 0 的元素加 1 ，否则删除：$.map( [0,1,2], function(n){  return n > 0 ? n + 1 : null;}); 结果:[2, 3]

原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组：$.map( [0,1,2], function(n){  return [ n, n + 1 ];}); 结果:[0, 1, 1, 2, 2, 3]

$("p").not($("#testid")[0])去除所有与给定选择器匹配的元素

<input name="apple" /><input name="flower" checked="checked" />

查找所有未选中的 input 元素：$("input:not(:checked)") 结果:[ <input name="apple" /> ]

$("p").slice(0, 1);选取一个匹配的子集

.slice(start [,end] );第一个参数：开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。

第二个参数：结束选取自己的位置，如果不指定，则就是本身的结尾。

<p>Hello</p><p>cruel</p><p>World</p>

选择第一个p元素：$("p").slice(0, 1).wrapInner("<b></b>");//选择的是value值

选择前两个p元素：$("p").slice(0, 2).wrapInner("<b></b>");

只选取第二个p元素：$("p").slice(1, 2).wrapInner("<b></b>");

只选取第二第三个p元素$("p").slice(1).wrapInner("<b></b>");

选取第最后一个p元素：$("p").slice(-1).wrapInner("<b></b>");

$("p").wrapInner(htm|element|fnl)将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来，举例如上，将全部字符加粗；


😒 留下您对该文章的评价 😄


相关文章

转载请注明出处。
博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

本文永久链接是：
https://www.cxmoe.com/article/64a8.html


  C/C++ malloc

 评论




全站共计 313.7k 字，自豪地使用 Volantis 主题

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议

—
新版站点已运行

Copyright © 2017-2022 程序萌部落

 萌ICP备 20250821号