初识jQuery

最新推荐文章于 2022-05-02 11:15:12 发布

Dreamworker007

最新推荐文章于 2022-05-02 11:15:12 发布

阅读量541

点赞数

本文链接：https://blog.youkuaiyun.com/Dreamworker007/article/details/10064747

版权

今天上课讲jQuery的东西，之前写过点js，觉得挺烦的，所以jQuery还是极好的东西，不搞设计，我是多么希望我能设计美得东西。

学习网站;W3C

1 什么是jQuery?

简言之，就是一个轻量级的javascript库，许多东西里面都分装好了，较直接写js，这样方便多了，就相当于C++中的STL库。

2 基本语法

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery test</title>
    <script src="script/jquery-1.10.2.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function () {
                $("p").hide();
            })

            $("a").click(function () {
                alert("hello world");
                $(this).hide();
            })

            $("#btn").click(function () {
                alert("hello world123");
            })
        
            //让段落文本隔行显示不同文本
//             $("p:even").css("background-color", "white");
//             $("p:odd").css("background-color", "blue");
            //多重选择
            $("h1.class1").css("border", "solid 1px #ccc");

            //添加鼠标 移动事件 移动到文本上显示 红色 离开显示蓝色
            $("p").mouseover(function () {
                $(this).css("background-color", "red");
            })
            $("p").mouseout(function () {
                $(this).css("background-color", "blue");
            })
        })
 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <button type="button">click me</button>
       <p>hello world</p>
       <p>hello world</p>
       <p>hello world</p>
       <p>hello world</p>
       <p>hello world</p>
       <h1 class="class1">hello world6</h1>
        <h1>hello world7</h1>
      
      
        <a href="http://www.sina.com" target="_blank">sina</a>
        <a href="http://www.baidu.com" target="_blank">baidu</a>
        <a href="http://www.qq.com" target="_blank">tecent</a>
        
        <input type="button" id="btn" value="click">
    </div>
    </form>
</body>
</html>

代码要写在$(document).ready()里面

$() 代表选中里面的项，括号里面的标签是CSS的选择器，有标签选择器，类选择器，id选择器....

$(this)代表选中当前项，对当前项执行操作