浓缩解读前端系列书籍我爱编程

读《犀利开发jQuery内核详解与实践》(1)

2017-08-20  本文已影响44人  梁同学de自言自语

jQuery简介

jQuery HelloWorld

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>jq hello</title>
    </head>
    <body>
        <!-- 导入jQuery库 -->
        <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
               console.log('jquery is ready!'); 
            });
        </script>
    </body>
</html>
//匹配到document节点后,绑定ready事件(也可简写成以上helloworld的方式)
$(document).ready(function(){
    //jQuery do something
});

jQuery对象和DOM对象

区别
jQuery对象转DOM对象
//实际上jQuery validate表单验证插件的源码也是这么写的
var li = $li[0];
var li = $li.get(0);
DOM对象转jQuery对象
//可以传递单个或多个DOM对象
var li = document.getElementByTagName('li');
var $li = $(li);

jQuery ready()和JavaScript load()事件比较

HTML文档的加载顺序:
  1. 解析HTML结构
  2. 加载外部javascript脚本和css样式文件
  3. 解析并执行javascript脚本
  4. 构造HTML DOM模型
  5. 加载外部图片等外部文件
  6. 页面加载完毕

jquery构造函数

/***
 *
 * 方式一:jQuery(expression)
 * 参数传入一个表达式的字符串,通过表达式匹配文档的元素,最终会把找到的元素封装成jQuery对象返回。
 */
jQuery('#testDiv');


/***
 *
 * 方式二:jQuery(html)
 * 参数传入HTML字符串,jQuery将创建一个对应结构的DOM节点的jQuery对象
 */
jQuery('<input type="text">');


/***
 *
 * 方式三:jQuery(elements)
 * 参数传入一个或多个DOM元素,jQuery将其封装成jQuery对象并返回
 */
jQuery('li').css('backgroud-color','#FFF');


/***
 *
 * 方式四:jQuery(fn)
 * 传入一个函数,其等价于`$(document).ready()`处理函数
 */
$(function(){
    $('ul').css('color','red');
});

jQuery链式语法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jquery 链式操作</title>
        <style type="text/css">
            .txt{
                display: block;
            }
        </style>
    </head>
    <body>
        <span class="txt">我是一段文本内容</span>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                //创建四个按钮
                $('<input type="button" value="click me">'+
                  '<input type="button" value="triggle click">'+
                  '<input type="button" value="detach handler">'+
                  '<input type="button" value="show/hide text">').appendTo($('body'));
                //为第一个按钮绑定click事件
                $('input[type="button"]').eq(0).click(function(){
                    alert('click me!');
                //为第二个按钮绑定click事件,触发第一个按钮的点击
                }).end().eq(1).click(function(){
                    $('input[type="button"]:eq(0)').trigger('click');
                //为第三个按钮绑定click事件,解除第一个按钮的点击事件
                }).end().eq(2).click(function(){
                    $('input[type="button"]:eq(0)').unbind('click');
                //为第四个按钮绑定toggle事件,隐藏或显示文本内容
                }).end().eq(3).click(function(){
                    $('.txt').toggle('slow');
                });
            });
        </script>
    </body>
</html>

jQuery选择器

jquery选择器的过滤和选择
上一篇 下一篇

猜你喜欢

热点阅读