开发网站肯定要会JS，嫌代码太难看难学那至少要学会jQuery。当然我见过有些项目纯用服务端控件也是能做出来的，但我相信，那些碰到复杂的需求的话肯定很棘手的。jQuery是对JS和DOM的封装，少量代码直接解决大多兼容性问题。jQuery我是较后面才学稍微深入一点的，当使用纯HTML（不使用服务端控件）+jQuery是很方便而且灵活的，所以很推荐先学写简单应用。对jQuery的认识，可以多搜几篇文章，下面我给出一些常用代码和一点实例，都有详细注释。

1.ready、jQuery和Dom互转、包装集、html

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <!--//一般开发过程使用完整版有详细注释，发布后换成压缩版min-->

    <script type="text/javascript">

        $(document).ready(function () {

            alert("窗体加载完成，dom创建后触发事件。可以注册多次该事件");

            //Dom里的onload事件是在窗体加载完成，dom创建，css、图片等加载完成后再触发。只能触发一次

        });

        $(function () { //$(function ()默认就是ready!!

            var $d = $("#d1,#d2"); //包装集可以放多个ID

            $d.html("给id为d1的div标签赋值内容"); //默认操作第一个ID？

            var domd1 = $d.get(1); //提取第二个ID转换为Dom对象（不能转换为jQuery？）

            //Dom转jQuery：

            //var $jd1 = $(domd1);

            domd1.innerHTML = "啊啊啊";

        });

    </script>

</head>

<body>

    <div id="d1"></div>

    <div id="d2"></div>

</body>

2.数组处理，字典、数组遍历

数组处理：

var arr = [100, 200, 300];

        //map（源数组，函数（操作数组这里其实就是源数组,索引值这个参数可以省略））

        arr = $.map(arr, function (doArr,i) {

            doArr += i;

            return doArr;

        });

        function f() {

            alert(arr);

        }

        //测试

        f();

字典遍历：

      var myMap = { "name": "乡巴佬", "sex": "男" };

        //遍历map

        $.each(myMap, function (key, value) {

            alert(key+":"+value);

        });

        //只处理“值”

        $.each(myMap, function () {

            alert(this);

        });

数组遍历：

$.each(arr, function () {

            alert(this);

        });

组合：

var jSon = [{ "name": "乡巴佬", "height": 178 },

                    { "name": "乡巴佬", "height": 179}];

        $.each(jSon, function () {

            alert(this.name + "~" + this.height);

        });

选择器、方法

 <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#div1").click(function () {

                alert("id选择器");

            });

            $(".cl").text("class选择器");

            $("p").text("标签选择器,应该只能选择顶部标签");

            $("div,p").css("background-color", "yellow"); //组合选择器，设置css样式

            $("#div1 div").text("层次选择器，某层次下的所有对应标签");

            //$("div > p")获取div下的直接p子元素

            //$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用）

            //$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用）

        });

        function f() {

            var str = $("#txtText").val(); //不写参数表示获取值

            alert(str);

            $("#txtText").val("给对应id控件赋值"); //加上参数表示设置值

        }

$(function () {

            $("#btButton2").click(function () {

                $("#link").attr("href", "http://baidu.com");//为一个<a>标签添加href属性

                // 使用attr()方法读取或设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

                //使用removeAttr删除属性。

            });

        });

    </script>

</head>

<body>

    <div id="div1">

        <div></div>

        <p></p>

        <div>

            <div></div>

        </div>

    </div>

    <div class="cl"></div>

    <div class="cl"></div>

    <p></p>

    <p></p>

    <div></div>

    <input id="txtText" type="text" />

<input id="btButton" type="button" onclick="f()" value="获取、设置" /><br />

<a id="link">这里原本是没有超链接的</a>

<input id="btButton2" type="button" value="动态设置属性值" />

</body>

实例：图片选择器

<script type="text/javascript">

        $(function () {

            $("#choose a").click(function () {//为 id为choose下的所有a标签 注册点击事件

                $("#image").attr("src", this.href);//this表被点击的a标签

                return false;//要取消后续操作

            });

        });

    </script>

</head>

<body>

    <ul id="choose">

        <li><a href="championsskin_143001.jpg">1</a></li>

        <li><a href="championsskin_238001.jpg">2</a></li>

    </ul>

    <img id="image" src="" />

</body>

节点

next() 获取节点之后的挨着的第一个同辈元素，$(".m").next("div")

nextAll() 获取节点之后的所有同辈元素

prev、prevAll兄弟中之前的元素。

siblings() 获取所有同辈元素，除了自己。也可以加参数。

end()将匹配的元素列表变为前一次的状态。$(".m").next("div").end()就是操作.m

andSelf() 加上自身

实例：表格+多Radio+动态修改对应行的值

 <script src="js/jquery-1.9.1.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $(".radio input").on("click", function () {

                var v = $(this).val();  //选择的radio的值

                $(this).parent().nextAll(".v").html(v);  //同行（自己之后）的class=v的区域

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table border="1" cellpadding="0" cellspacing="0">

            <tr>

                <td>

                    Id

                </td>

                <td>

                    调整

                </td>

                <td>dd</td>

                <td class="v">

                    值μ

                </td>

            </tr>

            <tr>

                <td>

                    a

                </td>

                <td class="radio">

                    <input type="radio" value="5" name="a" checked="checked" />低谷时段                    <input type="radio" value="10" name="a" />平时时段

                    <input type="radio" value="15" name="a" />尖峰时段                

  </td>

                <td></td>

                <td class="v">

                    10

                </td>

            </tr>

            <tr>

                <td>

                    b

                </td>

                <td class="radio">

                    <input type="radio" value="5" name="b" />低谷时段                    

<input type="radio" value="10" name="b" checked="checked" />平时时段                    

<input type="radio" value="15" name="b" />尖峰时段                

  </td>

                <td></td>

                <td class="v">

                    5

                </td>

            </tr>

        </table>

    </div>

    </form>

</body>

08.net网站开发（前端）：5.jQuery的更多相关文章

  1. HubSpot – 网站开发必备的 jQuery 信息提示库

    HubSpot 一款功能丰富的 jQuery 消息提示插件.它可以帮助你个性化显示您的应用程序的事务性消息.您可以轻松地包裹 Ajax 请求进度,成功和错误消息,还可以添加操作链接到您的消息中. Hu ...

  2. I am back-电商网站开发&jQuery

    hi 之前有将近两周的时间没有更新,除了懒就是其他的事情耽误了.现在好了,回家了,虽然家里停水,外面又有积雪,天寒地冻的,但诸多不便,都比不过有点闲的好. 开搞每个学PHP的必经之路——电商网站的开发 ...

  3. Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的. 历史 Bootstrap 是由 Twitter 的 ...

  4. 网站开发中很实用的 HTML5 & jQuery 插件

    这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...

  5. web前端开发学习：jQuery的原型中的init

    web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...

  6. MVC5网站开发之一 总体概述

    由于前几次都没能写完,这次年底总算有自由时间了,又想继续捣鼓一下.于是下载了VS 2015专业版(不知为什么我特别钟爱专业版,而不喜欢企业版).由于以前的教训,我这次决定写一个极简的Deom,简到什么 ...

  7. MVC5 网站开发之六 管理员 2、添加、删除、重置密码、修改密码、列表浏览

    目录 奔跑吧,代码小哥! MVC5网站开发之一 总体概述 MVC5 网站开发之二 创建项目 MVC5 网站开发之三 数据存储层功能实现 MVC5 网站开发之四 业务逻辑层的架构和基本功能 MVC5 网 ...

  8. 移动端 Web 开发前端知识整理

    文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. ...

  9. Web前端之jQuery 的10大操作技巧

    不管是做什么事情,人们习惯在工作中去找方法.找技巧,来帮助提高效率,在软件开发中更是如此.jQuery作为前端开发必学技术之一,在使用中也有各种各样的小技巧,今天小编为大家分享10条必知会的技巧,希望 ...

随机推荐

  1. memcached与redis

    Memcached VS Redis 问题:memcached 与 redis 哪个好? 答:这个问题它依赖与工程类别和它的数据. 1.它们都是内存 key/value 类型的高速与高可用的查询表. ...

  2. 关于Google指令（别提baidu）

    关于google指令 关于google指令 google为我们准备好了的"指令"(directive),可以最大限度帮助我们完成每一次搜索.这些指令其实就是一个个关键字,能让我们从 ...

  3. uva 563 - Crimewave 网络流

    题目链接 有一个n*m的图, 里面有q个人, 每个点只能走一次, 问这q个人是否都能够走出这个图. 对于每个人, 建边(s, u, 1), 对于每个边界的格子, 建边(u', t, 1), 对于其他格 ...

  4. DX9三角形顶点绕序的判断

    今天亲自实践了下,终于搞清楚了. 多边形都有2个侧面,观察坐标系中正面朝向摄像机的为多边形为正面朝向多边形,正面偏离摄像机的为多边形为背面朝向多边形,d3d会把背面朝向多边形剔除,即背面消隐. 使用 ...

  5. QCombobox设置下拉框的宽度

    这几天写一个项目,里面用到qcombobox组件,其中下拉框含有129个子项,所以在点击的时候,一个下拉框就将整个电脑屏幕给占满了,很不好看并且在使用中会造成很大的苦恼.其实我就是想设置一个下拉框最大 ...

  6. 蓝桥杯之FBI树问题

    问题描述 我们可以把由"0"和"1"组成的字符串分为三类:全"0"串称为B串,全"1"串称为I串,既含"0&q ...

  7. 收藏：左路Deep Learning+右路Knowledge Graph，谷歌引爆大数据

    发表于2013-01-18 11:35| 8827次阅读| 来源sina微博 条评论| 作者邓侃 数据分析智能算法机器学习大数据Google 摘要:文章来自邓侃的博客.数据革命迫在眉睫. 各大公司重兵 ...

  8. SQL Server索引进阶：第五级，包含列

    原文地址: Stairway to SQL Server Indexes: Level 5, Included Columns 本文是SQL Server索引进阶系列(Stairway to SQL ...

  9. JS+canvas实现人机大战之五子棋

    效果图: html代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8 ...

  10. Javascript Duff装置 循环展开(Javascript Loop unrolling Duff device)

    Javascript 中会用到for 循环,当要循环的数据记录很多的时候,可能会对性能产生很大影响.这时我们可以考虑展开for循环,这时就要用到Duff装置(Duff Device). 先来看一个小例 ...