当前位置：逗逗网 > 学习笔记 > 正文

学jQuery看这篇就够了

2017-09-25 分类：学习笔记 阅读(4923) 评论(0)

1.什么是jQuery

jQuery是一个开源的函数库，高度封装了DOM操作、事件、动画、AJAX、工具函数等功能，而且每一个API的底层实现都实现了不同浏览器之间的兼容性，让你专心编写逻辑代码，而不要浪费时间在处理兼容性的问题上。总而言之，jQuery的目标就是让开发者写得更少，做得更多！

2.jQuery选择器

  • *选取所有元素。
  • p选取所有的p标签。
  • #test选取id为test的标签。
  • .test选取所有class为test的标签。
  • :button选取所有type为button的元素。
  • div > p选取div下面的所有子p元素。注意，这个只包括直接子元素。
  • div p选取div下面的所有P元素.
  • eq(index)对一个已经选取后的元素集选取索引值为index的元素。
  • gt(index)对一个已经选取后的元素集选取索引值大于index的元素。
  • lt(index)对一个已经选取后的元素集选取索引值小于index的元素。
  • 只要是CSS中能用的选择器,Jq中都能用.

    runoob:http://www.runoob.com/jquery/jquery-tutorial.htmljquery:http://api.jquery.com/

例子:

  • 选中索引大于2的行标记为蓝色
<html>
<head>
    <meta charset="utf-8" />
    <meta name="Keywords" content=""/>
    <meta name="description" content="" />
    <title>jQuery选择器</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <style>
        .box{
            border:1px solid green;          
        }
    </style>
    <script>
            $(function(){
                $(".list li:gt(2)").css('background',"skyblue"); #:gt(2)表示选择索引值>2的元素
            });
    </script>
</head>
<body>
    <div class="box">
        <ul class="list">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>   
    </div>
</body>
</html>

3.jQuery事件

jquery封装了js中的所有事件，并且针对不同的浏览器做了一些兼容性处理。使用方式是：
$("p").click(function(){
  //动作后要触发执行的代码!
});
常用事件
  • click 事件：点击事件。
  • onload和document.ready 事件：前者是js的DOM中标准的方法，后者是jquery自己创建的一个方法，ready方法是所有文档元素一旦准备好了，就执行回调，而onload方法是页面中所有的元素都加载完毕了才会执行。
  • mouseenter 事件：鼠标移动到某个元素上面的事件。
  • mouseleave 事件：鼠标移出某个元素的事件。
  • hover 事件：鼠标移动到某个元素和鼠标移出到某个元素的事件。相当于mouseenter和mouseleave两个事件的集合。
    实例:
  • 聚焦:当鼠标进入输入框时,背景显示为灰色.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){    #输入框如果被选中
    $(this).css("background-color","#cccccc"); #当前输入框的样式修改背景颜色为灰色!
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">
</body>
</html>

4.jQuery效果

jquery封装了一套动画效果方法，这些方法在js中是不存在的，jquery是通过修改一系列属性和CSS样式并添加过渡事件来达到这种目的的。
  • hide(duration,callback)方法：隐藏某个元素，只是把display属性修改为none，可以提供了一个过渡事件。duration默认的时间是400毫秒.
  • show(duration,callback)方法：显示某个元素，可以提供一个动画。
  • toggle(duration,callback)方法：如果一个元素已经显示了，那么将他隐藏，如果一个元素已经隐藏了，将他显示。
  • fadeIn(speed,callback)：有动画效果的显示一个元素，speed用于指示一个元素持续的时间，callback用于表示执行完这个动画后执行的方法。
  • fadeOut(speed,callback)：把一个元素隐藏，隐藏后从DOM中删除这个元素。
  • fadeTo(speed,opacity,callback)：把一个元素的透明度修改到opacity这个值指的数值。
  • animate({params},speed,callback)：所有动画的最基础的方法。params是一个字典，用于修改要动画的CSS样式，speed表示这个动画持续的时间，callback表示这个动画执行结束后的回调。
例子
  • 通过增加hide参数,实现动画效果
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide(2000,function(){
    $(this).css('background-color','gray');
    });
  });
  $("#show").click(function(){
    $("p").show(3000,function(){
    $(this).css('background-color','yellow');
    });
  });
});
</script>
</head>
<body>
<p style="height:200px;">如果你点击“隐藏” 按钮，我将会消失。</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
</body>
</html>

5.jQueryDOM操作

DOM的全称是Document Object Model（文档对象模型）。是jquery最核心的功能，包括对标签元素的增删改查等
  • 获取和设置内容：text()用于获取和设置元素中的文本内容，html()用户获取和设置元素中的所有子元素及其文本内容，val()用于获取和设置元素的value值。attr()用户获取和设置标签元素的属性。
  • 添加元素：append()在某个元素后面添加子元素。prepend()在某个元素最前面添加子元素。after在某个元素后面添加一个兄弟元素。before在某个元素前面添加一个兄弟元素。
  • 删除元素：remove()方法将选中的元素进行删除，可以增加一个过滤条件进行过滤。empty()方法将选中的所有子元素都清空。
  • 操作CSS：addClass()方法可以向被选中的元素添加一个或多个类，removeClass方法可以向被选中的元素删除一个或多个类，css()方法可以设置或返回css属性。
  • 尺寸：
    • width()/height() ：返回盒子的真实宽度和高度。
    • innerWidth() /innerHeight() ：返回盒子的真实宽度+padding的宽度，高度同理。
    • outerWidth()/outerHeight() ：返回盒子的真实宽度+padding的宽度+边框的宽度，高度同理。
    • outerWidth(true)/outerHeight(true) ：返回盒子的真实宽度+padding的宽度+边框的宽度+外边距的宽度，高度同理。
    例子:
  • 显示标签的内容,设置标签的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
    
$("#btn3").click(function(){
    alert("值为: " + $("#test1").val());
  });
  $("#btn4").click(function(){
    $("#test3").text("Hello world!");
  });
  $("#btn5").click(function(){
    $("#test4").html("<b>Hello world!</b>");
  });
  $("#btn6").click(function(){
    $("#test5").val("RUNOOB");
  });
});
</script>
</head>
<body>
<h2>jQ捕获</h2>
<h3>1.显示对象的text()和html()</h3>
<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<h3>2.显示对象的val()</h3>
<p>名称: <input type="text" id="test1" value="菜鸟教程"></p>
<button id="btn3">显示值</button>
<h2>jQ设置</h2>
<h3>1.设置对象text()</h3>
<p id="test3">这是一个段落。</p>
<h3>2.设置对象html()</h3>
<p id="test4">这是另外一个段落。</p>
<h3>2.设置对象val()</h3>
<p>输入框: <input type="text" id="test5" value="菜鸟教程"></p>
<button id="btn4">设置文本为hello world!</button>
<button id="btn5">设置 HTML 的hello world!</button>
<button id="btn6">设置值为hello world!</button>
</body>
</html>

  • 支持回调函数:

  • 获取attr属性值并修改
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".b1").click(function(){
  alert($("#runoob").attr("href"));
  });
  $(".b2").click(function(){
    $("#runoob").attr("href","http://www.yueguangzu.net");
    $("p a").text("点击进入逗逗网");
  });
});
</script>
</head>
<body>
<p><a href="http://www.baidu.com" id="runoob">点击进入百度</a></p>
<button class="b1">获取 href 值</button>
<button class="b2">修改 href 为逗逗网</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

  • 使用append,prepend,remove添加删除元素
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){ 
  $("#btn1").click(function(){
    $("p").append(" <b>在p标签后面通过append增加的文本.</b>");
  });
​
  $("#btn2").click(function(){
    $("ol").append("<li>这是通过append增加的li</li>");
  });
  $("#btn3").click(function(){
    $("p b").remove();
  });
  $("#btn4").click(function(){
    $("ol li:last()").remove();
  });
  $("#btn5").click(function(){
    $("ol").prepend("<li>这是通过preppend增加的li</li>");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
<button id="btn5">添加列表项到第一个</button>
<button id="btn3">移除文本</button>
<button id="btn4">移除列表项</button>
</body>
</html>

6.jQuery DOM元素遍历

DOM元素遍历可以在DOM树中向上、向下、平行的遍历所有的DOM元素，这在开发中查找相关元素的时候特别有用
  • parent()方法：获得被选中元素的直接父元素。
  • children()方法：获取被选中元素的所有直接子元素，也可以传入参数，进行再次的过滤。
  • find()方法：获取被选中元素的所有子孙元素，可以传入参数进行过滤。
  • siblings()方法：返回所有和选中元素同级的元素，可以传入参数进行过滤。
  • next()方法：返回被选中元素的下一个同胞元素，该方法只能返回一个元素。
  • nextAll()方法：返回被选中元素的之后的所有同胞元素。
  • prev()方法：返回被选中元素之前的上一个同胞元素。
  • prevAll()方法：返回被选中元素之前的所有同胞元素。
  • first()方法：返回被选中的元素中的第一个元素。
  • last()方法：返回被选中的元素中的最后一个元素。
  • eq(index)方法：返回被选中的元素位置为index的元素。
  • filter(args)方法：返回被选中的元素中再满足args条件元素。
  • not(args)方法：通filter函数类似，只不过满足了这个条件就会被过滤掉。
例子:
  • 使用add给元素增加css样式

7.jQuery AJAX

AJAX的全称是Asynchronous JavaScript And XML.中文名是异步的Javascript和XML。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。原生js写ajax特别麻烦，而且涉及到兼容性问题，但是用jqeury可以轻松实现，而不用关心底部具体的实现细节

  • $.get(url,[params])方法：向url这个地址发送一个get请求，数据可以放在params这个参数中。

  • $.post(url,[params])方法：向url这个地址发送一个post请求，数据可以放在params这个参数中。

  • $.ajax(url,[params])方法：以上两个方法的底层实现。

例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery使用get获取逗逗网数据</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("http://www.yueguangzu.net",function(data,status){
            $("body").html(data);
        });
    });
});
</script>
</head>
<body>
<button>发送一个 HTTP GET 请求并获取返回结果</button>
</body>
</html>

  • post方法

输入2个数字,使用get方法局部更新
<!DOCTYPE html>
<html>
<head>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $("document").ready(function(){
        $("#button").click(function() {
            var a=$("#a").val();
            var b=$("#b").val();
            $.get("/add/",{"a":a,"b":b}, function (data) {
                $("span").text(data);
            });
        });
        });
​
    </script>
</head>
<body>
<p>请输入两个数字</p>
    a: <input id="a" type="text" name="a"> <br>
    b: <input id="b" type="text" name="b"> <br>
<button type="button" id="button">提交</button>
<p>result: <span></span></p>
</body>
</html>
#views.py
def index(request):
    return render(request, 'index.html')
def add(request):
    a = request.GET['a']  # request.GET.get('a')
    b = request.GET['b']
    a = int(a)
    b = int(b)
    return HttpResponse(str(a + b))

  • 使用ajax实现上面的功能
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="Keywords" content=""/>
    <meta name="description" content="" />
    <title>ajax</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function() {
        var a=$("#a").val();
        var b=$("#b").val();
            $.ajax({
                url:"http://127.0.0.1:9025/add/",
                method:"get",
                data:{"a":a,"b":b},
                success:function(ret){$("#result").html(ret);}
                });
        });
    });
</script>
​
</head>
<body>
    <p>请输入两个数字</p>
    a: <input id="a" type="text" name="a"> <br>
    b: <input id="b" type="text" name="b"> <br>
​
<button type="button" id="button">提交</button>
<p>result: <span id="result"></span></p>
</body>
</html>

8.jQuery 其他

  • each方法：遍历jquery元素集。
  • index()：返回当前被选中元素在所有同级元素中的索引值。
  • get()：返回当前jquery元素的原生DOM元素。

总结

jQuery是一个开源的函数库，有效的了不同浏览器之间的兼容性，让你专心编写逻辑代码，而不要浪费时间在处理兼容性的问题上。目标就是让开发者写得更少，做得更多！请务必学好.
赞(1) 打赏
未经允许不得转载：http://www.yueguangzu.net逗逗网 » 学jQuery看这篇就够了
分享到： 更多 (0)
标签：

相关推荐

评论 抢沙发

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

文章推荐

最新评论

    网站登录

    标签

    4G示范网 12306 12306.余票 ajax CSRF Django django ajax DTL HR jQuery linux memcached mysql pychram python selenium session session保存 session期限 sql Template urllib yueguangzu 上传代码linux 不限量 中国移动 书籍管理系统 优惠券 地址传参 女主播 富士康 异步 弹幕 抢票 招人 招聘 查票 模板 求职 求职须知 爬取 自动下单 自定义field 表关联 验证码

    网站统计

    • 日志总数：92
    • 评论总数：45
    • 标签总数：122
    • 页面总数：2
    • 分类总数：4
    • 链接总数：0
    • 用户总数：2
    • 最后更新：2023-06-19

    觉得文章有用就打赏一下文章作者

    支付宝扫一扫打赏

    微信扫一扫打赏