jquery
一.jQuery的概念 封装了大量的js,封装了js的入口函数,兼容性问题,DOM操做,事件,ajax 核心思想:write less,do more 官网:jqury.com下载(也能够搜索bootcdn下载) https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js 是正常的jQuery代码 https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js 是压缩的jQuery代码 导入:<script type="text/javascript" src="(指定目录下的)jQuery.js"></script> jQuery内部的api99%都是方法 事件三步走: jQuery中绑定事件直接$('选择器就能够') jQuery中的事件就是JavaScript中的事件去掉on jQuery中的事件驱动就是事件的回调函数 例:$('#box').click(function(){ $('#box').css('color','red); })二.jQuery的入口函数 1.不用等待图片资源加载完成后就能够调用(入口函数没有时间覆盖现象) <script type="text/javascript" src="jQuery.js"></script> $(document).ready(function(){ 具体操做代码 }) 2.简便写法: $(function(){ 具体操做代码 })三.js对象和jQuery对象的相互转换 1.jQuery对象转换成js对象 (1) <script> $(function(){ //去jQuery对象中的每个值 console.log($('li')) }) </script> (2) jq对象.get(索引) 2.js对象转换成jQuery对象 <script> $(function(){ oA=document.getElementById('a'); console.log($(oA)) }) </script>四.选择器 (博客) 1.css中已经学习的选择器 图 2.紧邻选择器(紧挨着的,是下一个不是上一个) <body> <div> <p>sddf</p> <a href="#">ede</a> <p>a</p>//红色 <p>awe</p> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ console.log($('a+p').css('color','red')) }) </script> </body> 3.基本过滤选择器(从多个中选出一个指定索引的) <body> <div> <span>a</span> <span>g</span> <span>th</span> <span>j</span> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('div span:eq(2)').css('color','red') }) </script> </body> 4.属性选择器 <body> <form action="#"> <input type="text"> <input type="submit"> <input type="password"> </form> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> //type上不用加引号 $('input[type=text]').css('background-color','red') </script> </body> 5.筛选选择器 1.find('选择器') 查找指定元素的全部后代元素(包括子子孙孙) <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按时</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('div').find('a').css('color','red').mouseout(function(){ //获得的是js对象 console.log(this) }) }) </script> </body> 2.children('选择器') 选中的是指定元素的直接子元素(亲儿子) <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按时</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('div').children('a').css('color','red') }) </script> </body> 3.parent() 查找父元素(亲的) <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按时</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ console.log($('span a').parent()) }) </script> </body> 4.eq('索引') 从全部符合条件的中选择某一个 <body> <div> <a href="">dg</a> <div><ul> <li>c</li> <li>c</li> <li>c</li> </ul></div> <span> <a href="">n <span>按时</span></a> </span> <form action=""><input type="text"></form> </div> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ console.log($('a')[1]) }) </script> </body> 5.siblings() 查找全部兄弟元素(不包括本身) <body> <ul> <li>a</li> <li>a</li> <li>ad</li> <li>ad</li> <li>ad</li> </ul> <script type="text/javascript" src="../day45/jQuery.js"></script> <script> $(function(){ $('li').click(function(){ $(this).css('color','red'); $(this).siblings('li').css('color','#999'); }) }) </script> </body>五.对样式属性的操做设置css.样式(css里面的属性能够用驼峰体,也能够用-链接) 单个: $('#box').css('color','red) 多个: $('#box').css{ 'color':'red'; 'width':'200px': } 例: $('.box').click(function(){ $('.box').css({ 'background-color':'green', 'width':'200px', }) })六.DOM的操做 1.对标签属性的操做 attr() <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ //attr中只有一个值是获取属性 console.log($('.aaa').attr('class')); //设置单个属性 $('.aaa').attr('id','bbb'); //一次设置多个属性 $('.aaa').attr( { 'color':'yellow', 'background-color':'red', }) }) </script> </body> removeAttr() <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('.aaa').removeAttr('class'); }) </script> </body> 2.对标签对象属性的操做 prop() 特例,只在input的radio中应用 <body> 男<input type="radio" name="sex" checked> 女<input type="radio" name="sex" > <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ console.log($('input').eq(0).prop('checked')); console.log($('input').eq(1).prop('checked')); }) </script> </body> removeProp() 3.对值得操做 html() 对标签和文本操做 若是没有参数表示获取值 有参数表示赋值 <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('.aaa').html('<a>百度一下</a>'); }) </script> </body> text() 对文本操做,若是没有参数表示获取值 有参数表示赋值 <body> <div class="aaa"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('.aaa').text('<a>百度一下</a>');//<a>百度一下</a> 此时的a标签不起做用 }) </script> </body> val() 必定是标签中有value属性的 表单控件 <body> <form action="javascript:void(0)"> <input type="text" value="不犯法"> </form> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('input').val('a'); }) </script> </body> 4.对类名的操做 addClass() 在原有类名的基础上增长新的类名 <body> <div class="a"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('div').addClass('b') }) </script> removeClass() 移除全部类名中的某一个类名或某一些类名 <body> <div class="a"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('div').addClass('b'); $('div').removeClass('a b') }) </script> </body> toggleClass() 若是类名存在就移除,不存在就增长 <body> <div class="a"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ $('div').addClass('b'); $('div').toggleClass('b')//移除 }) </script> </body>六.对属性的操做 jquery的属性操做模块分为四个部分：html属性操做，dom属性操做，类样式操做和值操做 DOM属性操做：对DOM元素的属性进行读取，设置和移除操做。好比prop()、removeProp()九.动画 9.1 <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 100px; height: 100px; /*display: none;*/ } </style> </head> <body> <button>动画</button> <button>动画</button> <button>动画</button> <div class="box"></div> <script type="text/javascript" src="jQuery.js"></script> <script> $(function(){ isshow=true; $('button').click(function(){ //显示隐藏 //hide() 隐藏方法 获取多个事件时,不用主动便利,内部直接便利 // 括号里不加参数就是直接隐藏, // 括号里加参数,第一个参数是隐藏所用的时间,第二个参数一秒以后执行的回调函数 // $('.box').hide(1000); //与hide()用法相同 // $('.box').show(1000,function(){ // alert(1); // }); //显示隐藏简单版 // $('.box').stop().toggle(1000); //淡入淡出 //$('.box').fadeIn(2000); //显示 // $('.box').fadeOut(2000); //隐藏 //卷下来,卷上去 //$('.box').slideDown(2000); //$('.box').slideUp(2000); //主动操控 //if(isshow){ //清定时器,先清后开 // $('.box').stop().slideUp(2000); //isshow=false // }else{ // $('.box').stop().slideDown(2000); //isshow=true; // } //jQuery封装好的 // $('.box').stop().slideToggle(1000); }) }) </script> </body> 9.2自定义动画 $("选择器").click(function () { var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100}; // 样式字典 所用时间 回调函数 $("div").animate(json, 1000, function () { alert("动画执行完毕！"); }); })十,
相关文章
- 1. jQuery---jQuery插件
- 2. JQuery - $, JQuery, Window.load, JQuery.ready
- 3. 【jQuery】1、下载jQuery
- 4. 【jQuery】-----jQuery简介（一）
- 5. Jquery中(function($){...})(jQuery)，$(function(){})，
- 6. jQuery-jQuery选择器
- 7. JQuery插件——jquery tools
- 8. jQuery attr() 和 jQuery prop()
- 9. 【JQuery】（1）JQuery基础
- 10. jQuery-什么是jQuery
- 更多相关文章...
- • jQuery Mobile 安装 - jQuery Mobile 教程
- • jQuery Mobile 过渡 - jQuery Mobile 教程
- • Github 简明教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章