第五章jQuery

DOM文档加载的步骤

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
DOM树构建完成。
加载图片等外部文件。
页面加载完毕。

执行时间不同

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个

$(document).ready()可以同时编写多个，并且都可以得到执行

简化写法不同

window.onload没有简化写法

$(document).ready(function(){})可以简写成$(function(){});

基础选择器

　　　　1.id选择器

         console.log($('#brother'));

         $('#brother').css('color','red');

//2.标签选择器

         //设置一个值
//       $('a').css('color','yellow')
//          设置多个值 设置多个值得时候使用对象存储 key:value
         $('a').css({'color':'yellow','font-size':'24px'});

         //3.类选择器

         $('.li3').css('background','green');

         //4.通配符选择器 * 使用不是很频繁

         console.log($('*'));
         //清空整个界面的dom元素
         $('*').html('');

//1.后代选择器  div p

$('#box p').css('color','red');

//2.子代选择器  div > p

$('#box>p').css('color','yellow')

//3.毗邻选择器 匹配素所有紧接着选中元素的兄弟 +
$('#father+p').css('font-size','30px');

//4.兄弟选择器 ~
$('#father~p').css('background','blueviolet');

console.log($('li'));

//5.获取第一个元素
$('li:first').css('font-size','50px');

//6.获取最后一个元素

$('li:last').css('font-size','50px');

$('li:eq(3)').css('font-size','50px');

基本过滤选择器：

//获取第一个 :first ,获取最后一个 :last

//奇数
$('li:odd').css('color','red');
//偶数
$('li:even').css('color','yellow');

//选中索引值为1的元素 *
$('li:eq(1)').css('font-size','100px');

//大于索引值1
$('li:gt(1)').css('font-size','50px');

//小于索引值1
$('li:lt(1)').css('font-size','12px');

属性选择器：

标签名[属性名] 查找所有含有id属性的该标签名的元素
         $('li[id]').css('color','red');

         //匹配给定的属性是what值得元素
         $('li[class=what]').css('font-size','30px');
         //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素
         $('li[class!=what]').css('font-size','50px');

//       匹配给定的属性是以某些值开始的元素
         $('input[name^=username]').css('background','gray');
         //匹配给定的属性是以某些值结尾的元素
         $('input[name$=222]').css('background','greenyellow');

         //匹配给定的属性是以包含某些值的元素
         $('button[class*=btn]').css('background','red')

jquery和DOM之间的转换：

//dom==>jquery对象

      var oDiv = document.getElementById('box');
      console.log($(oDiv));

      $(oDiv).click(function(){
//       alert(111);
      })

      //第一种方式 jquery ===>DOM对象
      console.log($('button')[0]);

      //第二种方式
      console.log($('button').get(0));
      var isShow = true;

      $('button').get(0).onclick = function(){
//       alert(222);

 show和hide方法

/*
      $('#btn').click(function(){
         if(isShow){
            $('#box').show('slow',function(){
//             alert(111);

               $(this).text('盒子出来了');

               isShow = false;
               $('#btn').text('显示');
            })
         }else{
            $('#box').hide(2000,function(){
//             alert(111);

               $(this).text(' ');
               isShow = true;
               $('#btn').text('隐藏');

            })
         }
      })
      */

      //toggle 开关 如果元素显示则隐藏 ，反之亦然

      $('#btn').click(function(){
         $('#box').toggle(3000,function(){

            alert(111);
         });
      })

动画效果：

$('#btn').click(function () {
    $('#box').animate({width:'0px',height:'0px'},'fast').animate({width:'300px',height:'300px'})
})


右下角小广告效果：

$(function(){
   $('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
      $(this).fadeOut(1000)
          });
})

属性操作:
attr 是为jquery操作
prop 是为DOM的属性操作

3.addClass() removeClass() 添加类 和删除类，可以通过此方法实时添加和删除标签里的类

$('span').addClass('span2 span3')

$('span').removeClass('span2')
var isBig = true;

$('span').click(function(){

   if(isBig){
      $(this).addClass('active');
      isBig = false;
   }else{
      $(this).removeClass('active');
      isBig = true;

   }     

})

4.值属性的操作 text() html() val()

//仅仅是获取文本
console.log($('#box2').text());
//获取的所有，包括<a></a>这些标签
console.log($('#box2').html());

//获取值
console.log($('input').val());
$('input').val('嘿嘿你个大头鬼')

$('#btn').click(function(){
   var val = $('input').val();

   $("#box2").text(val);
})

//表单控件使用的一个方法
$('input').change(function(){
   console.log($(this).val());
})

//追加元素         $('ul').append('<li><a href="#">luffy</a></li>');

         $('ul').append(oLi);
         //如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作
         $('ul').append($('span'));

         //appendTo()

         $('<a href="#">路飞2</a>').appendTo($('ul'));

//       prepend 插入到被选中的元素的第一个位置
         $('ul').prepend('<li>我是第一个元素</li>')
         $('<li>我是第0个元素</li>').prependTo($('ul'))

         //after  before

         $('ul').after('<h3>我是一个三级标题</h3>');

         //insertAfter
         $('<a href="#">第一个</a>').insertAfter($('ul'));

         $('ul').before('<h2>我是一个二级标题</h2>');

         //insertBefore

//复制操作 clone()

         $('button').click(function(){

            //副本具有与真身一样的事件处理能力 完全克隆
            $(this).clone(true).insertAfter($(this));

         })

//替换 

//       $('h3').replaceWith('<button>替换的按钮</button>');

//       $('<a href="#">替换超链接</a>').replaceAll('button');

//删除
         //empty() 只是清空了被选的内容

//       $('ul').empty();

//       remove() 被选元素 也被删掉了 事件就没有 什么都没有

//       $('ul').remove();

         //detach()  移除匹配的节点元素  删除节点后 事件会保留

         var $btn = $('button').detach();   
         console.log($btn[0]);

         $('ul').append($btn[0]);

//1.获取匹配元素的相对父元素的偏移 position

         
         console.log($('p').position().left);
         console.log($('p').position().top);

         var offsetTop = $('p').position().top + 50 + 'px';

         $('#btn').click(function(){
            $('p').animate({top:offsetTop},1000);
         })

//2.获取匹配元素 相对滚动条卷起的位置信息  scrollTop scrollLeft

//       console.log($(document).scrollLeft());
//       console.log($(document).scrollTop());

         $(document).scroll(function(){
            console.log($(document).scrollLeft());
            console.log($(document).scrollTop());
         })

// offset  获取匹配元素在当前视口的相对偏移 相对于浏览器,包含了padding内充距离

         console.log($('#box').offset());
         console.log($('p').offset().top);
         console.log($('p').offset().left);
         console.log($('#btn').offset().top);

//获取元素的宽高

         console.log("宽"+$('#box').width());
         console.log("高"+$('#box').height());

//设置宽高
         $('#box').width(400);

         //innerWidth / outerWidth

淘宝导航栏

$(function () {
    var h = $('.top').height();
        $(document).scroll(function () {
            var scrollTop = $(document).scrollTop();
            if (h<scrollTop){
                $('.nav').css({'display':'block','position':'fixed','top':0})
            }else{
                $('.nav').css('display','none')
            }
        })
})

siblings筛选:筛选给定的同类同胞元素

$(function () {
    $('li').hover(function () {
        console.log('123');
        // $(this).css({'color':'red','font-size':'20px'}).siblings('li').css({'color':'black','font-size':'12px'});
        $(this).addClass('active').siblings('li').removeClass('active');
    })
})


时间流：

“DOM2级事件”规定的事件流包括三个阶段：

① 事件捕获阶段；

② 处于目标阶段；

③ 事件冒泡阶段

阻止事件冒泡：

//1.阻止事件冒泡
ev.stopPropagation();

阻止默认事件
ev.preventDefault();
ev.stopPropagation();

     
事件的绑定和移除：

绑定：
function add(){
   console.log('click');
}

function add2(){
   console.log('over');
}

$('#box').bind({
   "click":add,
   "mouseover":add2
})

//添加的事件不能发生在未来==》动态生成的元素不能直接添加对象 里面的事件不能发生了  ==>事件代理

事件代理：

//事件代理 自己完成不了当前的点击事件，交给父级元素来做这件事件
//父级.on('事件名字'，'点击当前的标签元素'，fn)
     $('ul').on('click','li',function () {
         alert('新来的');
     })

     $('ul').append('<li>我是新来的</li>');

自定义事件：trigger

$('button').bind('myClick',function(ev,a,b,c){
   alert(111);       
   alert(a);
   alert(b);
})

//触发自定义的事件
$('button').trigger('myClick',[1,2,3])

鼠标事件：

$("#box").click(function(){
   console.log('click')
})

//双击事件
$("#box").dblclick(function(){
   console.log('dbclick')
})
*/
/*
//鼠标按下不松开
$("#box").mousedown(function(){
   console.log('mousedown');
})

//鼠标松开
$("#box").mouseup(function(){
   console.log('mouseup');
})
*/

被选元素和子元素被选中时 会触发函数  移入和移出
         /*
         $('#box').mouseover(function(){
            console.log('mouseover');
         })
         $('#box').mouseout(function(){
            console.log('mouseout');
         })
         */

         /*
         //只有被选元素移入的时候 才会触发
         $('#box').mouseenter(function(){
            console.log('mouseenter');
         })
         $('#box').mouseleave(function(){
            console.log('mouseleave');
         })
         */

/*获取焦点
         $('input[type=text]').focus(function(){
            console.log($(this).val())
         })

/*失去焦点         
         $('input[type=text]').blur(function(){
            console.log($(this).val())
         })
         */

键盘按下：
         $('input[type=password]').keydown(function(e){
            console.log(e.keyCode);

            if(e.keyCode == 13){
               console.log('enter被按下了')
            }

//          console.log($(this).val())
         })
键盘松开
         $('input[type=password]').keyup(function(){
            console.log($(this).val())
         })

表单事件：

 $(function() {

              //change()s事件

              //此事件仅限于input元素  textarea select
            $('select').change(function(){
                  console.log($('select option:selected').text());

            $('.show').text($('select option:selected').text());

            })

//          select()  仅限于用在 input type=text  textarea
         $('#other').select(function(){
            console.log($(this).val());
         })

         $('form').submit(function(e){
//          
            //阻止默认事件
            e.preventDefault();

            //跟服务端有很大挂钩  下节课 咱们简单的来玩一下ajax技术

            alert(1111);
         })

ajax：

//get请求
         $.ajax({
            url:'./data.json',
            type:'get',
//          dataType:'json',
            success:function(data){

               console.log(data);

            },
            error:function(){

            }
         })
         */

         /*
         //注意：post请求无法演示 马上学django 就可以演示了
         $.ajax({
            url:"/course",
            type:'post',
            data:{
               username:'zhangsan',
               password:'123'
            },
            success:function(data){

               if(data.state == 'ok'&& data.status =='200'){
                  //登录成功
               }

            },
            error:function(err){
               console.log(err);
            }
         })
         */

第五章jQuery的更多相关文章

jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
第五章 jQuery中的动画
通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法该方法的功能与css()方法设置display属性效果相同. 给show( ...
jquery 第五章 jQuery操作表单与表格
1.回顾对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false, event stopProapagation() 模拟事件 ...
第五章、前端之JQuery
目录第五章.前端之JQuery 一.选择器二.基本筛选器三.样式操作四.位置操作五.文本操作六.属性操作七.文档处理八.事件九.动画效果十.补充第五章.前端之JQuery 一.选 ...
读《编写可维护的JavaScript》第五章总结
第五章 UI层的松耦合 5.1 什么是松耦合在Web开发中,用户界面是由三个彼此隔离又相互作用的层定义的: HTML是用来定义页面的数据和语义 CSS用来给页面添加样式 JavaScript用来给页 ...
第7章 jQuery插件的使用和写法
第7章 jQuery插件的使用和写法插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...
《Introduction to Tornado》中文翻译计划——第五章：异步Web服务
http://www.pythoner.com/294.html 本文为<Introduction to Tornado>中文翻译,将在https://github.com/alioth3 ...
第五章SignalR的实时高频通讯
第五章SignalR的实时高频通讯概述:本例子演示了如果创建一个对象与其他浏览器共享实时状态的应用程序.我们要创建的应用程序为“MoveShape”,该MoveShape页面会显示一个Html Di ...
Knockout应用开发指南第五章：创建自定义绑定
原文:Knockout应用开发指南第五章:创建自定义绑定创建自定义绑定你可以创建自己的自定义绑定 – 没有必要非要使用内嵌的绑定(像click,value等).你可以你封装复杂的逻辑或行为,自定 ...

随机推荐

vue 特点
1.双向绑定 v-model 2.组件化页面扩展单文件组件 js css html 都在一个文件中好处:前端组件化的突破性设计 scoped限制css的渲染,防止污染 lang 定义预处理器 ...
php实现遍历目录
用递归方法实现目录的遍历: <?php header("Content-type: text/html; charset=utf-8"); date_default_time ...
运行go服务器后台挂起(不看调试信息)
cd程序目录,shell输入go run+项目,接着键盘组合输入CTRL+Z,后台挂起进程. 要结束服务器,则输入fg,查看被挂起的go服务器进程,接着键盘组合输入CTRL+C,中断服务器进程. 此外 ...
Android四大组件之Service --- 活动与服务的绑定
Acticity与Service进行通信如何在活动中指挥service去做事情? 这里就借助onBind()方法了比如说,目前我们希望在MyService里提供一个下载功能,然后在活动中可以决定何时开 ...
C# 向程序新建的窗体中添加控件，控件需要先实例化，然后用controls.add添加到新的窗体中去
C# 向程序新建的窗体中添加控件,控件需要先实例化,然后用controls.add添加到新的窗体中去 Form settingForm = new Form(); setForm deviceSet ...
JDBC原理
JDBC原理 JDBC是什么: Java Database Connectivity:Java访问数据库的解决方案 JDBC是Java应用程序访问数据库的里程碑式解决方案.Java研发者希望用相同 ...
.NET复习笔记-泛型
1.yield关键字用于返回迭代器具体的值,如下框代码所示 /// 返回0~9整数集合 public static IEnumerable<int> yieldSampleMethod() ...
WEB学习笔记13-高可读性的HTML之精简HTML代码/过时的块状元素和行内元素
<a id="more-intro">点击此处 <img src="down-arrow.png" /></a> (1)删除 ...
mysql新增用户并开启远程连接
之前使用mysql一直使用root来连接登录数据库,现在想使用新的用户名来连接数据库,碰到数据连接不上的情况. 把这些记录下来,以备后用 1.首先,创建用户 CREATE USER 'xiazhenx ...
C# Winform 国际化
1.在Form的language属性选择中文,来制作中文界面保存后,设置界面标题会变成如下所示,并且会出现一个zh-CN的资源文件,打开resx文件可看到相应内容 2.将Form的language属 ...