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元素对象)
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 })