本篇文章探讨了jQuery从入门到精通 基础学习（1），希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

<

1.什么事JQ?
一个优秀的js库，大型开发必备
2.JQ的好处
简化JS的复杂操作
不再需要关系兼容性
提供大量实用方法
3.JQ的设计思想
选择网页元素
　　-模拟css选择元素
　　　　选择元素:
　　　　 <div id="div">div<div>
　　　　$("#div").css(‘background‘,‘red‘);//根据ID选择元素
　　　　$("div").css(‘background‘,‘red‘);//根据标签选择元素
　　　　$(".div").css(‘background‘,‘red‘);//根据class选择元素
　　-独有的表达式选择
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ul>
　　选择一组:
　　$("li").css("background","red");
　　选择这组中的第一个
　　$("li:first").css("background","red");
　　选择这组中的最后一个
　　$("li:last").css("background","red");
　　那么问题来了？要选择中间那个要咋样选择呢？这时候需要使用eq()   eq类似于下标，从0开始
 　　$("li:eq(2)").css("background","red");
　　
　　选择奇数行
　　$("li:even").css("background","red");
　　选择偶数行
　　$("li:odd").css("background","red");
　　-多种筛选方法
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li   title="hello"></li>
　　　　　　<li   class="box"></li>
　　　　　　<li    class="box"></li>
　　　　　　<li title="hello"></li>
　　　　</ul>
　　
　　选择class为box的li
　　$("li").filter(‘.box‘).css("background","red");
　　筛选li  title 为hello的让其颜色变红
　　$("li").filter(‘[title=hello]‘).css("background","red");
JQ写法
　　　-方法函数化
　　　　JQ中的所有方法都函数化了
　　　　方法函数化:
　　　　JS:
　　　　window.onload=function(){};
　　　　JQ写法
　　　　$();  实际上为函数名为$ 的函数调用
　　　　function  $(){}
　　　　JS:innerHTML=123;　　
　　　　JQ :html(123) ----->function(){}
　　　　　实例
　　　　　　原生JS写法
　　　　　　window.onload=function(){
　　　　　　　　var ODiv=document.getElementById("div1");
　　　　　　　　ODiv.onclick=function(){
　　　　　　　　　　alert(this.innerHTML);　　
　　　　　　　　}
　　　　　　}
　　　　　　
　　　　　　JQ写法:
　　　　　　$(function(){　$("#div1").click(function(){alert($(this).html());})});
　　　　注意:使用JQ大多为方法调用,所以一般调用都要加括号
　　　　　-链式操作
　　　　　　$("#div1").html(‘hello‘).css("background","red").click(function(){alert("1234")});　
　　
　　　　 -取值赋值合体
　　　　　　$("#div1").html("hello");　　//赋值
　　　　　　$("#div1").html();　　//取值
　　　　　　
　　　　　　css("width","200px");//设置
　　　　　　css("width"); //获取　　　　　　
　　
　　　　　　$("li").html();　　   //当一组元素的时候，取值是一组中的第一个  aaa
　　　　　　$("li").html("hello");　 //当一组元素的时候，赋值是一组中的所有元素　　
　　　　　　　　
　　　　　　<ul>
　　　　　　　　<li>aaa</li>　　　
　　　　　　　　<li>bbb</li>
　　　　　　　　<li>ccc</li>
　　　　　　　　<li>ddd</li>　
　　　　　　　</ul>
　　　　　　
　　　　　　attr 操作属性的用法:
　　　　　　$("div").attr("title");　　　　一个参数代表获取
　　　　　　$(div).attr("title","456");　　设置属性
　　　　　　$(div).attr("class","box");　　设置属性
　　　　　　<div title="123"></div>
　　　　
JQ与JS的关系
　　 -可以共存，不能混用
　　　　$(this).html(); //JQ写法
　　　　this.innerHTML;//js的写法
　　　　$(this).innerHTML  //错误的
　　　　this.html(); 　　 //错误的    

      本文由职坐标整理发布，学习更多的相关知识，请关注职坐标IT知识库！