码迷,mamicode.com
首页 > Web开发 > 详细

JQuery

时间:2019-06-26 23:12:14      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:coding   jquer   行操作   back   dtd   lang   doctype   class   code   

1. 什么是jQuery

它是一个轻量级的javascript类库

2. jQuery优点

总是面向集合
多行操作集于一行

3.导入js库

<script type="text/javascript" src=""></script>

4. jQuery三种实例化方法

1.选择器

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $("a").click(function(){
            alert("利用a标签获取jquery实例")
        });
        
        $(".c2").click(function(){
            alert("利用类选择器获取jquery实例");
        });
        
        $("#a3").click(function(){
            alert("利用id选择器获取jquery实例");
        });
        
        $("div button").click(function(){
            alert("利用包含选择器获取jquery实例");
        });
        
        $("a,button").click(function(){
            alert("利用组合选择器获取jquery实例");
        });
        
    })
</script>
</head>
<body>
    <p>
        <a id="a1" class="c1" href="#">点我1</a>
    </p>
    <p>
        <button id="a2" class="c2" href="#">点我2</button>
    </p>
    <p>
        <button id="a3" class="c3" href="#">点我3</button>
    </p>
    <div>
        <button id="a4" class="c1" href="#">点我4</button>
    </div>
    
</body>
</html>

 

JQuery

标签:coding   jquer   行操作   back   dtd   lang   doctype   class   code   

原文地址:https://www.cnblogs.com/huxiaocong/p/11094427.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!