jQuery基本操作

jQuery简介

　　jQuery是一个兼容多浏览器的javascript库，极大地简化了 JavaScript 编程,核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

jQuery 库特性：

1、选择器

<div class="dd"></div>
<div id="demo">
    <p>Hello Word</p>
</div>

基本选择器

　　1、id选择器

$("#demo") 　　//选取 id="demo" 的元素

　　2、标签选择器

$("p") 　　　　　//选取所有 <p> 元素

　　3、class选择器

$(".dd") 　　 　  //选取所有 class="dd" 的元素

　　4、*

$("*")　　　　　 //匹配所有元素

其他

$(".dd,#demo,p")     //匹配多个元素
 
$("#demo p")　 //匹配id="demo" 下的 p 元素

基本筛选器

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

$("li:first")　　　//获取第一个元素
$("li:last ")　     //获取最后一个元素
 
$("li:eq(1)")　　//获取索引值为1的元素　　
$("li:gt(1)")       //获取大于该索引的元素
$("li:lt(1)")        //获取大于该索引的元素
 
$("li:even")　　//匹配所有索引值为偶数的元素，从 0 开始计数
$("li:odd　")     //匹配奇数

属性

　　1、[attribute]

　　　　$("div[id]");　　查找所有含有id属性的div元素

　　2、[attribute=value]

<input type="checkbox" name="checkname" value="name1" />
<input type="checkbox" name="checkname" value="name2" />
<input type="checkbox" name="demo" value="name3" />

　　　　$("input[name='checkname']");　　查找所有 name 属性是 checkname 的 input 元素

　　3、[attribute!=value]　　不等于

　　4、[attribute^=value]　　

　　　　　　$("input[name^='news']")　　　　查找所有 name 以 'news' 开始的 input 元素

　　　　[attribute$=value]　　　　以什么结尾

　　　　[attribute*=value]　　　　包含某些值

表单

　　1、$(":input")　　查找所有input标签

　　2、$(":text")　　查找所有input下type=text的标签（等于$("input[type='text']") ）

　　:password　　:radio　　:checkbox　　:submit　　:image　　:reset　　:button　　:file　　同上

2、筛选（过滤、查找）

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

过滤（常用）：　

　　1、$("li").first()　　　　　获取第一个元素

　　2、$("li").last()　　　　　　获取最后一个元素

　　3、$("li").eq(1)　　　　　　根据索引获取

　　4、$(this).hasClass("demo") 查看是否有class=demo的元素，返回true或false

　　5、map（callback）

<script>
    //map会循环多个标签中的每一个标签，每一个标签被循环时都会执行map内部的函数并获取返回值，
    //并将所有返回值封装到一个数组中返回
    var list=$("li").siblings().map(function(){
 
        return $(this).text();//this这里就是当前循环标签
    });
</script>

查找（常用）：

　　1、children()

　　　　$("div").children()　　　　查找DIV中的每个子元素

　　2、find()

　　　　$("p").find("span")　　　　从p下面的所有元素中去找span标签

　　3、next()　　　　　　　　　　下一个元素

　　4、nextAll()　　　　　　　　　　当前元素之后的所有同级别元素

　　5、nextUntil()　　　　　　　　查找什么之后直到什么之前的元素

　　　　$("#term-1").nextUntil("#term-2").css("color", "green");　　给#term-1后面直到"#term-2前的元素加上红色背景

<dl>
    <dt id="term-1">term 1</dt>
    <dd>definition 1-a</dd>
    <dd>definition 1-b</dd>
    <dd>definition 1-c</dd>
 
    <dt id="term-2">term 2</dt>
    <dd>definition 2-a</dd>
    <dd>definition 2-b</dd>
</dl>

　　6、prev()、prevall()、prevUntil()　　往上找、类似next

　　7、parent()　　查找父元素　　parents() 　　查找所有祖先　　parentsUntil()　　一直找祖先，直到找到规定元素为止

　　8、siblings()　　　　查找所有兄弟姐妹的元素

3、属性

css

addClass()　　　　　　　　//为每个匹配的元素添加类名
 
removeClass()　　　　　　//为每个匹配的元素删除指定类
 
toggleClass()　　　　　　 //如果存在就删除这个类，不存在就添加这个类

HTML代码/文本/值

　　html()

$('p').html();　　　　//获取p元素的内容
 
$("p").html("Hello <b>world</b>!");　　//设置p元素的内容

　　text()

$('p').text();　　　　//获取p元素的文本内容（只获取文本）
 
$("p").text("Hello world!");　　//设置p元素的文本内容

　　val()　

$("input").val();　　//获取文本框中的值
 
$("input").val("hello world!");　　//设置文本框中的值

属性

　　attr()　　　　设置或返回被选元素的属性值。

$("img").attr("src");    //获取所有图像的src属性值。
$("img").attr("src","test.jpg");    //设置属性

　　removeAttr(name)　　删除一个属性

$("img").removeAttr("src");    //删除src属性

　　prop()

$("input[type='checkbox']").prop("checked");    //选中复选框为true，没选中为false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input type="button" value="全选" onclick="CheckAll()">
        <input type="button" value="反选" onclick="CheckReverse()">
        <input type="button" value="取消全选" onclick="CheckCancel()">
    </div>
 
    <div id='checklist'>
        <input type='checkbox' value='1'/>选择一
        <input type='checkbox' value='2'/>选择二
        <input type='checkbox' value='3'/>选择三
    </div>
<script src="jquery-2.2.3.js"></script>
<script>
    function CheckAll(){
            //$("#checklist").find(":checkbox").attr("checked","checked");
            $("#checklist").find(":checkbox").prop("checked",true);
        }
        function CheckReverse(){
            $("#checklist").find(":checkbox").each(function(){
                if ($(this).prop("checked")){
                    $(this).prop("checked",false);
                }else {
                    $(this).prop("checked",true);
                }
            })
        }
        function CheckCancel(){
            //$("#checklist").find(":checkbox").removeAttr("checked");
            $("#checklist").find(":checkbox").prop("checked",false);
        }
</script>
</body>
</html>

多选反选实例

4、CSS

CSS　

　　css()　　　　访问匹配元素的样式属性。

$("p").css("color");    //获取
$("p").css("color","red");    //设置
$("p").css({ "color": "red", "background": "blue" }); //支持字典设置

位置

　　offset()　　获取匹配元素在当前视口的相对偏移。

<p>Hello</p>
<p>Hello Word</p>

var obj=$("p:eq(1)");
var obj_top = obj.offset().top;
var obj_left = obj.offset().left;
console.log(obj_top,obj_left)

　　position()　　获取匹配元素相对父元素的偏移

　　scrollTop()　　获取匹配元素相对滚动条顶部的偏移

$(window).scrollTop(0);    //设置为0,返回顶部

　　scrollLeft()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .back{
            position: fixed;
            bottom: 0px;
            right: 0px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
 
<div style="height: 2000px;"></div>
<div onclick="GoTop()" class="back hide">返回顶部</div>
 
<script src="jquery-2.2.3.js"></script>
<script type="text/javascript">
 
    function GoTop(){
        //返回顶部
        $(window).scrollTop(0);
    }
 
    $(function(){
        $(window).scroll(function(){
            //当滚动滑轮时，执行函数体
 
            //获取当前滑轮滚动的高度
            var top = $(window).scrollTop();
 
            if(top>100){
                //展示“返回顶部”
                $('.back').removeClass('hide');
            }else{
                //隐藏“返回顶部”
                $('.back').addClass('hide');
            }
        });
    });
</script>
 
</body>
</html>

返回顶部实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .float_left{
            float: left;
        }
        .leftdiv{
            position:fixed;
            width: 300px;
            height:100px;left:0px;top:0px;
        }
        .rightdiv{
            margin-left: 300px;
        }
        .color{
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="skip" class="float_left leftdiv">
        <p>第一章</p>
        <p>第二章</p>
        <p>第三章</p>
    </div>
 
    <div class="float_left rightdiv">
        <div class="chap" style="height: 500px">
            <h1>第一章</h1>
        </div>
         <div class="chap" style="height: 1000px">
            <h1>第二章</h1>
        </div>
        <div class="chap" style="height: 50px">
            <h1>第三章</h1>
        </div>
    </div>
 
    <script src="jquery-2.2.3.js"></script>
    <script>
        $(function(){
            $(window).scroll(function(){
                var scroll_top = $(window).scrollTop();//滚动的长度
                var li = [];
                $.each($(".chap"),function(i){
                    var current_height=$($(".chap")[i]).offset().top;//把所有章节的高度放入列表
                    li.push(current_height);
                });
                $.each(li,function(i){
                    if(scroll_top+$(window).height() == $(document).height()){  //如果滚动到底部
                            $($("#skip").children().last()).addClass("color");
                            $($($("#skip").children().last()).siblings()).removeClass("color");
                        }
                    if(scroll_top>li[i]){
                        $($("#skip").children().eq(i)).addClass("color");
                        $($($("#skip").children().eq(i)).siblings()).removeClass("color");
                    }
                })
            })
        })
    </script>
 
</body>
</html>

滚动条实例

尺寸

height()        //元素当前的高度
innerHeight()        //元素内部区域高度
outerHeight()        //元素外部区域高度
 
width()        //元素当前的宽度
innerWidth()        //元素内部区域宽度
outerWidth()        //元素外部区域宽度

5、文档处理

内部插入

　　append()　　　　像匹配元素内部结尾处插入内容

　　appendTo()　　　　把所有匹配的元素追加到另一个指定的元素的元素集合中。

$("#aa").prependTo("#foo");　　//把#aa匹配的元素前置到#foo匹配的标签中

　　prepend()　　　　像匹配元素内部开始处插入内容

　　prependTo()　　　把所有匹配的元素前置到另一个指定的元素的元素集合中。

外部插入

　　after()　　　　　　在每个匹配元素之后插入内容

　　before()　　　　　在每个匹配元素之前插入内容

　　insertAfter()　　　把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

　　insertBefore() 　　把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

包裹

　　wrap()　　　　　　把所有匹配的元素用其他元素的结构化标记包裹起来。

//把所有p标签用一个新创建的div包裹起来
$("p").wrap("<div class='wrap'></div>");
 
//用ID是"content"的div将每一个段落包裹起来
$("p").wrap($("#content");

　　unwrap()　　　　移出元素的父元素。这能快速取消 .wrap()方法的效果

替换

　　replaceWith()　　将所有匹配的元素替换成指定的HTML或DOM元素。

//把所有p标签换成指定div
$("p").replaceWith("<div>111</div>");

　　replaceAll(selector)

//把所有p标签替换成指定的div
$("<div>111</div>").replaceAll("p");

删除

　　empty()　　　　删除匹配的元素集合中所有的子元素

　　remove()　　　　删除匹配的元素

复制

　　clone()　　　　　复制并且选中这些克隆的副本

//复制id=demo的元素并前置到所有段落中
$("#demo").clone().prependTo("p");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="search">
        <div class="condition">
            <a onclick="AddCondition(this,'#search')"> + </a>
            <input />
        </div>
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function AddCondition(ths,search){
            //复制condition所在div
            var cop=$(ths).parent().clone();
            //修改复制标签的内容
            cop.children(':first').text('-').attr("onclick","RemoveCondition(this,'#search')");
            //添加标签
            cop.appendTo("#search")
        }
        function RemoveCondition(ths,search){
            //移除标签
            $(ths).parent().remove();
        }
 
    </script>
</body>
</html>

添加删除标签实例

6、事件

ready()　　　　在DOM加载完成时绑定一个要执行的函数。

$(document).ready(function(){
  // 执行代码
});
 
//或
 
$(function(){
  // 执行代码
});

bind()　　为每个匹配元素的特定事件绑定事件处理函数。

$("p").bind("click", function(){
  alert( $(this).text() );
});
//或
$("p").click（function(){
  alert( $(this).text() );
});

unbind()　　移除bind事件

var foo = function () {
  // 处理某个事件的代码
};
 
$("p").bind("click", foo); // 当点击段落的时候触发 foo 
 
$("p").unbind("click", foo); //再也不会触发 foo

delegate()　　事件适用于处理程序当前或未来的元素（比如由脚本创建的新元素）。

　　　　和bind区别：bind是绑定了在执行，delegate是要执行时在去绑定

undelegate()　　移除

one()　　为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

$("p").one("click", function(){
  alert( $(this).text() );
});

具体事件相关：http://www.php100.com/manual/jquery/

7、ajax

普通本域ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input id="n1" name="name" />
    <input type="button" value="提交" onclick="SubmitData();"/>
 
    <script src="jquery-2.2.3.js"></script>
    <script>
        function SubmitData(){
            // 获取值
            var inpVal = $('#n1').val();
            var inpName = $('#n1').attr('name');
 
            $.ajax({
                url: "http://127.0.0.1:8000/index/",
                data: {'kk': 123, inpName: inpVal},
                type: 'POST',
                success: function(arg){
                    // 当请求执行完成之后，自动调用
                    // arg:服务器返回的数据
                    console.log(arg);
                },
                error: function(){
                    // 当请求错误之后，自动调用
                }
            })
        }
    </script>
</body>
</html>

跨域ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="获取节目" onclick="SubmitData();"/>
    <div id="container">
    </div>
    <script src="jquery-2.2.3.js"></script>
    <script>
        function SubmitData(){
            // 获取值
            $.ajax({
                url: "",//
                data: {},
                type: 'GET',
                dataType: 'jsonp',//发送格式
                //callback和list相当于指定要发送的key和value，之后callback用来获取封装在list中的数据
                jsonp: 'callback',
                jsonpCallback: 'list',
                success: function(arg){
                    console.log(arg);
                    // arg,服务器返回的数据
                },
                error: function(){
                    // 当请求错误之后，自动调用
                }
            })
        }
    </script>
</body>
</html>

ajax_jsonp

比如后端返回的数据格式：return HttpResponse("list("+json.dumps({"aa":11})+")")

更多ajax相关：点击

8、扩展方法

jQuery.extend(object)　　　　扩展jQuery对象本身，在jQuery命名空间上增加新函数

增加函数

//自定义一个方法aaa
$.extend({
    "aaa":function(){
        return 123456;
    }
});
var result= $.aaa();
console.log(result);

自执行函数写法

(function(jQuery){
    jQuery.extend({
        "aaa":function(arg){
            return arg;
        }
    })
})(jQuery);
console.log($.aaa("Hello"));

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
<script type="text/javascript" src="jquery-2.2.3.js"></script>
<script>
    $(function(){
        // 页面加载完成之后自动执行
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        }).mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            // 原始鼠标横纵坐标位置
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;
 
            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;
 
            $(this).bind('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;
 
                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);
 
                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');
 
            })
        }).mouseup(function(){
            $(this).unbind('mousemove');
        });
    })
</script>
 
</body>
</html>

拖动面板实例

图片轮播：http://bxslider.com

更多图标：http://fontawesome.io

更多相关：http://www.php100.com/manual/jquery/

jQuery基本操作的更多相关文章

跟随屏幕滚动层、遮罩层、获取Div相对定位、整个屏幕、html文档的jquery基本操作
一.层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:absolute; left ...
jquery基本操作笔记
来源于:http://www.cnblogs.com/webcome/p/5484005.html jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('backgr ...
jQuery基本操作以及与js的一些比较
jQuery和js主要区别在DOM操作用jQuery必须先引进jQuery.js文件 js和jQuery写在哪: 1.标签里面常用就是方法调用 2.写在script标签里面 3.js文件 dom操 ...
<day005>jQuery事件、文档基本操作 + 点赞事件
任务1: jQuery的基本操作 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta cha ...
jQuery基本知识
jquery基本操作笔记 jq和js 可以共存,不能混用: 1 2 3 4 5 6 $('.box').css('background','red'); $(".box").c ...
Jquery Table 的基本操作
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个表格Table: table { border-collapse: ...
（17）什么是jQuery（jq的流程和基本操作）
jQuery就是对原生js二次封装的工具类(在jq叫构造函数) jQuery就是一堆方法的集合,jq对象就可以直接调用这些方法来完成指定的需求使用jq的流程: 1.在HTML页面倒入jq.js文件 ...
jquery 的一些基本操作
日常使用中的操作记录,持续更新中: ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...
Jquery EasyUI的添加，修改，删除，查询等基本操作介绍
http://www.jb51.net/article/42016.htm 初识Jquery EasyUI看了一些博主用其开发出来的项目,页面很炫,感觉功能挺强大,效果也挺不错,最近一直想系统学习一套 ...

随机推荐

双十二前夕爆京东12G数据泄露的真相是什么
今天早上手机上推送出京东12g数据泄漏的消息,随即搜了下网上的相关新闻,感觉舆论又一次的干了一件惊天地的事情,到底京东的哪所谓的12G的用户信息数据有没有泄漏?舆论为什么齐刷刷的在12月11日突然间爆 ...
使用git@osc管理现有项目
首先安装git和powershell集成git工具参考 http://www.cnblogs.com/kreo/p/4685988.html 打开windows powershell,进入项目目录, ...
Web存储-Web Storage
/* // 如下是initStorageEvent()方法参数,其中两个参数我默认写成false了,一般都不用改动 initStorageEvent(eventType, false, false, ...
Inventory Costing in AX 2009
I wanted to explore some scenarios that illustrate a few important concepts related to inventory cos ...
鼠绘漫画 for wp8.1
技术规格总结: 这个APP 总体上是下载图片的一个APP 所以对图片的查看&控制上需要一定功力,至少有一个稳定的缩小,放大的图片控件. 搭载WP系统的手机,内存上大部分不是很大,所以内存的控制 ...
oracle or语句的坑
SELECT SUM(tjo.pay_amount) FROM tb_jf_order tjo,tb_jf_gateway_trade_log tjg WHERE tjo.order_id = tjg ...
Java 泛型约束
类型约束: import java.util.List; import java.util.ArrayList; import java.util.LinkedList; /** * Created ...
通过Maven将Web程序部署到远程Tomcat8服务器的一些注意事项
1.环境变量检查(注意一定要做,否则会出现莫名其妙的错误):JAVA_HOMEM2_HOMECATALINA_HOME 2.开发环境检查,在Eclipse开发环境中最好做以下两方面的检查 2.1)Ma ...
fzuoj Problem 2129 子序列个数
http://acm.fzu.edu.cn/problem.php?pid=2129 Problem 2129 子序列个数 Accept: 162 Submit: 491Time Limit: ...
UVALive 7139 Rotation（矩阵前缀和）（2014 Asia Shanghai Regional Contest）
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...

jQuery基本操作

jQuery基本操作的更多相关文章

随机推荐

热门专题