Jquery基础

今天开始接触Jquery，以前对Jquery的印象是一个JS方法集，封装成类，然后在页面中引用，就可以直接调用其中的方法。

一般将Jquery文件引入放在页面的最上端（如果页面存在外部JS文件引用），引用格式如下

 <script src='file:///D|/wamp/www/jquery-1.11.2.min.js'></script> 

引入后就可以在JS代码区里直接调用了

JS和Jquery使用中的区别

1.选择器

  JS选择方法 （选择出来的是DOM元素对象）

var a = document.getElementById("aa");   //ID选择
var a = document.getElementsByClassName("aa");//类选择
var a = document.getElementsByTagName("div"); //标签选择
var a = document.getElementsByName("aa");//一般是表单元素的name选择

Jquery选择方法,jQuery选择出来的是Jquery object对象，后面加索引[0]就是DOM对象

Jquery选择规则是 $("选择元素")

var a = $("#aa"); //Jquery对象
var a = $(".aa"); //根据class名找
alert(a.eq(0)); //取第几个jquery对象,
var a = $("div"); //根据标签名找
var a = $("[bs=1]"); //根据属性找

2.获取内容的方法区别

　　JS获取和定义内容的方法是（如果不赋值就代表直接获取）

　　非表单元素

　　 a.innerText = "ceshi";//获取和赋值文本

　　2 a.innerHTML = "<span style='color:red'>hello</span>";获取和赋值全部内容，包括标签 

　　表单元素

　　a.value = "请输入用户名";

　　Jquery获取和定义HTML的方法

　　如果写参数，代表定义和赋值，如果不写参数，代表直接获取内容

/非标单元素
    //a.text("hello");
    //alert(a.text());
    //a.html("aaa");
    //alert(a.html());
    //表单元素
    //a.val("aa");
    //alert(a.val());

3.设置属性设置的方法区别

　　JS操作属性的方法

//alert(a.getAttribute("bs")); //获取属性
//a.setAttribute("test","test"); //添加属性 ,两个参数，属性名和属性值
//a.removeAttribute("bs"); //移除属性

    　　Jquery操作属性的方法

//a.attr("test","test"); //添加属性
//alert(a.attr("bs")); //获取属性
//a.removeAttr("bs"); //移除属性

4.操作样式的区别

　　JS操作样式       JS只能获取到内联式样式的内容（就是写在标签内的），无法操作内嵌式和外部的CSS样式

　　 //alert(a.style.color); //获取样式

　　2 //a.style.color = "green"; //设置样式 

　　Jquery操作样式

　　 a.css("color"); //获取样式 2

　　2.a.css("background-color","red"); //设置样式 

Jquery事件

　　

$("#cc").blur(function(){ //匿名函数 不写函数名，不能再别的地方调用
        alert("失去焦点了");
    })

//事件一般有两个参数：事件源  事件数据
//Jquery事件源不写，事件数据可写可不写
//批量加事件
$(".test").click(function(e){
        alert($(this).val());
        alert(e.clientX);
    })