什么是jQuery？
jQuery就是javascript的一个库，一个快速、简洁的代码库，把我们常用的一些功能进行了封装，方便我们来调用，提高我们的开发效率，极大地简化了 JavaScript 编程。
Javascipt跟jQuery的区别
如何使用jQuery代码库？
从官网jquery.com上下载jquery文件，在html源文件中导入jquery文件，即可使用
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
jQuery的DOM操作
1、获取DOM对象
<script type="text/javascript">
//$不是特殊符号，只是1个变量的名称
console.log($)
console.log(jQuery)
console.log($==jQuery)
var h1 = document.querySelector(‘h1‘)//JavaScript的获取方式
var h11 = $("h1")//jQuery的获取方式
var h12 = jQuery("h1")//jQuery的获取方式
console.log(h1)
console.log(h11)
console.log(h12)
</script>
2、修改DOM对象元素的内容
//获取和修改HTML的内容 $(‘h1‘).html(‘今晚吃啥？‘);//jQuery的修改 document.querySelector("h1").innerHTML = "今晚吃啥？"//JavaScript方式 //获取DOM对象上的内容,不传参数就是获取内容 var html = $(‘h1‘).html() console.log(html)
3、修改DOM元素的属性
//设置和修改dom元素的属性 $(‘img‘).attr("src","img/cxk.gif")//修改图片的路径 //获取dom属性的值 var imgSrc = $("img").attr("src")//获取图片的路径 console.log(imgSrc)
4、修改DOM元素的样式
注意：属性是由多个单词组成，那么key要用引号引起来，或者使用驼峰命名法，如下所示
$(".abc").css({
background:"skyblue",
color:"#fff",
"border-bottom":"10px solid purple",
borderTop:"10px solid yellow"
})
//一次性只设置1个样式
//$(".abc").css("border","10px solid pink")
5、添加和删除className
$(‘button‘).click(function(e){ console.log($(‘.d1‘).attr("class")) if($(‘.d1‘).attr("class")=="d1"){ $(‘.d1‘).addClass("swiper");//添加类名 }else{ $(‘.d1‘).removeClass("swiper");//删除类名 } //$(‘.d1‘).addClass("swiper"); //$(‘.d1‘).toggleClass("swiper");//切换类名 })
6、插入和删除DOM元素
<img src="img/cxk.gif"/>
<h1>-------------------------------------</h1>
<div id="main">
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//可以追加html代码
$(‘#main‘).append("<h1>helloworld</h1>")
//可以追加既存在的元素对象
$(‘#main‘).append($("img"))
//删除元素
$(".delete").remove()
</script>
7、DOM的相关事件
语法：$(‘css选择器‘).事件名称(function(事件对象){}) $(".d1").click(function(e){ console.log("1") }) $(".d1").click(function(e){ console.log("2") }) $(‘body‘).keypress(function(e){ console.log(e) })
原文：https://www.cnblogs.com/wmx30/p/11171492.html