很久没有写博客了,可以说因为工作忙得关系和知识需要累计到一定程度才写,好吧,话不多说,let;s Do。

JQuery库文件引入:

1、在使用Jquery时,JQuery库文件必须放在第一位,否则引用不了JQuery库文件。

如:

<script type="text/javascript" src="jquery-2.1.1.min.js"></script>    //首先引入JQ库文件
 
<script type="text/javascript" src="js.js"></script>                            //之后再引入自己编写的JS文件


-----------------------------------------------------------------------------------------------------------------------------------------

JQuery基本选择符:

选择符           css样式                     JQuery                             说明

标签名                 p{}                                 $("p")                             取得文档中所有段落

     ID                 #some-id{}                 $("#some-id")                    取得文档中ID为some-id的一个元素

     类                .some-class{}            $(".some-class")                取得文档中class为some-class的所有元素


子元素选择符号">":

如:

$("#selected-plays > li")    //表示查找ID为selected-plays的子元素(>)中的所有li


否定式伪类选择符":not()":

如:

$("#content li:not(.hh)").addClass("sub-level");
 
//查找ID为content的元素的后代元素li(#content li)为基础,查找这些li中没有包含类hh(:not(.hh))的li元素


属性选择符:

1、选择带有alt属性的所有图像元素: $("img[alt]")

2、选择具有href属性且该属性已java开头的链接:$("a[href^='java']")

3、选择所有带有href属性且以mailto:开头的链接:$("a[href^='mailto:']")

4、选择所有带有href属性且已.pdf结尾的链接:$("a[href$='.pdf']")

5、属性选择符可以组合使用,选择所有带有href且已http开头且任意位置包含henry的所有链接

$("a[href^='http'][href*='henry']")


自定义选择符:

1、选择带有horizontal类的div中的第二个(因javascript数组从0开始的编号方式,所以第二项为1):

$("div.horizontal:eq(1)")    //div和horizontal之间不要有空格

2、选择基数行(:even),选择偶数行(:odd),这是为什么呢,因为javascript内置从0开始的编号方式,所以第一行为0,第二行为1,以此类推:

$("tr:even")  //选择单数行      $("tr:odd")  //选择双数行

3、这个选择符相对于元素的父元素而非当前选择元素来计算位置,它可以接受数值,even和odd作为参数,同时,这是JQ中唯一从1开始计算的选择符:nth-child(num || even || odd)

$("tr:nth-child(odd)")  //全部单数行


基于上下文内容选择元素::contains(content);

该选择符是区分大小写的;

如:$("td:contains(Henrry)")不同于$("td:contains(henrry)")


基于表单的选择符:

选择符                                                     匹配                                                                  例子

:input                           输入字段、文本区、选择列表和按钮元素                        $("input[type='text']")

:button                         按钮元素或者type属性值为button的输入元素                $("button") 适用于<button>标签

:enabled                       启用的表单元素             $("input:enabled") || $("input[type='text']:enabled")

:disabled                      禁用的表单元素              $("input[disabled='disabled']") || $("input:disabled") || $("input[type='text']:disabled")

:checked                      已勾选的表单元素          $('input[type="radio"]:checked')

:selected                       选择的选项元素             $("option:selected")


添加和删除css样式:

addClass(),为选择的页面元素添加css样式,这个方法唯一的参数就是要添加的类名。

removeClass(),为选择的页面元素删除css样式。

如:

<head> 
 
 
  <style type="text/css">
   .colorRed{color: #f00;}       //定义一个类的样式,设置字体颜色为红色
   </style> 
 
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>   //先引入JQ库文件
  <script type="text/javascript">
     $(function(){
  $("p").addClass("colorRed");      //使用addClass()方法为p标签添加类colorRed。
     }); 
 
</head>

<body>
 
 
 //字体颜色改为红色
 
 
</body>


-----------------------------------------------------------------------------------------------------------------------------------------

如:

<head> 
 
 
  <style type="text/css">
   .colorRed{color: #f00;}       //定义一个类的样式,设置字体颜色为红色
   </style> 
 
  <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>   //先引入JQ库文件
  <script type="text/javascript">
     $(function(){
  $("p").removeClass("colorRed");      //使用removeClass()方法为p标签移去类colorRed。
     }); 
 
</head>

<body>
 
 
//字体颜色改为黑色
 
 
</body>

执行函数$(document).ready(function(){do something;});

1、使用该方法JQuery支持我们预定在DOM加载完毕后调用某个函数,不用等待页面中的图片加载完;

2、多次调用该方法并按照调用顺序执行;


如:

function addHighlightClass() {
 $('div.poem-stanza').addClass('highlight');
 }
 $(document).ready(addHighlightClass);    
 
------------------------------------------------------------------------------ 
 
$(document).ready(function() {
 $('div.poem-stanza').addClass('highlight');
 });
//ready()这个方法也可以接受一个匿名函数。这个方法特别适合传递不被重用的函数