jQuery入门

jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery文件说明:

   　　Jquery.js  未压缩, 开发,学习阶段,推荐使用

 　　  Jquery.min.js  压缩: 没有换行,没有格式代码. 取名最简化,  项目上线,(生产环境) 推荐使用, 节省网络带宽

jQuery的语法格式:

　　 $(选择器).action();

      　　工厂函数$()：将DOM对象(原生js对象)转化为jQuery对象

　　选择器 selector：获取需要操作的DOM 元素

　　方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

  注意: jquery对象与js对象不能混合使用, jquery对象只能调用jquery的函数, js对象只能调用js的函数

 Jquery对象与js对象的转换:

1.  js对象转换为jquery对象:   $(js对象) --> jquery对象
2.  jQuery对象转换为js对象: jquery对象是一个集合

• • jQuery对象[0]        --> js对象
  • jQuery对象.get(0)  -->js对象

 Jquery代码特点:

1.  链式写法,  jquery大部分的函数,返回值都是jquery对象
2.  隐式迭代

　　　　　　$(“tr:odd”) 获取下标为奇数的tr集合, jquery对象类似集合对象

　　　　　　隐式遍历了$(“tr:odd”) 获取下标为奇数的tr的集合, 获取每个tr对象,添加css样式

　　 3. $就是jquery对象,  $ ===  jQuery , 在有的前端框架,也是使用$, 这个页面既使用呢jquery, 又使用另外使用$的框架, 此时.调用jquery的函数, 使用jQuery调用

Js的加载事件与jquery的加载事件的区别:

　　　　写法：$(document).ready(function(){  // 在这里写你的代码... })

　　1) 加载事件绑定多次, js的写法:  后面的覆盖前面的,  jquery写法: 可以绑定多次

　　2) Js的写法不能简写的,  jquery的写法可以简写, 简写如下:

　　　　$(function(){  // 在这里写你的代码...  });  推荐

　　3) 执行的时机:

 　　　   js的写法: 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行

　　　　jQuery的写法: 只需要等DOM文档结构加载完成,就执行,不需要等(图片,视频,...)加载完成

样式操作：

样式类

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
例：
$("#box").addClass("red");

css

1、一个样式一个样式的设置   css(样式属性名,值)
    $("#box").css("height","300px");
                   .css("background-color","red")
2、一次性设置多个样式   
            /* css({
                  属性名:值,
                  属性名2:值2,
                  属性名3:值3,
                  ....
                 })*/
$("#box").css({
    height:"300px",
    "background-color":"green",
    "color":"yellow"
});       

文本操作

html() 获取/设置开始标签到结束标签之间的所有的内容(包括标签)
text() 获取/设置开始标签到结束标签之间的所有的文本(不包括标签)
val()  获取/设置表单元素的value属性值 等同于js的value属性

属性操作

attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

用于checked,selected,disabled 属性，推荐使用 prop() 除这个三个之外,推荐使用 attr()

prop和attr的区别：

　　attr全称attribute(属性) 

　　prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性。

全选例题：

//全选
        $("#all").click(function(){
        //让商品前面的checkbox的checked值与全选的checked一样
        //获取标签的属性  attr()   prop()
        //alert($(this).prop("checked"));
        $(this).prop("checked","true")
        $("input[name=product]").prop("checked",$(this).prop("checked"));
 });