文档章节

jQuery学习

eatnothing
 eatnothing
发布于 2016/05/13 15:42
字数 1655
阅读 42
收藏 4

jQuery

jquery.js->完整无压缩版

jquery.min.js->经过工具压缩或服务器开启gzip压缩,主要用于产品和项目

编写简单的jQuery代码

在jQuery库中,$就是jQuery的一个简写形式,例如$("#foo")jQuery("#foo")是等价的。$.ajaxjQuery.ajax是等价的,如果没有特别说明,程序中的$都输jQuery的一个简写形式。


		//这段代码类似于传统的window.onload方法
        $(document).ready(function(){
           alert("hello world");
        });

实现一个导航栏

        $(document).ready(function () {
            $(".level1 > a").click(function(){
            //当鼠标点击到a标签(它是class含有level1的子元素)给其加一个名为current的class,然后将紧邻其后面的元素显示出来,同时将它的父辈的同辈元素<a>都去掉一个名为current的class
                $(this).addClass("current")
                        .next().show()
                        .parent().siblings()
                        .children("a")
                        .removeClass("current")
                        .next().hide();
                return false;
            });
        });

DOM对象(Document Object Model,文档对象模型)

jQuery对象就是通过jQuery包装DOM对象后产生的对象,jQuery对象无法使用DOM对象的任何方法,DOM对象也不能使用jQuery里的方法。

jQuery对象转成DOM对象

jQuery提供了两种方法将一个jQuery对象转换成DOM对象既[index]和get(index).

var $cr = $("#cr");
var cr = $cr[0];

var $cr = $("#cr");
var cr = $cr.get(0);

DOM对象转成jQuery对象
var cr = document.getElementById("cr");
var $cr = $(cr);

jQuery选择器

实现列表下拉效果

    <script>
        $(document).ready(function(){
          var $category = $("ul li:gt(5):not(:last)");
            //获取ul元素下索引大于5的li元素的集合元素,然后去掉集合的最后一个元素,并隐藏
            $category.hide();
            //获取按钮
            var $toggleBtn  = $("div.showmore > a");
            $toggleBtn.click(function(){
                //如果是可见的则隐藏
                if($category.is(":visible")){
                   $category.hide();
                    $(this).find('span').css("background","red").text("fuckitup");
                }else{
                    //如果不可见则显示
                    $category.show();
                    $(this).find('span').css("background","red").text("收起来");
                    $('ul li').filter(":contains('放假')").addClass("promoted");
                }
              return false;
            });
        });

    </script>

jQuery选择器

基本选择器:Jquery最常用的选择器,它通过元素的ID,CLASS和标签名来查找DOM元素(每个ID名称只可以使用一次,class允许重复使用)

根据ID匹配一个元素 : $("#id")
根据类名来匹配元素:   $(".id")
根据标签来匹配元素:   $("p")
匹配所有元素:        $("*")
  • 层次选择器:通过DOM元素之间的层次关系来获取特定的元素
$("div span") 获取div里面所有的span元素
$("div > span")选取div下元素名是span的子元素
$(".one + div")选取class为one的下一个div同辈元素,可用$(".one").next("div")替代
$("#two ~ div")选取id为two的元素后面所有div同辈元素
可用$("#two").nextAll("div")来替代
  • 过滤选择器:通过过滤定则来筛选出所需的DOM元素,选择器都以一个冒号(:)开头
$("div:first")选取所有DIV元素的第一个DIV元素
$("div:last")选取所有的DIV元素的最后后一个DIV元素
等
......
  • 内容过滤选择器
$("div:contains('我')")选取文本含有我的元素
$("div:has(p)"):选取含有<p>的元素的DIV元素

如果选择器含有特殊字符需要转义使用

jQuery的DOM操作
  • 查找元素节点:使用jQuery选择器
  • 查找属性节点:利用jQuery找到需要的元素后,就可以使用attr()方法来获取它的各种属性值
  • 创建节点:使用jQuery的append()等方法来创建节点
append():向每个匹配的元素内部追加内容
appendTo():将匹配的元素追加到指定的元素中
prepend():向每个匹配的元素内部前置内容
prependTo():同~
等....
  • 删除节点:jQuery提供了三种删除节点的方法remove(),detach(),empty()
  • 包裹节点:如需要将某个标签包裹起来,jQuery()提供了wrap(),wrapAll()来包裹相应的节点
  • 属性操作:
使用addClass()向标签来追加一个类,
使用removeClass()从标签删除掉一个类
html()用来读取某个元素的html内容
text()用来读取某个元素的文本内容
val()用来设置和获取元素的值
  • 遍历节点
children():用于取得匹配元素的子元素的集合
next():匹配元素后面紧邻的同辈元素
prev():匹配元素前面紧邻的同辈元素
siblings():用去匹配元素前后所有的同辈元素
jQuery中的事件和动画

加载DOM:window.onload方法是在网页中所有元素完全加载到浏览器之后才执行,$(document).ready()方法,在DOM就绪的时候就可以被调用。

$(function(){

});

$(document)也可以使用简写为$().当$()不带参数的时候,默认参数就是document因此可以简写为
$().ready(function(){

})

事件绑定:jQuery可以使用bind()方法来对匹配元素进行特定事务的绑定,bind(type,[,data],fn)第一个参数为事件类型eg:click,focus;第二个参数为可选参数;第三个参数用来绑定处理函数

jQuery合成事件:hover():模拟光标悬停事件,toggle()用于模拟鼠标连续单机事件

事件冒泡:事件会按照DOM层次结构像水泡一样不断向上至顶端

$('element').bind('click',function(event){

	event.stopPropagation();//停止冒泡
})

阻止默认行为:jQuery中提供了preventDefault()方法来组织元素的默认行为,如果同时对事件停止冒泡和默认行为,可以在事件处理返回false; 对于只需要出发一次,随后就要接触绑定的情况,jQuery提供了一种简写one()方法,当处理函数出发一次之后,立即被删除。

jQuery的动画:

$('element').show(1000),show()方法和hide()方法在不带任何参数的情况下相当于css("display","none/block/inline");
当使用show()或者hide()方法可以为其指定一个速度

fadeIn(),fadeOut()方法改变元素的不透明度
自定义动画:animate()
jQuery对表单的操作

对checkbox的操作 全选/全不选


 $("#checkNo").click(function(){ 
 $('[name=items]:checkbox').
 attr('checked',false);
            });

            $("#checkRev").click(function(){
               $('[name=items]:checkbox').
           each(function(){
                  this.checked!=this.checked;
               });

            });
            $("#send").click(function () {
                var str="";
              $('[name=items]:checkbox:checked')
                .each(function(){
                   str += $(this).val();
                });
                alert(str);
            })

....很多不详细列举

jQuery和Ajax的应用

Ajax的核心是XMLHttpRequest对象,发送异步请求,接受相应和执行回调都是通过它来完成。

jQuery中 $.ajax()是属于最底层的方法,第二层是$.load(),$.get(),$.post()第三层是$.getScript()和$.getJson()方法。

load方法的传递方法根据data参数指定,如果没有参数那么采用GET传递,反之,则会自动转换为POST方式,load()方法主要用来获取静态文件,如需要传递一些参数那么使用$.get(),$.post()方法

via:<<锋利的jQuery>>

© 著作权归作者所有

共有 人打赏支持
eatnothing
粉丝 36
博文 128
码字总数 68736
作品 0
昌平
程序员

暂无文章

多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
0
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0
redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
今天
2
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
今天
3
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部