Jquery基础

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

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

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

JS和Jquery使用中的区别

1.选择器

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

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

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

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

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

2.获取内容的方法区别

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

　　非表单元素

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

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

　　表单元素

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

　　Jquery获取和定义HTML的方法

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

1 /非标单元素
2     //a.text("hello");
3     //alert(a.text());
4     //a.html("aaa");
5     //alert(a.html());
6     //表单元素
7     //a.val("aa");
8     //alert(a.val());

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

　　JS操作属性的方法

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

　　Jquery操作属性的方法

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

4.操作样式的区别

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

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

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

　　Jquery操作样式

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

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

Jquery事件

 1 $("#cc").blur(function(){ //匿名函数 不写函数名，不能再别的地方调用
 2         alert("失去焦点了");
 3     })
 4 
 5 //事件一般有两个参数：事件源  事件数据
 6 //Jquery事件源不写，事件数据可写可不写
 7 //批量加事件
 8 $(".test").click(function(e){
 9         alert($(this).val());
10         alert(e.clientX);
11     })