“$”就是jQuery当中最重要且独有的对象：jQuery对象

var btn=$('#btn');
btn.css('background','red');
//css()这个方法调用完毕，返回的还是Jquery对象，可以链式编程。
$('#btn').css('background','red').css('font-size','50px').css('width','100px');

加载模式

//onload这种方式，是我们原生JS的方式。
/*  window.οnlοad=function(){
$('#btn').css('background','red').css('font-size','50px').css('width','100px');
} */
//Jquery也有自己的方式，等待整个文档加载完毕去执行，我们就使用Jquery的方式。
/* $(document).ready(function(){

$('#btn').css('background','red').css('font-size','50px').css('width','100px');

}); */
//上面这个等待html文档加载完毕再去执行的写法，有一个简写形式。
$(function(){
$('#btn').css('background','red').css('font-size','50px').css('width','100px');
});

<button id="btn" type="button">一个按钮</button>

原生DOM与JQuery对象互转

//原生的方式 获取原生的DOM对象 JS原生对象，你就用原生对象的属性和方法，不能用Jquery的，用了也效果。
var btn=document.getElementById("btn");
btn.style.background="red";

//原生的DOM对象 转换成Jquery的对象 使用 $(原生DOM对象) 包裹一下。
var btn2=document.getElementById("btn2");
//你只需要把元素DOM对象，使用$(原生DOM对象) 包裹一下。
$(btn2).css('width','200px').css('background',"yellow");

//把Jquery对象转换成原生的DOM对象。使用Jquery中的get(索引)
var ysDiv=$('#div1').get(0);
ysDiv.style.color="yellow";

DOM操作

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<h1 id="myh">aaaa</h1>
<h1 id="myh2">bbbb</h1>
<input type="text" id="" value="abc" />
//
//html()
//text()
//val() 针对input标签的
$('#myh').text("这是一行标签"); //相当于原生JS的 innerText;
//追加
//$('#myh').text($('#myh').text()+"这是一行标签");
$('#myh2').html("<p>这是文本</p>");//相当于原生JS 的 innerHTML
var name=$('input').val();
alert(name);

<style type="text/css">
.myh4{
color:blue;
}
.hehe{
font-size: 100px;
}
</style>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<h1 id="myh" align="center">aaaa</h1>
<h1 id="myh2">bbbb</h1>
<h1 id="myh3">bbbb</h1>
<h1 id="myh4">cccccc</h1>
<button type="button">切换样式</button>
//
//设置或获取属性的值
$('#myh').attr('align','right').attr('style','color:red;font-size:50px');
var json={
'align':'center',
'style':'color:red;font-size:50px'
}
$('#myh2').attr(json);
$('#myh2').removeAttr("style");
//css()给元素设置样式的方法，可以连缀使用
$('#myh3').css({
color:'yellow',
// 注意css属性名如果有 -连接，把-去掉,把 -后面的第一个字母变大写
fontSize:'200px'
});

//给标签添加class属性，专用的方法
//$('#myh4').addClass('myh4 hehe');
//给标签添加任何属性。
//$('#myh4').attr('class','myh4');
$('button').click(function(){
//切换默认样式和设置的样式
$('#myh4').toggleClass('myh4 hehe');
})

选择器对应的方法

<div id="div1">
<h1>aaaaa</h1>
</div>
<p>ppppppp</p>
<h3>3333333333</h3>

//$('div >h1').css('color','red');
$('#div2').children('h1').css('color','red')
$('p').next('h3').css('color','yellow');
$('p').nextAll('h3').css('color','yellow');

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<ul>
<li class="myli">aaaa</li>

</ul>
//
//针对上面三个选择器，Jquery有对应的方法
$('li').first().css('color','red');
$('li').last().css('color','red');
$('li').eq(2).css('color','red');
//get()返回的是原生的DOM对象
$('li').get(3).style.color='yellow';

循环方法

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<ul>
<li class="myli"></li>
</ul>
//
$('li').text("这是一个列表项").width(300).height(100);
//Jquery each() 方法可以用来遍历
$('li').each(function(index,ele){
//alert(index+"==="+ele);
//注意的是：迭代的元素，是原生的DOM对象
//$(ele).css('font-size','100px');
if(index%2==0){
$(ele).css('background','green');
}else{
$(ele).css('background','yellow');
}
})
//$.each() 可以遍历JS元素的数组
//$.each(原生JS数组对象,function(索引，当前元素){})
var arr=[100,200,300,400];
$.each(arr,function(index,ele){
alert(index+"==="+ele);
})

节点操作
//创建节点
var ele=$(‘

一行标签

’);
//站在父标签的角度，把子标签添加到我的里面去,默认是往后面加
$(‘body’).append(ele);
(′body′).append(′<h1>一行标签</h1>′);//('body').append('<h1>一行标签</h1>'); //(′body′).append(′<h1>一行标签</h1>′);//(‘body’).html(‘

一行标签

’);
//站在子标签的角度，把我添加到父标签里面去
//ele.appendTo($(‘body’));
$(‘body’).prepend(“

一行标签

”)

var firstH=$(’#myh’);
firstH.after(‘

22222222

’);
firstH.before(‘

22222222

’);

//兄弟关系的节点移动，把h1标签，移动到div的下面
(′h1′).insertAfter(('h1').insertAfter((′h1′).insertAfter((‘div’));
//兄弟关系的节点移动，把h2标签，移动到div的上面
$(‘h2’).insertBefore(‘div’);

//给每一个 h1 外部，都包裹了一个div
//都是站在子标签的角度
$(‘h1’).wrap(’

’);
//给所有的h2标签整体包裹一个div
$(‘h2’).wrapAll(’’);
//去掉h2外部包裹的标签
$(‘h2’).unwrap();
//给div里面的子元素外面，包裹一个div
$(‘div’).wrapInner(’’);

//KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲div1').html("")…(’#div1’).empty();
//干掉自己
$(’#div1’).remove();
//干掉自己 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
$(‘h2’).detach();

事件的绑定

//绑定事件 bind() 需要注意的是 bind() unbind() 这两个方法，已经在Jquery3.0版本以上移除了
$('button').bind('click',function(){
alert("OK");
});
//解绑事件 unbind()
$('button').unbind();

//事件的简写方式，针对某些事件，都提供了响应的方法，命名规则就是  事件名(事件的处理函数)
//e接收事件对象
//针对事件对象，Jquery对事件对象，并没有做任何处理，我们可以直接使用JS里面事件对象的属性和功能
$('button').click(function(e){
alert("aaaa");
alert(e.type);
alert(e.target);
});
/* $('div').mouseover(function(){
//注意this代表的是这个原生的dom对象，你使用Jquery包裹一下，让他变成Jquery对象
$(this).css('background','yellow');
})
$('div').mouseout(function(){
//注意this代表的是这个原生的dom对象，你使用Jquery包裹一下，让他变成Jquery对象
$(this).css('background','blue');
}) */

事件自动触发

//自动触发事件，需要调用方法trigger(); 获取 triggerHandler('click')
$('button').triggerHandler('click'); */
//事件自动触发简写
$('button').click(function() {
alert("abcc");
}).trigger('click');

推荐方式绑定事件

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<button type="button">按钮</button>
<input type="button" value="按钮222"/>
//
//有时我们不用事件的简写，那么就用推荐的这个on() off() one() 来进行事件的绑定和解绑
$('button').on('click',function(){
alert("谈了");
}).on('mousedown',function(){
$(this).css('background','red');
}).on('mousemove',function(){
$(this).css('background','yellow');
});
//解绑事件
//$('button').off(); //不给参数，移除元素上面绑定的所有事件
//根据事件名移某个事件
$('button').off('mousedown');
//这个事件只触发一次
$('input[type=button]').one('click',function(){
alert("hehe");

主要问题

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
//
<ul>
<li>aaa</li>
<li>bbb</li>
<li>cccc</li>
<li>dddd</li>
<li>eeee</li>
</ul>
<ol>
</ol>
//
//用简写来绑定，那么你就要直接绑定到，你要操作的元素上
// $('ul li').click(function(){
//  $(this).css('color','red');
// });
//on() 方法来绑定，他可以把事件绑定到ul上，但是触发的时候，是里面li触发的。
$('ul').on('click', 'li', function() {
$(this).css('color', 'red');
})

//事件委托，把未来才有的子元素的事件，先委托给父元素，将来子元素有了，就可以使用这个事件了
$('ol').on('click', 'li', function() {
alert("hehehhe")
});

var li = $('<li>1111111111111111111111</li>');
$('ol').append(li)