jQuery中的常用内容总结(一)

jQuery中之常用内容总结(一)

 

前言

  不好意思(✿◠‿◠),由于回家看病跟处理部分别业务耽搁了,不然就篇博客当上上周要上周描绘的;同时闲谈几句:在这边建议各位开发之童鞋,如果出疾患尽快治疗,不要耽搁,大病的口舌非常是~,身体是以钱,如果人数之身体健康是平的语句,若没有前的平,后面还多之散装啊是徒劳,同时,建议在开发的早晚保持一个好之情绪,积极面对需求以及技巧难关,不要像我同在难以之地方为一个地方死钻、而且经常性考虑需求外的急需,这样都是勿太好,尽量为”需求”的情怀去”开发”,而不是因”开发”的心情做”需求”,这点要清理~(◕ܫ◕)~

NOW,回到正题==》

内容提要


 

  • 选择器(本节)
  • 选择器的扩充方法(本节)
  • 节点的CSS操作和节点其他操作(本节)
  • Ajax同步跟异步(第二节)
  • 事件(第二节)
  • 弹窗(第三节)
  • 参数序列化(第四节)
  • 遍历(第四节)
  • 其他(第四节)

选择器大致分四类:

  >>CLASS(类)选择器  形如:$(“.[dom中定义的class的价]”);

  >>ID选择器      形如:$(“#[dom中定义之ID的价值]”);

  >>签名选择器    形如:$(“[签号]”);

  >>复合选择器     形如:$(“.[dom中定义之class的值] [签号]”);或
$(“#[dom中定义之ID的价值] [签号]”);

当即四近似选择器定义的还是为美元符号$开始后接着左右括号,括号中的值视不同之选择器而不同,这里不多缀诉,直接上代码吧:

 1 <body>
 2 <div id="bodys">
 3         <h3>h3</h3>
 4         <p class="1">第一个P</p>
 5         <p class="2">第二个P</p>
 6         <p class="2">第三个P</p>
 7         <p id="4">第四个P</p>
 8         <p id="4">第五个P</p>
 9     <hr>
10     <input type="button" onclick="classSelect()" value="类选择">
11     <input type="button" onclick="idSelect()" value="ID选择">
12     <input type="button" onclick="labelSelect()" value="标签选择">
13     <input type="button" onclick="complexSelect()" value="复合选择">
14     <script type="text/javascript">
15     function classSelect(){
16         alert($(".1"));
17     }
18     function idSelect(){
19         alert($("#4"));
20     }
21     function labelSelect(){
22         alert($("h3"));
23     }
24     function complexSelect(){
25         alert($("#bodys p:eq(4)"));
26     }
27 </script>
28 </div>
29 </body>

这里不管是近似、ID、标签或者副选择器,结果还是一个List类型(根据浏览器大致的表现方式):

Ajax 1

 

确切之游说就是一个可项目,一般其他课程里面都是深受jQuery对象类型,在这边吧顺当大意叫”jQuery类型”吧,现在来瞧这个jQuery对象到底是什么东东:

Ajax 2

嗯~,这里总结下,jQuery对象一般含:

    List:存放dom内容,context:选择范围(相当给作用域)

    length:当前选择器选择的多少(也就是是List对象的轻重缓急)

    prevObject:上一个选择对象(如果没则还是document)

    selector:选择的法子(就是选择器括号内的情)

 且注意!如果是ID选择器,则jQuery对象被尚无prevObject这个参数,因为ID本身就是是唯一的,例如地方的代码,如果在html中定义了点儿独ID,jQuery选择器永远只有见面择第一个门当户对的,如果您只有需要在class选择器结果中就获第五只,一般的话出点儿栽写法

    A>使用”:eq(第几个-1)”,例如:$(“#bodys
p:eq(4)”);

    B>使用嵌套的写法,例如:$($(“#bodys
p”)[4]);

已学会运用选择器了,现在本身执教下jQuery选择器的常用的点子以及特性:

  next():下一个节点               
 样例:$(‘.2’).next();

  prev():上一个节点              
  样例:$(‘.2’).prev();

  parent():父节点                样例:$(‘.2’).parent();

  parents(“div”):标签为div的父节点  
        样例:$(‘.2’).parents(‘div’);

  childen():子节点               
  样例:$(‘.2’).childen();

  find(“.2”):搜索时节点产节点class值为2的节点  样例:$(‘.2’).find(‘.2’);

  :first:选择第一单节点             
  样例:$(‘.2:first’);

  :last:选择最后一个节点             样例:$(‘.2:last’);

  :eq(0):选择第一独节点             
样例:$(‘.2:eq(0)’);

  :selected:下拉框被选中的项(也是节点)      
样例:$(‘input[name=cc]:selected’);

  :checked:单选或多选择为入选的          样例:$(‘input[name=cc]:checked’);

  [name=value]:选择节点的name属性为valueAjax的节点
 样例:$(input[name=99]’);

专注,以上所选择的节点即为一个jQuery对象,但是最后操作的还是节点(DOM),一下被一个样例:

  Ajax 3

  以上自使用的是chorme的console来一直得到的,从剧本返回的结果并无能够一直证明已经选择到用选择的可怜,这个得个大概的方式(稍后会讲话)来证明结果的对:使用text();方法(取节点内的情);

OK,节点选择的内容大致说了了,下面说说节点操作与节点CSS操作==>

实际付出中对节点的常用操作发生什么吗,这里我理一料理:节点的亮与隐形、取值、设置或修改参数、删除、设置或修改节点的CSS、选中的(单选、多选择)、选取的(下拉)、提交…

  hide():节点的示(等同于CSS中之display:none;)

  show():节点的隐没(等同于CSS中之display:block;)

  attr(“key”,”value”):给节点设置一个属性和属性值(也是改)

  removeAttr(“key”):删除节点的一个性

  remove():删除节点

  append();添加节点(添加)

  html():添加节点(覆盖添加)

  =====表单类====

  value():取时节点的值

  value(“value”):给当下节点设置值

  submit():提交时表单(只用于表单,将受第四节约讲)

  serialize():序列化表单(URL中键值对之样式,常用语get请求,将为第四节省讲)

  serializeArray:序列化表单(将表单序列化为一个频组,常用来post提交,将给第四节省讲)

  ====CSS操作===

  css(“key”,”value”):给节点设置一个css样式

  removeClass();删除一个体制对象

  addClass():添加一个体裁对象(样式名称或要以css文件或者页面被先行定义出来)

好了,现在举行一个实际上使用展示:

节点删除=>

Ajax 4

Ajax 5

吃节点(表单节点)设置一个值:

Ajax 6

于节点添加一个体制=>

Ajax 7

 

 添加一个体裁对象=>

Ajax 8

Ajax 9

 

 

 

 

  

 

相关文章