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     })

 

  

 

posted @ 2017-05-09 16:58  雾若晨曦  阅读(163)  评论(0编辑  收藏  举报