Java学习套路之初学JQuery

前言：
为什么给博客起这么个名儿呢。有些人可能疑问，JQuery的内容不是前端需要掌握的吗，为什么你一个学java的要来学这个。我想，但凡是从事java软件开发的。都知道，一个合格的后台开发程序员，对于前端的东西必须要是了解的，注意我这里讲的是了解哈，如果说你能掌握，甚至说是精通，那也是很了不得的。作为一个以后打算在软件开发行业的我来说，经常在csdn上面搜到很多有用的博客，也在上面学了很多，有时候博主幽默的表达方式，更是改变了我对程序员一项刻板的影响。所以，我模仿者，学习着，希望可以从中进步。希望这篇博客对于新学JQuery的未来程序员能有帮助。
这是我第一天学习Jquery的内容，接下来也会陆续更新所学的内容。

学习Jquey之前，我想有必要告诉你，你需要具备一定的html和js的基础，不然你真的有可能迷糊

内容 分为下面几个部分讲：

一 .什么是jquery以及为什么要学

• 什么是juery

  不管在学习什么的时候，我们首先要知道，这个东西是什么。学过js的同胞们，想必都知道这是个什么东东吧。所谓的jquery其实就是一个js库，是对js中的一些功能代码的封装，也就是说其实他的底层的东西还是js实现的，只是展现给程序员的调用的东西更简单方便了而已。使得web端的开发变得简单而且省时省力。

• 为什么要学jquery

  我们都知道其实程序员的一种很懒的生物，总的来说人类都是很懒的生物，但却正好是这种懒的精神，才有了现在更加方便快捷的生活。而jquery就是为了更方便程序员的开发。原来js的代码复杂冗余，本来用jquery几个单词就可以实现的东西，而js却要四行来实现(这里可能夸张了，但是我想表达的意思就是，jquery是真的好)既然有这么好的东西，那为什么还要用js呢，那不是给自己找罪受不是？虽然这么说，但是并不是说可以完全不学js就去学jquery(可以到也是可以)，但是如果你学了js，jquery就会更好学，而且你会发现，jquery简直好用到飞起。那你说，既然都这样了，还学不学jquery，答案肯定是必须的啊!

二. jquery代码应该写在哪里

关于这个内容，之前我就说了，其实jquery就是一个js库，那么既然是js库，那么就和js的写的位置是一样的，当然是可以(跟下面连载一起看）
1. 直接写在html的script标签当中
就像下面这样

你可以暂时不要这是什么鬼，没见过这种语法，咋慢慢来，你只要知道在这个位置可以写就行了，这和js是一样的，至于怎么写，后面我会告诉你的哦！
2. 也可以新建一个js文件，写个一个js文件里面，然后通过script引入该js文件就行了。就像这样：

三. jquery怎么写

• 就绪函数 ()——-(document).ready(function(){});
  –在知道jquery怎么写之前，你需要要知道什么是就绪函数
  就像js中的window.onload()函数一样，但是还有点不同，load（）函数是在网页文档全部加载完毕才会执行该函数，例如图片视频等加载完毕。但是就绪函数是等网页文档全部绘制完毕后才执行，也就是说网页中的视频图片什么的可能还是显示出来就会执行。

  所以为了防止DOM文档在完全加载之前运行jQuery代码，jquery的所有代码都必须放在就绪函数里面。

---

• 就绪函数的写法—-

  1. 这是最原始的写法，为了方便还有更简便的写法：
     
  2. 更简便的写法：
     

• jquery语法—–$(selector).action();
  好了。终于来到重点了。只要掌握了jquery的这句语法，我告诉你哈，那你走路都可以横着走，谁怕谁，反正所有的实现都是更具这个语法改啊，填啊。补啊的。
  ……. selector指的就是选择器,选择器有很多种，下面在细讲；
  ……. actoin包含事件，属性，css等等，也很多，面细讲。

四 . jquery选择器(selector)

• 种类
  1.## 基本选择器 ##

  id选择器，通过#来获取（语法：”#id“）;
  元素选择器: 直接通过元素标签获取（element）例如(“div”）；
  类选择器： 通过.获取 ；例如(.class);
  并集选择器： 可以有多个选择器，之间用逗号隔开。例如（“#id，.class,div”）；
  全局选择器： 有兴趣自己区查查；

  2.## 层次选择器 ##

  > 后代选择器：$("a b") ；匹配并获取a元素里的所有后代b元素
    子选择器：$("parent > child") ；匹配并获取parent元素里的直接子元素child 
    相邻选择器：$("prev + next") ；匹配并获取紧挨着prev元素后的next元素 
    同辈选择器; $("prev ~ siblings") ；匹配并获取prev元素后的所有siblings元素 
  

  3.## 表单选择器：##

  ：input —->查找所有的input元素
  :text—–> 查找所有文本框 input 标签下type = text的元素
  : password——>查找所有密码框
  ……
  可以查找input标签下的各种类型的元素；

4.## 过滤选择器： ##

基本过滤选择器：
：first（筛选出来的元素集合的第一个元素）
：last（筛选出来的元素集合的最后一个元素）
……
内容过滤选择器：
状态选择器：
:checked——-选出被选中的input标签
：selected——-选出被选中的下拉列表框..
可见性过滤选择器：

五. jquery的常用action

• .常用 事件：

   1.窗口事件：常用的就是我们前面提到的就绪函数就是最常用的窗口事件；
   $(document).ready(function(){});

    2.鼠标事件：
    $(selector).click(function(){};);//点击事件  **该事件只只的是点击鼠标左键**
    $(selector).dblclick(function(){};);//双击击事件  **该事件只只的是点击鼠标左键**
    $(selector).mousedown(function(){};);//鼠标按下事件  按下鼠标任意键
    $(selector).mouseout(function(){};);//鼠标抬起事件 按下鼠标任意键
    $(selector).mouseover(function(){};);//鼠标移入事件  
    //类似这样的事件还有很多，有兴趣的可以查阅帮助文档

  3.鼠标组合事件：
/* 1-----鼠标移入移除事件组合*/
$("td").hover(
  function () {
   //函数体
  },//鼠标移入事件
  function () {
   //函数体
  }//鼠标移出事件
);



/*2-------多次点击事件组合*/
$("td").toggle(
  function () {
    //函数体
  },//鼠标第一次点击时执行
  function () {
   //函数体
  },、
   function () {
   //函数体
  }
);

• 属性：

    $(selector).html();//相当与js中的innerHtml属性；
    $(selector).val();//相当与js中的value属性；
    $(selector).text();//与html不同。html获取选中的第一个对应元素的值，而text()获取所有匹配元素的文本值
    $("p").addClass("selected");//添加一个css样式
    $("p").removeClass("selected");//移开一个css样式

• css :

 $(selector).css（）；//改变jquery对象的类样式；

• 常用工具函数

   $.trim("  hello, how are you?  ");//去掉字符串起始和结尾的空格。
   $.isNumeric() //方法检查它的参数是否代表一个数值。如果是这样，它返回 true。否则，它返回false。该参数可以是任何类型的
   $.type(obj)//返回值:String 检测obj的数据类型。
   $("img").each(function(i){//遍历获取的jquery对象，i表示的当前对象所在的位置
   this.src = "test" + i + ".jpg";
 });

六 .jquery对象和DOM对象

• 注意：所有通过jquery语句获取的都是jquery对象的数组，数组里面装的是DOM
  对象

---

 - jquery对象：通过jquery语句获取的对象都是jquery对象。
 - DOM对象：通过js语句获取的对象就是dom对象。

• jquery对象和DOM对象之间的相互转换：
  
  1. jquery对象转换为DOM对象：jquery对象.get(i) | jquery对象[i];
  2. DOM对象转化为jquery对象：$(DOM对象)；
  3. 注意：为了方便开发人员，约定jquery对象对应的变量以$开头；