jQuery学习笔记详解--(一）

概念

    jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
            就是一堆JavaScript代码
    jQuery库包含以下功能：
        HTML 元素选取
        HTML 元素操作
        CSS 操作
        HTML 事件函数
        JavaScript 特效和动画
        HTML DOM 遍历和修改
        AJAX
        Utilities
        提示： 除此之外，jQuery还提供了大量的插件。
    目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，还提供了大量扩展。

  jQuery的版本

        jQuery版本有很多，分为1.x 2.x 3.x
            1.x版本：能够兼容IE678浏览器
            2.x版本：不兼容IE678浏览器
            1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
            3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是
                        兼容IE678） 国内多数网站还在使用1.x
        jQuery有两个版本：
            生成环境使用的和开发测试环境使用的。
            Production version - 用于实际的网站中，已被精简和压缩。没有空格和换行
            Development version - 用于测试和开发（未压缩，是可读的代码）
        jQuery的使用：
            jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用
            它，跟引用自己的 外部JavaScript脚本文件一样的语法。

jQuery语法结构

        jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。

    基础语法： $(selector).action()

        说明：美元符号定义 jQuery
            选择符（selector）“查询"和"查找” HTML 元素
            jQuery 的 action() 执行对元素的操作

    文档就绪事件

        文档就绪事件，实际就是文件加载事件。
        这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以
        对 DOM 进行操作。
        如果在文档没有完全加载之前就运行函数，操作可能失败。
        所以我们尽可能将所有的操作都在文档加载完毕之后实现。
        写法1：
            $(document).ready(function(){
                // 开始写 jQuery 代码...
            });
        写法2：
            简介写法-推荐
            $(function(){
                // 开始写 jQuery 代码...
            });
        jQuery的ready方法与JavaScript中的onload相似，但是也有区别：

jQuery选择器:

    jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于
    已经 存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
    jQuery 中所有选择器都以美元符号开头：$()。

  元素/标签选择器

        jQuery 元素选择器基于元素/标签名选取元素。
        $(标签名称)

  id 选择器

        jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
        页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。
        通过 id 选取元素语法如下：
        $("#p1")

  . class 选择器

        jQuery 类选择器可以通过指定的 class 查找元素。
        $(".mydiv")
        全局选择器
        匹配所有元素
         $("*")

  并集选择器

        将每一个选择器匹配到的元素合并后一起返回。
        $(“div,ul,li,.mydiv”)

  后代选择器

        在给定的祖先元素下匹配所有的后代元素
        $(“form input”)

  子选择器

        在给定的父元素下匹配所有的子元素
        $(“form > input”)

  相邻选择器

        匹配所有紧接在 prev 元素后的 next 元素
        $(“label + input”)

  同辈选择器

        匹配 prev 元素之后的所有 siblings 元素
        $(“form ~ input”)

  属性选择器

        匹配包含给定属性的元素

  可见性选择器

        匹配所有的可见或不可见的元素
        $(“div:visible”);
         $(“input:hidden”);

jQuery常用函数

  与标签内容相关函数

    用到函数匹配的都是第一个匹配的元素
    括号里面有内容，就是修改
        var str1 = $("div").html();
            获取的是围堵标签在内的所有元素，包括了嵌套在内的标签
        var str1 = $("div").text();
            获取的是围堵标签在内的所有文本，不包括标签内容
        var str1 = $("div").val();
            只能用在表单元素中，获取的是标签的内容，例如输入框里的文本

  与标签属性相关函数

         var img = $("img");
        var src = img.attr("src");
            获取指定的属性
        img.attr("src","新的属性值")；
            给指定的属性设置新值
        img.removeAttr("title");
            移除指定属性

var list=$("input[type='radio']"); 
for(var i=0;i<list.length;i++){
	var flag=$(list[i]).prop("checked");
	console.log("checked="+flag);
}

    获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中

  与标签样式相关函数

.redbg(){
	background-color:red;
}
$("div").addClass("redbg");

        添加提前定义好的样式
        添加多个中间用空格隔开
    $("input").css("属性名"，“值”)；
        添加多个是属性名：值 中间用逗号隔开
        添加样式
        注意：取出时，去除的只是第一个匹配的元素，而添加和修改时，修改的是所有
    $("input").removeClass("样式名/属性名")
        移除样式，为空时，移除所有样式
    $("input").toggleClass("样式")；
        切换样式：如果有这个样式，就删除，如果没有这个样式，就添加

jQuery与js对象的转换