load
＄（document）.ready（）
执行时机
必须等待网页中所有的内容加载完毕后（包括图片）才能执行
网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
编写个数
不能同时编写多个，以下代码无法正确执行:window。onload =function({alert（"test1”）；｝window。onload = function（）{alert("test2”);}结果只会输出"test2"
能同时编写多个
简化写法
无
＄（document）.ready（function（）｛}）;可以简写成＄(function(）{});
 
一、选择网页元素
jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。  使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为＄），然后得到被选中的元素。
选择表达式可以是CSS选择器:
 ＄（document)//选择整个文档对象 
 $（'#myId'）//选择ID为myId的网页元素 
 $('div。myClass’)//选择class为myClass的div元素 
 ＄('input[name=first]’）//选择name属性等于first的input元素 
也可以是jQuery特有的表达式:
 ＄('a：first’)//选择网页中第一个a元素 
 $（’tr：odd’）//选择表格的奇数行 
 ＄(’#myForm ：input'）//选择表单中的input元素 
 $（’div：visible’) //选择可见的div元素 
 $（'div:gt（2)')//选择所有的div元素,除了前三个 
 ＄(’div:animated’)//选择当前处于动画状态的div元素   二、改变结果集  如果选中多个元素，jQuery提供过滤器，可以缩小结果集：
* $（'div').has（’p’）; //选择包含p元素的div元素 
＊ $（’div'）.not('。myClass'）； //选择class不等于myClass的div元素 
＊ $(’div’）.filter（'.myClass'）; //选择class等于myClass的div元素 
＊ $（’div’).first（); //选择第1个div元素 
＊ $（’div')。eq(5); //选择第6个div元素  有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：
 $（'div’)。next（’p'); //选择div元素后面的第一个p元素 
 $(’div')。parent(); //选择div元素的父元素 
 $（'div’）.closest（’form’); //选择离div最近的那个form父元素 
 ＄（'div’)。children(）; //选择div的所有子元素 
 $（'div’).siblings（）； //选择div的同级元素 
 三、链式操作  选中网页元素以后，就可以对它进行某种操作。jQuery允许将所有操作连接在一起，以链条的形式写出来,比如:
 $（’div’).find（’h3’）.eq(2)。html(’Hello')；  　分解开来，就是下面这样:
1. $(’div’）                //到div元素 
2。 .find(’h3’）          //选择其中的h3元素
3。 。eq(2）              //选择第3个h3元素 
4. 。html（'Hello’）;  //将它的内容改为Hello    这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。jQuery还提供了.end（)方法，使得结果集可以后退一步：
1。 $（'div') 
2. .find('h3’） 
3. 。eq（2) 
4。 .html(’Hello’） 
5。 。end(）//退回到选中所有的h3元素的那一步 
6. .eq(0)//选中第一个h3元素 
7. 。html(’World’)； //将它的内容改为World 
。end（）：回到最近的一个”破坏性"操作之前。如果之前没有破坏性操作,则返回一个空集。所谓的”破坏性"就是指任何改变所匹配的jQuery元素的操作。
jquery在线库示例描述：选取所有的p元素，查并选取span子元素，然后再回过来选取p元素
HTML 代码：
〈p〉<span〉Hello</span〉，how are you?</p>
jQuery 代码:
＄（"p”）.find("span”）.end(）
结果:
<p><span>Hello〈/span> how are you?〈/p>
-四、元素的操作：取值和赋值
  操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值.jQuery使用同一个函数，来完成取值(getter）和赋值(setter)。到底是取值还是赋值，由函数的参数决定。
 ＄（’h1’)。html（)； //html（）没有参数，表示取出h1的值 
 ＄(’h1'）.html（'Hello'）; //html()有参数Hello，表示对h1进行赋值  常见的取值和赋值函数如下：
1。 。html() 返回或设置被选元素的内容 （inner HTML）   
2. 。text（） 取出或设置text内容     
3。 .attr（) 取出或设置某个属性的值   
4。 .width（) 取出或设置某个元素的宽度   
5。 。height（） 取出或设置某个元素的高度 
6。 。val（） 取出或设置html内容取出某个表单元素的值   　需要注意的是，如果结果集
包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（。text(）例外,它取出所有元素的text内容).
  五、元素的操作：移动
。insertAfter(），把div元素移动p元素后面：
＄(’div’).insertAfter（’p'）;
。after()，把p元素加到div元素前面:
 $(’p')。after（'div')；使用这种模式的操作方法,一共有四对
1. .insertAfter(）和.after()：在现存元素的外部,从后面插入元素 
2. 。insertBefore()和。before（)：在现存元素的外部，从前面插入元素 
3. 。appendTo（）和.append(）：在现存元素的内部,从后面插入元素 
4. .prependTo()和.prepend()  ：在现存元素的内部，从前面插入元素

1。after（)：描述:在所有段落中后插入一个jQuery对象（类似于一个DOM元素数组)。
HTML 代码:
〈b>Hello</b〉〈p>I would like to say： </p〉
jQuery 代码:
$（"p”)。after( $("b"） ）；
结果：
<p〉I would like to say: 〈/p〉<b>Hello〈/b〉
2.insertAfter（）:描述：把所有段落插入到一个元素之后.与 ＄("＃foo"）.after(”p")相同
HTML 代码：
〈p〉I would like to say: </p>〈div id="foo”>Hello〈/div>
jQuery 代码：
$（”p").insertAfter("＃foo"）；
结果:
<div id="foo”>Hello〈/div>〈p>I would like to say: </p〉
3.before（）：描述:在所有段落中前插入一个jQuery对象(类似于一个DOM元素数组)。
HTML 代码：
〈p>I would like to say: </p〉〈b〉Hello〈/b〉
jQuery 代码：
＄（"p").before（ ＄("b") ）;
结果：
〈b>Hello〈/b〉〈p>I would like to say: 〈/p>

4。append()：描述：向所有段落中追加一些HTML标记.
HTML 代码：
<p>I would like to say: 〈/p〉
jQuery 代码:
＄("p”）。append(”〈b>Hello</b>”）;
结果：
<p〉I would like to say: 〈b>Hello</b>〈/p〉

5。appendTo(）描述:新建段落追加div中并加上一个class
HTML 代码:
〈div></div〉<div〉</div>
jQuery 代码：
$（”〈p/>”)
  。appendTo("div”）
  。addClass（”test"）
  。end()
  .addClass("test2")；
结果：
〈div><p class=”test test2"〉</p></div>
<div>〈p class="test”〉〈/p〉</div>

6。prepend(）描述：向所有段落中前置一个jQuery对象（类似于一个DOM元素数组)。
HTML 代码：
〈p〉I would like to say： 〈/p>〈b>Hello</b〉
jQuery 代码：
$(”p”）.prepend（ ＄("b"） ）；
结果：
<p><b〉Hello</b>I would like to say: </p>

7.prependTo()描述：把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p〉I would like to say： </p〉<div id="foo”〉</div〉
jQuery 代码:
$（"p"）。prependTo（”＃foo");
结果:
<div id=”foo”〉<p>I would like to say: 〈/p〉</div>

＊*六＊＊、元素的操作:复制、删除和创建  复制元素使用.clone（)  删除元素使用.remove（）和。detach（)。两者的区别在于，前者不保留被删除元素的事件，后者保留,有利于重新插入文档时使用。  清空元素内容(但是不删除该元素）使用。empty(）。  创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。