jquery学习成长记(一)

标签：

一、js与jquery的区别　

js是一种脚本语言，而jquery对它进行了封装使得js开发起来更简单。

二、新建web项目步骤

 1、新建web项目时选择第二个,取一个项目名称。                                                                 　　　

2、系统生成的多余文件夹删掉，仅留下Scripts和Web.config：

3、修改Scripts文件夹为js，新建文件夹css和image，并在对应位置添加需要的页面，css样式文件与js文件。

4、将.min.js文件拖动到html中，将自己新建的js文件拖动到它下方　　

*这里引入js有先后顺序，先引用jquery文件，再引用js。 

　　将Script文件夹中的第一个js文件（_references.js），拖动到自己新建的js文件里的最上面　　

　　*此步骤作用：让jq显示智能提示，方便写代码。 

　　完成以上步骤，即可开始正常程序编写。

三、jquery执行过程与写法

1、jq执行过程分为下面5个步骤：

a、 对页面进行加载：$(function(){  });

b、 找到对象，如id标签：$(“#btn”)

c、 执行对象相应事件：click();

d、 声明事件：function(){  }

e、 执行事件内容：alert();

jquey写法

例：给html中id名称为btn的执行一个点击事件，执行事件的内容是弹出aaaa;

html:

<input type="button" value="jq按钮" id="btn"/>

js:

$(function () {     $("#btn").click(function () {         alert("aaaa");     });

});

js写法

$(function () {

  document.getElementById("btn").onclick = function () {         alert("aaaa");

});

2、Js对象转jquery对象

var v=document.getElementById("v"); //DOM对象 var $v=$(v); //jQuery对象  转换后，就可以任意使用jQuery的方法了。

例子：

html:

<input type="button" value="js按钮" id="btn"/>

js:

  var obj = document.getElementById("btn"); //DOM对象     var $obj = $(obj); //jQuery对象     $obj.click(function () {         alert("aaaa");     }); 

3、jquery对象->js

$("#btn")           //jQuery对象 $("#btn")get(0)       //jQuery对象->原生的DOM对象

例：jquery对象->js就，就可以执行js事件了

html:<input type="button" value="jq按钮" id="btn"/>

js:   var obj = $("#btn").get(0);      obj.onclick = function () {         alert("aaa");     }

优先级问题：当css和jq中同时设置了样式时，遵循就近原则，此时的jq写法，类似于在html标签内加一个style样式来写，所以优先jq。

四、jq选择器

　　$(“tr:odd”)， 选择所有位于奇数行的< tr >标记 

　　$(“tr:even”) ，选择所有位于偶数行的< tr >标记

【例】表格隔行换色的效果

$(function(){

　　$(“tr:odd”).css(“background”,”#f8f3d2”);　　　   //偶数行的背景颜色为#f8f3d2

　　$(“tr:even”).css(“background”,”#ffcdcd”);　　　　//奇数行的背景颜色为#ffcdcd

});

2、eq(n)选择器：$("X:eq(n)")

　　对X标签的第n+1个X标签进行选择，也可以写作$(“X”).eq(n)。

　　如：$(“tr”).eq(2)，是指tr标签的第三行进行选择。

3、 特殊

nth-child(n)选择器：$(“X:nth-child(n)”) 

　　对X标签的第n个X标签进行选择。

　　如：$(“td:nth-child(3)”) ，是指第3列；　　$(“li:nth-child(4)”)，就是第4个li标签。

 $(“li>a”) 返回<li>标记的所有子元素<a>,不包括孙标记。

(“a[href$=pdf]”)选择所有超链接，并且这些超链接的href属性是以“pdf”结尾；

4、功能函数

$trim(sString); 去掉前后空格；

去掉中间空格：

用正则：

   var sString = "hello  world";     String.prototype.NoSpace = function() {  return this.replace(/\s+/g, ""); }     alert(sString.NoSpace());

转换为数组：【

例】去掉字符串中间空格：（把字符串变成字符数组，然后把空格替换成无）

var s="das  das";

var aChar=s.split("");　　　　　　　 　//将字符串变为字符数组

for(var i=0; i<aChar.length;i++)

{

              if(aChar[i]==" ")　　　　　　//当遇到某个字符是空格时

              {

                     s=s.replace(" ","");　　//将此空格替换成无（从空格替换到连空格都不是）

              }

}

alert(s);　　　　　　　　　　　　　　　//打印s

5、创建DOM元素

    var oNewP = $("<p>这是一个感人肺腑的故事</p>");  //创建DOM元素     oNewP.insertAfter("#btn");  //insertAfter()方法

     将dom元素p插入#btn标签后面

6、属性选择器

6.1 所有标签写法$(“某标签[某属性]”)：选出带有某种属性的某标签。

6.1.1$(“a[title]”).addClass(“myClass”)  给a标签的title属性增加myClass样式

6.1.2 $(“a[href=’10-9.html’]”).addClass(“myClass”)  给a标签的href=’10-9.html’属性增加myClass样式

6.2.3 $(“a[href^=http://]”).addClass(“myClass”) 所有以http://开头的a标签

6.2.4 $(“a[href$=html]”).addLClass(“myClass”) 所有以html结尾的a标签

6.2.5 $(“a[href*=isaac]”).addClass(“myClass”) 所有href中含有isaac的a标签

7、包含选择器

　　$(“某标签:has(某属性)”)：选出包含某属性的所有某标签。如：$(“li:has(a)”) 包含超链接的所有li标记

8、位置选择器

　　$(“某标签:某位置”) ：选出某特定位置的某标签。如：

1）$(“p:first”) 选择页面中的第一个p标签

2）$(“p:last”) 选择页面中的最后一个p标签

3）$(“p:first-child”)  选择所有的p标记，且这些p标记是其父标记的第一个标记。

4）$(“p:last-child”)  选择所有的p标记，且这些p标记是其父标记的最后一个标记。

5）$(“p:nth-child(odd)”).addClass(“myClass”) 选择所有的p标记，且这些p标记是其父标记的偶数行。

6）$(“p:odd”).addClass(“myClass”) 整个页面的偶数行p标记

7）$(“p:eq(4)”).addClass(“myClass”) 第五个p标记增加class样式

　　$("p").eq(4).addClass(“myClass”)

　　$("p").eq(4).css("color","red") 相当于style

8）$(“p:gt(n)”).addClass(“myClass”) 第n个（从0开始，不包括n本身）p标记之后的所有p标记，也就是从第n+2个标记开始算，如$(“p:gt(2)”)就是从第四个p开始。

9、过滤选择器

 过滤选择器

　　*备注：$(":file") 等价于$(“input[type=file]”)

14、反向过滤器：

　　$(“标签:not(:某属性)”)：选出所有不具备某属性的某标签。 

　　意思为：过滤掉所有含有“某属性”的标签，留下其它不具备该属性的标签。 

　　如：$(“a:not(:target)”),意思就是选出所有没写target的a标签。

jquery学习成长记(一)

标签：

原文地址：http://www.cnblogs.com/xiaosy/p/4675695.html