JQuery入门

一、基本概念

1、介绍

jQuery是一个轻量级的,兼容多浏览器的JavaScript库(模块).
jQuery使用户能够更方便地处理HTML Document,Events ,实现动画效果,方便进行Ajax交互,能够极大地简化JavaScript编程.他的宗旨是:'Write less,do more.'

2、优势

1、一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2、丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3、链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4、事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5、Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6、跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7、插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

二、入门使用

1、基础语法

在head导入jquery
<script src="jquery-3.1.1.js"></script>
$等同于JQuery
语法$(选择器).方法(属性值)

2、选择器

$("p") 选取 <p> 元素。 
$("p.intro") 选取所有 class="intro" 的 <p> 元素。 
$("p#demo") 选取所有 id="demo" 的 <p> 元素。 
$("[href]") 选取所有带有 href 属性的元素。 
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。 
$("p").css("background-color","red"); 
$(this)	当前 HTML 元素 
$("p")	所有 <p> 元素 
$("p.intro")	所有 class="intro" 的 <p> 元素 
$(".intro")	所有 class="intro" 的元素 
$("#intro")	id="intro" 的元素 
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
 $("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性 
 $("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

<script>
  $("*").css("color","red");
</script>

w3school
jquery官网