js进阶 10-2 JQuery基础语法是什么

一、总结

一句话总结：

1、jquery语法超级简单：基础语法是：$(selector).action()

2、jquery选择的时候是带了引号的，肯定要带啊，又不是变量，怎么可以直接放在括号里面

3、jquery中$符号完全等同于jQuery

4、jquery改变css样式：.css然后接键值对，都有单引号，长链的模式

5、$(this)表示选中的那个元素，多个中，点击的那个，选中的元素

6、括号里面只能装变量，不是变量的直接放在括号里面是错的，要加引号

1、jquery中基础语法是?

$(selector).action()。选择的时候是带了引号的

2、jquery中$符号完全等同于jQuery么?

对的

3、jquery中如何改变元素的样式?

选中元素，然后.css然后接键值对，都有单引号，长链的模式。$('#p2').css('color','red').css('font-size','50px').css('background','green')

4、jquery中$(this)表示什么?

$(this)表示选中的那个元素，多个中，点击的那个，选中的元素

p是有多个的，$(this)表示选中的那个

19     $('p').click(function(){
20         $(this).hide()
21     })

5、jquery中如何个元素添加click事件?

选中元素，点click，里面是匿名函数

6、jquery中括号里面只能装变量，不是变量的直接放在括号里面是错的，要加引号，这句好对么，别的语言中呢?

都是对的

7、jquery中$（）中直接加函数可以么，为什么？

也是可以直接添加函数的，表示不选中元素

二、js进阶 10-2 JQuery语法一

1、相关知识：JQuery概述

1.JQuery简介

JQuery是一个JavaScript库。极大地简化了JavaScript编程。
JQuery拥有强大的选择器支持，支持CSS1-CSS3几乎所有的选择器，以及JQ独创的高级而复杂的选择器。
解决了不同浏览器间的兼容问题
代码简洁，功能强大，易于理解......

2.JQuery的引入

注：jquery1.x版本支持IE 6/7/8;jquery-2.x以上版本不再支持IE 6/7/8

目前最新版本为jquery-3.1.1(最新），大家可以随时关注官网最新版本的动态，对于初学者来说，看教程的时候，你看以前版本的教程书籍依然有用，很对新版本增加的功能对于初学者未必用得上，另你掌握了一个版本的用法之后，即使版本后续有更新，只要关注更新部分即可，不会对学习造成太大的困扰.......

JQuery各版本下载地址

官网下载到本地引入
百度压缩版本引用地址1：
http://libs.baidu.com/jquery/2.0.0/jquery.min.js
百度压缩版本引用地址2：
https://code.jquery.com/jquery-3.1.1.min.js
.....

3.JQuery的语法

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

美元符号定义JQuery
- $就是jquery对象
- $是JQuery中选取元素的符号
- $是JQuery中功能函数的前缀(功能函数后边再讲)
选择符(selector)"查询"和"查找"HTML元素
JQuery的action()执行对元素的操作

4.document.ready和window.onload的区别

Jquery中$（document).ready()的作用类似于传统javaScript中的window.onload方法，不过与window.onload方法还是有区别的。

$（function(){})和$（document).ready(function(){})这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数 Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
Window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
Window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行

2、代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>演示文档</title>
 6     <script src="jquery-3.1.1.min.js"></script>
 7 </head>
 8 <body>
 9 <input type="button" value="测试按钮">
10     <p id="p1">段落1</p>
11     <p id="p2">段落2</p>
12     <p id="p3">段落3</p>
13     <p id="p4">段落4</p>
14     <script>
15     //给元素添加事件
16     $('input').click(function(){
17         alert('jQuery就是这么简单!')
18     })
19     $('p').click(function(){
20         $(this).hide()
21     })
22     //改变元素的css样式
23     $('#p2').css('color','red').css('font-size','50px').css('background','green')
24     </script>
25 </body>
26 </html>

三、测试题-简答题