jquery从入门到精通免费.docx

jquery从入门到精通免费.docx

《jquery从入门到精通免费.docx》由会员分享，可在线阅读，更多相关《jquery从入门到精通免费.docx（43页珍藏版）》请在冰豆网上搜索。

jquery从入门到精通免费

jQuery免费的第一个例子

本人花了下载券了,所以免费分享通过这个例子可以对jQuery的使用有个基本的认识，jQuery的事件句柄、选择器、基本语法结构，你可以复制这些代码运行感受一下。

Code

Code

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

        .red

        {

            background-color:

 Red;

        }

        .green

        {

            background-color:

 Green;

        }

        .blue

        {

         background-color:

 Blue;

        }

        $（document）.ready（

        function（） {

            $（"div"）.addClass（"blue"）;

            //$（"#olID>li"）.addClass（"green"）;

            $（"#olID>li"）.hover（

            function（） {

                $（this）.addClass（"red"）

            },

            function（） {

                $（this）.removeClass（"red"）

            }）;

            $（"#olID>li:

last"）.hover（

            function（） {

                $（this）.addClass（"green"）;

            },

            function（） {

                $（this）.removeClass（"green"）;

            }）

        }）

jQuery选择器的使用

jQuery能如此的流行，很重要的一点也许就是他有非常强大且灵活的选择器，下面是一个使用选择器的例子，同样你可以复制下面的代码运行一下。

Code

Code

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

        .red

        {

            background-color:

 Red;

        }

        .green

        {

            background-color:

 Green;

        }

        .blue

        {

            background-color:

 Blue;

            font-size:

 x-small;

            font-weight:

 bold;

        }

        .yellow

        {

            background-color:

 Yellow;

            font-size:

 x-large;

        }

        li

        {

            padding:

 0 3px;

        }

        .horizontal

        {

            float:

 left;

            list-style:

 none;

            margin:

 10px;

        }

        .sub-level

        {

            background:

 #ffc;

        }

        a

        {

            color:

 #00f;

        }

        a.mailto

        {

            color:

 #f00;

        }

        a.pdflink

        {

            color:

 #090;

        }

        a.mysite

        {

            text-decoration:

 none;

            border-bottom:

 1px dotted #00f;

        }

        .table-heading

        {

            background-color:

 #ff0;

        }

        th

        {

            text-align:

 left;

        }

        .odd

        {

            background-color:

 #ffc;

        }

        .even

        {

            background-color:

 #eee;

        }

        .highlight

        {

            color:

 #f00;

            font-weight:

 bold;

        }

        .italic

        {

            font-style:

 italic;

        }

        .bold

        {

            font-weight:

 bold;

        }

        .table-heading

        {

            background:

 #0066ff;

            color:

 #ffffff;

            line-height:

 20px; /*  */

            height:

 30px;

        }

        //我们使用  $（document）.ready（）  包住我们的  jQuery 代码，DOM 加载完毕后就可以使它所有东西都可用。

        $（document）.ready（function（） {

            $（'span:

contains（冯瑞涛）'）.addClass（'red'）;

        }）;

        // 添加风格，让list横向排列

        $（document）.ready（function（） {

            //选择#selected-plays    下面的li元素

            $（'#selected-plays > li'）.addClass（'horizontal'）;

            //递归所有li，自定义选择器:

not 排除.horizontal类的元素

            $（'#selected-plays li:

not（.horizontal）'）.addClass（'sub-level'）;

        }）;

        // 使用XPath 属性选择器 为链接分配Class

        $（document）.ready（function（） {

            //正则表达式，获得所有内容为mailto:

开始的

            $（'a[href^="mailto:

"]'）.addClass（'mailto'）;

            //正则表达式，内容为.pdf 结尾的

            $（'a[href$=".pdf"]'）.addClass（'pdflink'）;

            //正则表达式，内容任何位置为finehappy的

            $（'a[href*="finehappy"]'）.addClass（'mysite'）;

        }）;

        //

        $（document）.ready（function（） {

            //为th的父对象tr添加类

            $（'th'）.parent（）.addClass（'table-heading'）;

            //tr，除了内容存在th 属性 的并且TR索引值匹配为偶数的元素

            $（'tr:

not（[th]）:

even'）.addClass（'even'）;

            //奇数

            $（'tr:

not（[th]）:

odd'）.addClass（'odd'）;

            //$（'tr:

not（[th]）'）.filter（':

odd'）.addClass（'odd'）; //同样可以实现

            //发现存在WPF的td

            $（'td:

contains（"WPF"）'）.addClass（'highlight'）;

            //自定义选择器，内容中带有WPF 的同辈（同级别）为td的元素 高亮显示

            $（'td:

contains（"WPF"）~ td'）.addClass（'highlight'）;

            /* 一下这些实现可以得到上面同样的结果 ，代表了jQuery选择器的灵活和链接能力

            1．得到包含  Henry 的单元格，然后它的兄弟（不只是下一个的兄弟）。

加入这个类：

            $（'td:

contains（"Henry"）'）.siblings（）.addClass（'highlight'）; 

            2．得到包含  Henry 的单元格，得到它的父亲，然后查找所有在它里面大于0的单元格（0 

            是第一个单元格），加入这个类：

            $（'td:

contains（"Henry"）'）.parent（）.find（'td:

gt（0）'） .addClass（'highlight'）; 

            3．得到包含  Henry 的单元格，得到它的父亲，查找所有在它里面，然后过滤那些除了包 

            含  Henry的，加入这个类：

            $（'td:

contains（"Henry"）'）.parent（）.find（'td'）.not（':

 contains（"Henry"）'） ）.addClass（'highlight'）; 

            4．得到包含  Henry 的单元格，得到它的父亲，查找在它的孩子里面的第二个单元格，然 

            后加入这个类，取消上一个  .find（） ，在孩子里查找第三个单元格，并加入这个类：

            $（'td:

contains（"Henry"）'）.parent（）.find（'td:

eq

（1）'）.addClass（ 'highlight'）.end（）.find（'td:

eq

（2）'）.addClass（'highlight'）;

            */

        }）;

jQuery的事件处理

jQuery事件处理的例子，你可以复制下面的代码，运行并对照注释，快速理解jQuery常用的事件处理方法。

Code

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

        .poem

        {

            margin:

 0 5em;

        }

        .chapter

        {

            margin:

 1em;

        }

        #switcher

        {

            float:

 right;

            background-color:

 #ddd;

            border:

 1px solid #000;

            margin:

 10px;

            padding:

 10px;

            font-size:

 .9em;

        }

        #switcher h3

        {

            margin:

 0;

        }

        /*  按钮类 */#switcher .button

        {

            width:

 100px;

            float:

 left;

            text-align:

 center;

            margin:

 10px;

            padding:

 10px;

            background-color:

 #fff;

            border-top:

 3px solid #888;

            border-left:

 3px solid #888;

            border-bottom:

 3px solid #444;

            border-right:

 3px solid #444;

        }

        #header

        {

            clear:

 both;

        }

        body.large #container .chapter

        {

            font-size:

 1.5em;

        }

        body.narrow #container .chapter

        {

            width:

 400px;

        }

        .selected

        {

            font-weight:

 bold;

        }

        .hidden

        {

            display:

 none;

        }

        #switcher .hover

        {

            cursor:

 pointer;

            background-color:

 #afa;

        }