jQuery快速入门与实战技巧-优快云博客

jQuery是一款优秀js开发库类，使我们写js变得更加方便，使我们开发效率更快。

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

<script language="javascript" type="text/javascript">   
    $(document).ready(function(){
        $("a").click(function() {
        alert("Hello world!");
   });
});
<script>

$本身表示一个jQuery类，所有$()是构造一个jQuery对象，click()是这个对象的方法。同理$(document)也是一个jQuery对象，ready(fn)是$(document)的方法，表示当document全部下载完毕时执行函数。

DOM操作

1.对象获取

首先，平常使用最多的是一些JQuery的对象获取方法。有很多种，

譬如：

$("a") 是返回所有A标签

$("#pId") 是返回 Id为“pId”的标签

$(".claName") 是返回class为“claName”的标签

$("*") 是返回文档内所有的标签元素

这个取元素是最直接的，最方便的，举一个简单的例子。

最少的代码做最多的事情, 这句话用在这里最经典的！

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

      $("input[name='cbo']").attr("checked",this.checked ); })

   取出复选框选中的集合
   注意写法："[name='chkbox'][checked]" 不兼容 chrome，IE6浏览器可以
   function GetCboIds() {
            var ids = "";
            $('input[name="chkbox"]:checked').each(function () {
                ids += $(this).val() + ",";
            });
            if (ids == "") {
                alert("请选择项！");
                return;
            }
            return ids;
        }

  
全选，和 反选功能
function fnCheckAll(element)
        {
            $.each($('input[name="cboFiled"]'), function (i, v) {              
                if (element.checked){                  
                    this.checked = true;
                } else {
                    this.checked = false;
                }
            });
        }

获取一组radio被选中项的值

var sexVal = $("input:radio[name='suit'][checked]").val();

2.属性取值，和赋值。

$("#cboMain").attr("checked")  取出id为cboMain 的checked值

$("#cboMain").attr("checked",true)    修改属性值

$("#image").attr.removeAttr("src");

Class样式修改

$("p").addClass("selected");   添加，

$("p").removeClass("selected");  修改样式

$("#pContent").html("123")       //修改标签值 可包含(标签)

$("#pContent").text("123")        //修改标签值 不包含

$("#txt").val("I'm here! Don't look back, Let it go! ");

判断DIV是否隐藏：

    <div id="test" style="display: none">
    </div>

            var temp = $("#test").is(":hidden"); //是否隐藏
            var temp1 = $("#test").is(":visible"); //是否可见


            alert(temp);  //true


            alert(temp1); //false

3. 事件绑定

$('#foo').bind('click', function() {

  alert('User clicked on "foo."');

});

取消事件绑定

$("p").unbind( "click" )

AJAJ调用，

$.ajax({ url: "test.html", context: document.body, success: function(){

    $(this).addClass("done");

}});

$("#aAjax").load("UPAGE.aspx","参数",function(){});

循环数组：

$.each( ['a','b','c'], function( n,j){

       alert( "Item "+ ": " + n+"value:"+j);

       });    n为，索引，j为值

后来查找资料才发现,在each代码块内不能使用break和continue,要实现break和continue的功能的话，要使用其它的方式 
break----用return false; 
continue --用return ture;

判断一个值在数组中是否存在！

var arr = [ 4, "Pete", 8, "John" ];

jQuery.inArray("John", arr);  //3

jQuery.inArray(4, arr);  //0

jQuery.inArray("David", arr);  //-1

解析JSON 数据

var obj = jQuery.parseJSON('{"name":"John"}');

alert( obj.name === "John" );

使用JQuery加载HTML文件

    1.第一种方法
    $('#top_search').load('/search/Search.html');  //窗体加载查询页面

    2.第二种方法   

 $.get("/search/Search.html", function(data) {
$("#top_search").html(data);
});