官网传送门： http://jquery.com/中文API文档： http://jquery.cuishifeng.cn/jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。小例子 1.引入文件<script src="jquery-3.3.1.js"></script><div id="div1">div1</div>$('#div1').css('background','red'); //表示给前面这个对象加css样式2.<div class="aa">div2</div><div class="aa">div3</div> $('.aa').css('background','green');对象<div id="div1">div1</div>原生js方法获取对象：var oDiv1 = document.getElementById('div1');//原生对象jquery获取对象： var $div1 = $('#div1');//jq对象将两种方式得到的对象打印出来看一下区别console.log(oDiv1);console.log($div1);这里jq对象是有长度的，相当于数组。如果想打印输出对象的内容。console.log(oDiv1.innerHTML);//obj.innerHTML是原生对象的方法console.log($div1.get(0).innerHTML);原生对象的方法和jq的方法是不一样的，不能混用，但是两者可以相互转化。//原生对象转化成jq对象 $(obj)//obj.css()是jq对象的方法 原生对象使用jq对象的。css()方法$(oDiv1).css('background','red'); //jq对象转化成原生对象 $obj.get(0)//jq对象就想使用原生对象的.innerHTML方法console.log($div1.get(0).innerHTML);文档就绪函数在写jquery代码的时候建议将代码写在文档就绪函数里面//当dom已经加载 并且页面已经完全呈现时 会ready事件//因为ready()最后执行 所以将其他函数事件放在ready()中$(document).ready(function(){ var a = 5;});//是上面的简写形式$(function(){});$和jquery是一个意思，源码中有解释。![图片上传中...]几种选择器1 空格表示后代 2 >表示亲子代 3 +表示紧挨着的兄弟 4 ~表示所有兄弟 5 ：eq() <ul id="ul1"> <li>001</li> <li>002</li> <li>003</li> <li>004</li> <li>005</li> </ul>$('#ul1 li').css('background','red');5项全是红色 //选中第3个元素 003 正值从前往后找 $('#ul1 li:eq(2)').css('background','red'); 第3项是红色//选中第6行，什么效果也没有，但是也不会报错$('#ul1 li:eq(5)').css('background','red'); //倒数第一个 负值从后往前找 $('#ul1 li:eq(-1)').css('background','red'); 以下同理$('#ul1 li:even').css('background','red'); //偶数$('#ul1 li:odd').css('background','green');//奇数$('#ul1 li:first').css('background','red');$('#ul1 li:last').css('background','green');$('#ul1 li:gt(1)').css('background','red'); //大于1的会被选中$('#ul1 li:lt(1)').css('background','green'); <ul id="ul1"> <li>001</li> <li>002</li> <li class="aaa">003</li> <li>004</li> <li>005</li> </ul> $('#ul1 li:not(.aaa)').css('background','green'); $('#ul1 li:contains(3)').css('background','red');//包含3：target()举个例子导航栏中有3项 点击其中某一项，显示对应的内容。<style> #nav{ margin-bottom:800px; } #nav li{ width: 100px; height: 30px; background: #cccccc; list-style:none; float:left; margin-right:5px; cursor:pointer; text-align:center; line-height:30px; } div{ height: 400px; } #menu1{ background: #ff0000; } #menu2{ background: #00ff00; } #menu3{ background: #0000ff; } /* #menu3:target{ /*target是css的标签 用css执行会更快*/ background: #ffff00;; } */</style></head><body> <ul id="nav"> <li><a href="#menu1">菜单1</a></li> <li><a href="#menu2">菜单2</a></li> <li><a href="#menu3">菜单3</a></li> </ul> <div id="menu1"></div> <div id="menu2"></div> <div id="menu3"></div></body>若想让导航栏浮在上方，要给ul加高度 #nav{ margin-bottom:800px; height:30px; }jquery来实现<script src="jquery-3.3.1.js"></script> <script> $(function(){ $('#nav li:last').on('click',function(){ alert(123); setTimeout(function(){ $('#menu3:target').css('background','#ff0'); //一点击 函数就执行 target需要时间 },1000); }); }); </script>1000ms后，蓝色变成黄色也可以用css来实现这样的效果 #menu3:target{ /* target是css的标签 用css执行会更快 */ background: #ffff00;; }点击菜单3 蓝色变成黄色:input举个例子 输入什么 列表中对应的颜色改变 <input type="text" id="search" value="123"> <ul id="list"> <li>iphone8</li> <li>iphoneX</li> <li>huawei</li> <li>xiaomi</li> </ul> <script src="jquery-3.3.1.js"></script> <script> $(function(){ var $Lis = $('#list li'); $('#search').on('keyup',function(){//keyup当前值 console.log(this.value);//原生方法 效率高 }); }); </script>打印输出值，keyup取当前值，keydown取前一个值 console.log(this); 这里的this指的是function之前的对象，当然会输出那句话。<input type="text" id="search" value="123"> <ul id="list"> <li>iphone8</li> <li>iphoneX</li> <li>huawei</li> <li>xiaomi</li> </ul> $(function(){ var $Lis = $('#list li'); $('#search').on('keyup',function(){//keyup当前值 $('#list li:contains( this.value ).css('background','red'); }); });不会改变，因为this.value是js代码放在字符串里面识别不了。所以这里要用到字符串拼接。$('#list li:contains('+ this.value +')').css('background','red');加上else判断 如果键入值为空 背景透明 巴特 这样不好使 $(function(){ var $Lis = $('#list li'); $('#search').on('keyup',function(){//keyup当前值 //console.log(this.value);//原生方法 效率高 // console.log($(this).val());//jq方法' if(this.value != ''){ //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接 $('#list li:contains('+ this.value +')').css('background','red'); }else{ $('#list li').css('background','transparent'); } }); });把else放在前面 $(function(){ var $Lis = $('#list li'); $('#search').on('keyup',function(){//keyup当前值 //console.log(this.value);//原生方法 效率高 // console.log($(this).val());//jq方法' $('#list li').css('background','transparent'); if(this.value != ''){ //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接 $('#list li:contains('+ this.value +')').css('background','red'); } }); }); $(function(){ $('#search').on('keyup',function(){//keyup当前值 //console.log(this.value);//原生方法 效率高 // console.log($(this).val());//jq方法' $('#list li').css('background','transparent'); if(this.value != ''){ //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接 $('#list li:contains('+ this.value +')').css('background','red'); } }); }); 现在功能上没有问题，但是性能上有问题，#list li取了2次，多找了一次，我们可以把#list li先存起来赋给一个变量.$(function(){ var $Lis = $('#list li'); $('#search').on('keyup',function(){//keyup当前值 绑定事件用on //console.log(this.value);//原生方法 效率高 // console.log($(this).val());//jq方法' $Lis.css('background','transparent'); if(this.value != ''){ //this.value 要字符串拼接 $('#list li:contains(this.value)') 不行得把this.value字符串拼接 $('#list li:contains('+ this.value +')').css('background','red'); } }); }); console.log($Lis); jquery对象 类似数组:empty 选择内容为空的节点:parent 选择有内容的节点:has() 匹配含有选择器所匹配的元素的元素:hidden元素被认为是隐藏的几种情况：1.他们的display:是none.2.他们是type="hidden"的表单元素。3.他们的宽高都显示设置为0.4.一个祖先元素是隐藏的。元素visibility:hidden opacity:0被认为是可见的，因为他们仍然占据布局空间。input[type="text"][name="userid"]{ background: red; } <input type="text" name="userid"> <input type="text" name="userid1111"> 会选中第一个输入框 用jquery写 $（'input[type="text"][name="userid"]'）; nth-childnth-child(1) 从1开始nth-child(2n) 从1开始nth-child(2n+1) 从0开始<div class="test"> <p>A元素</p> <div>B元素</div> <p>C元素</p> <p>D元素</p></div>$('p:nth-of-type(2)');//C元素 从后往前看 第2次出现p标签的元素 $('p:nth-child(2)');//什么也没选中 从后往前看 第二个孩子不是p 是div 不选 加上颜色看效果更明显 <div class="test"> <p>A元素</p> <div>B元素</div> <p>C元素</p> <p>D元素</p> </div> <script src="jquery-3.3.1.js"></script> <script> $('p:nth-of-type(2)').css('background','green'); $('p:nth-child(2)').css('background','red'); </script> p:nth-of-type(2) 想找第2次出现p标签的孩子 选中第三行 C元素 第三行背景变成绿色 p:nth-child(2) 想要找第2个孩子 并且要是p标签下的 但是现在第二个孩子是div标签 所以并没有选中，没有内容变成红色 <div class="test"> <p>A元素</p> <div>B元素</div> <p>C元素</p> <p>D元素</p> </div> <script src="jquery-3.3.1.js"></script> <script> $('p:nth-of-type(2)').css('background','green'); $('div:nth-child(2)').css('background','red'); </script> div:nth-child(2)要找第2个孩子 并且要是div标签下的孩子 选中 背景变成红色var n = $("input:checked").length; 取选中的输入框inputtype="text"：focus{ background: red; }inputtype="text"{ background: yellow; }黄色输入框，获取焦点之后变成红色<input type="file">自动会让你选择文件 ：selected 选中下拉菜单
