一、基本概念
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官网