JQuery基础一

1.什么事JQ?

一个优秀的js库，大型开发必备
2.JQ的好处

简化JS的复杂操作
不再需要关系兼容性
提供大量实用方法
3.JQ的设计思想

选择网页元素
　　-模拟css选择元素

　　　　选择元素:

　　　　 <div id="div" class="box">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(); 　　 //错误的