携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第19天，点击查看活动详情

什么是jQuery？

jQuery是一个轻量级的JavaScript库，是现在最流行的js代码库。

jQuery语法

基础语法：$(selector).action()

其中美元符号是定义jQuery，选择符selector是‘查询’和‘查找’HTML元素，jQuery的action()执行对元素的操作

文档就绪事件：为了防止文档在完全加载之前执行jQuery代码

$(document).ready(function{
      //jQuery代码;
});

//与上方代码作用相同

$(function(){
  //jquery代码
});

jQuery选择器

jQuery所有的选择器都是以美元符号开头

#ID选择器 下面实例中，点击button按钮，只有“这是另外一个段落”会隐藏

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

.class选择器 实例中“这是一个标题”和“这是一个段落”隐藏，因为他们有class属性

<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

jQuery事件

页面对不同访问者的响应叫做事件。

常见的事件：

（1）click() 当按钮点击事件被触发时会调用一个函数

（2）dblclick() 双击元素触发事件

（3）mouseenter()鼠标指针穿过元素时触发事件

（4）mouseleave()鼠标指针离开元素时触发事件

（5）mousedown()当鼠标指针移动到元素上方，并按下鼠标键触发事件

（6）mouseup()当在元素上松开鼠标按钮时触发事件

（7）hover()用于模拟光标悬停事件当鼠标移动到“这是一个段落”上时会弹出你进入了P1。移开时会弹出拜拜! 现在你离开了 p1!

<script>
$(document).ready(function(){
    $("#p1").hover(
		function(){
			alert("你进入了 p1!");
		},
		function(){
			alert("拜拜! 现在你离开了 p1!");
		}
    )
});
</script>
</head>
<body>
<p id="p1">这是一个段落。</p>
</body>

（8）focus()当元素获得焦点时触发事件

（9）blur()当元素失去焦点时触发事件

事件使用方式：

$("p").click(); //指定一个点击事件

//点击后触发事件，通过一个函数实现
$("p").click(function(){});

jQuery基础

什么是jQuery？

jQuery语法

jQuery选择器

jQuery事件