JQuery学习

发表于

JQuery

JQuery 是一个 javaScript 函数库

jquery库导入

1
<script src="jquery-2.1.1.min.js"></script>

jquery库包含的功能

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript特效和动画
  • HTML DOM 遍历和修改
  • AJAX–在不刷新页面的同时来修改页面的内容，将服务器所请求的数据直接显示在页面上
  • Utilties

jquery 选择器

  • $ 符号定义jquery
    元素选择，以下代码当点击“button”按钮时，更改p元素中的内容

    1
    2
    3
    4
    5
    $(document).ready(function(){   //判断文档是否加载完全
    	$("button").click(function(){
    		$("p").text("P元素的内容被修改");
    		});
    	});

  • id选择，( # + id)

1
2
3
4
5
$(document).ready(function(){
 	$("button").click(function(){
 		$("#pid").text("id为pid的元素内容被修改");
 		});
 	});
  • class选择，( . + class )
1
2
3
4
5
$(document).ready(function(){    
 	$("button").click(function(){
 		$(".pclass").text("class为pclass的元素内容被修改");
 		});
 	});

jquery 事件

  • .click 单击
  • .dbclick 双击
  • .mouseenter 鼠标悬停
  • .mouseleave 鼠标离开
  • .bind()/.on() 绑定事件
  • .unbind()/.off() 解绑事件

    用jquery提供的bind 来做监听事件

    1
    2
    3
    4
    5
    6
    7
    $(document).ready(function(){
    	$("#buttonid").bind("click",clickdemo);   //绑定click事件
    });
    function clickdemo(e){
    	console.log("clickdemo")   //控制台输出
    }