JQuery的使用官网地址https//jquery.com入口函数body script $(div).hide(); }) /script div/div /body上图代码执行结果与预期不符先执行了js代码但div 未加载出故失败。由于要等着dom加载完了才去执行js代码》入口函数body script // 等着页面DOM加载完毕再去执行js 代码 //方法一 // $(document).ready(function() { // $(div).hide(); // }) //方法二 $(function() { $(div).hide(); }) /script div/div /bodyjQuery的顶级对象$body div/div script // 1. $ 是jQuery的别称另外的名字 // $(function() { // alert(11) // }); jQuery(function() { // alert(11) // $(div).hide(); jQuery(div).hide(); }); /script /bodyjQuery对象和DOM对象style div { width: 100px; height: 100px; background-color: pink; } /style /head body div/div span/span script // 1. DOM 对象 用原生js获取过来的对象就是DOM对象 var myDiv document.querySelector(div); // myDiv 是DOM对象 var mySpan document.querySelector(span); // mySpan 是DOM对象 console.dir(myDiv); // 2. jQuery对象 用jquery方式获取过来的对象是jQuery对象。 本质通过$把DOM元素进行了包装 $(div); // $(div)是一个jQuery 对象 $(span); // $(span)是一个jQuery 对象 console.dir($(div)); // 3. jQuery 对象只能使用 jQuery 方法DOM 对象则使用原生的 JavaScirpt 属性和方法 // myDiv.style.display none; // myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法 // $(div).style.display none; 这个$(div)是一个jQuery对象不能使用原生js 的属性和方法 /script /bodybody video srcmov.mp4 muted/video script // 1. DOM对象转换为 jQuery对象 // (1) 我们直接获取视频得到就是jQuery对象 // $(video); // (2) 我们已经使用原生js 获取过来 DOM对象 var myvideo document.querySelector(video); // $(myvideo).play(); jquery里面没有play 这个方法 // 2. jQuery对象转换为DOM对象 // myvideo.play(); $(video)[0].play() $(video).get(0).play() /script /bodyjQuery常用的APIjQuery选择器body div我是div/div div classnav我是nav div/div p我是p/p ol li我是ol 的/li li我是ol 的/li li我是ol 的/li li我是ol 的/li /ol ul li我是ul 的/li li我是ul 的/li li我是ul 的/li li我是ul 的/li /ul script $(function() { console.log($(.nav)); console.log($(ul li)); }) /script /body隐式迭代body div惊喜不意外不/div div惊喜不意外不/div div惊喜不意外不/div div惊喜不意外不/div ul li相同的操作/li li相同的操作/li li相同的操作/li /ul script // 1. 获取四个div元素 console.log($(div)); // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style $(div).css(background, pink); // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环给每一个元素添加css这个方法 $(ul li).css(color, red); /script /body筛选选择器body ul li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li /ul ol li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li li多个里面筛选几个/li /ol script $(function() { $(ul li:first).css(color, red); $(ul li:eq(2)).css(color, blue); $(ol li:odd).css(color, skyblue); $(ol li:even).css(color, pink); }) /script /body筛选方法body div classyeye div classfather div classson儿子/div /div /div div classnav p我是屁/p div p我是p/p /div /div script // 注意一下都是方法 带括号 $(function() { // 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸 console.log($(.son).parent()); // 2. 子 // (1) 亲儿子 children() 类似子代选择器 ulli // $(.nav).children(p).css(color, red); // (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器 $(.nav).find(p).css(color, red); // 3. 兄 }); /script /bodybody ol li我是ol 的li/li li我是ol 的li/li li classitem我是ol 的li/li li我是ol 的li/li li我是ol 的li/li li我是ol 的li/li /ol ul li我是ol 的li/li li我是ol 的li/li li我是ol 的li/li li我是ol 的li/li li我是ol 的li/li li我是ol 的li/li /ul div classcurrent俺有current/div div俺木有current/div script // 注意一下都是方法 带括号 $(function() { // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟 $(ol .item).siblings(li).css(color, red); // 2. 第n个元素 var index 2; // (1) 我们可以利用选择器的方式选择 // $(ul li:eq(2)).css(color, blue); // $(ul li:eq(index)).css(color, blue); // (2) 我们可以利用选择方法的方式选择 更推荐这种写法 // $(ul li).eq(2).css(color, blue); // $(ul li).eq(index).css(color, blue); // 3. 判断是否有某个类名 console.log($(div:first).hasClass(current)); console.log($(div:last).hasClass(current)); }); /script /body新浪下拉案例排他思想body button快速/button button快速/button button快速/button button快速/button button快速/button button快速/button button快速/button script $(function() { // 1. 隐式迭代 给所有的按钮都绑定了点击事件 $(button).click(function() { // 2. 当前的元素变化背景颜色 $(this).css(background, pink); // 3. 其余的兄弟去掉背景颜色 隐式迭代 $(this).siblings(button).css(background, ); }); }) /script /body淘宝服饰精品案例未解决链式编程jQuery样式body div/div script // 操作样式之css方法 $(function() { console.log($(div).css(width)); // $(div).css(width, 300px); // $(div).css(width, 300); // $(div).css(height, 300px); 属性名一定要加引号 $(div).css({ width: 400, height: 400, backgroundColor: red // 如果是复合属性则必须采取驼峰命名法如果值不是数字则需要加引号 }) }) /script /bodystyle div { width: 150px; height: 150px; background-color: pink; margin: 100px auto; transition: all 0.5s; } .current { background-color: red; transform: rotate(360deg); } /style script srcjquery.min.js/script /head body div classcurrent/div script $(function() { // 1. 添加类 addClass() // $(div).click(function() { // // $(this).addClass(current); // }); // 2. 删除类 removeClass() // $(div).click(function() { // $(this).removeClass(current); // }); // 3. 切换类 toggleClass() $(div).click(function() { $(this).toggleClass(current); }); }) /script /bodytab栏切换未解决类操作和className的区别style .one { width: 200px; height: 200px; background-color: pink; transition: all .3s; } .two { transform: rotate(720deg); } /style script srcjquery.min.js/script /head body div classone two/div script //原生js的className // var one document.querySelector(.one); // one.className two;//原先里面的one没有了 只剩下类名two //jQuery中className // $(.one).addClass(two); 这个addClass相当于追加类名 不影响以前的类名 $(.one).removeClass(two);//类名one two同时存在 /script /bodyjQuery效果show/hide/toggle/slideDown/slideUp/slideToggle/fadeIn/fadeOut/fadeToggle语法一样。滑动 淡入淡出有动画显示。style div { width: 150px; height: 300px; background-color: pink; } /style script srcjquery.min.js/script /head body button显示/button button隐藏/button button切换/button div/div script $(function() { $(button).eq(0).click(function() { $(div).show(1000, function() { alert(1); }); }) $(button).eq(1).click(function() { $(div).hide(1000, function() { alert(1); }); }) $(button).eq(2).click(function() { $(div).toggle(1000); }) // 一般情况下我们都不加参数直接显示隐藏就可以了 }); /script /body停止动画排队和案例style div { position: absolute; width: 200px; height: 200px; background-color: pink; } /style /head body button动起来/button div/div script $(function() { $(button).click(function() { $(div).animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }) }) /script /bodyjQuery属性body a hrefhttp://www.itcast.cn title都挺好都挺好/a input typecheckbox name id checked div index1 />body div span我是内容/span /div input typetext value请输入内容 script // 1. 获取设置元素内容 html() console.log($(div).html()); // $(div).html(123); // 2. 获取设置元素文本内容 text() console.log($(div).text()); $(div).text(123); // 3. 获取设置表单值 val() console.log($(input).val()); $(input).val(123); /script /bodyjQuery元素body div1/div div2/div div3/div script $(function() { // $(div).css(color, red); // 如果针对于同一类元素做不同操作需要用到遍历元素类似for但是比for强大 var sum 0; // 1. each() 方法遍历元素 var arr [red, green, blue]; $(div).each(function(i, domEle) { // 回调函数第一个参数一定是索引号 可以自己指定索引号号名称 // console.log(index); // console.log(i); // 回调函数第二个参数一定是 dom元素对象 也是自己命名 // console.log(domEle); // domEle.css(color); dom对象没有css方法 $(domEle).css(color, arr[i]); sum parseInt($(domEle).text()); }) console.log(sum); // 2. $.each() 方法遍历元素 主要用于遍历数据处理数据 // $.each($(div), function(i, ele) { // console.log(i); // console.log(ele); // }); // $.each(arr, function(i, ele) { // console.log(i); // console.log(ele); // }) $.each({ name: andy, age: 18 }, function(i, ele) { console.log(i); // 输出的是 name age 属性名 console.log(ele); // 输出的是 andy 18 属性值 }) }) /script /bodybody ul li原先的li/li /ul div classtest我是原先的div/div script $(function () { // 1. 创建元素 var li $(li我是后来创建的li/li); // 2. 添加元素 // (1) 内部添加 // $(ul).append(li); 内部添加并且放到内容的最后面 $(ul).prepend(li); // 内部添加并且放到内容的最前面 // (2) 外部添加 var div $(div我是后妈生的/div); // $(.test).after(div); $(.test).before(div); // 3. 删除元素 $(ul).remove(); //可以删除匹配的元素 自杀 无ul信息 // $(ul).empty(); // 可以删除匹配的元素里面的子节点 孩子 ul /ul // $(ul).html(); // 可以删除匹配的元素里面的子节点 孩子 ul /ul }) /script /bodyjQuery元素尺寸位置