• jQuery基础及选择器(1)


    1.jQuery 简介:由美国人John  Resig于2006年创建,设计思想是write less,do more

    2.在页面中引入jQuery

    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>

    3.jQuery语法规则

    工厂函数$():将DOM对象转化为jQuery对象

    选择器 selector:获取需要操作的DOM 元素

    方法action():jQuery中提供的方法,其中包括绑定事件处理的方法

    语法:$(selector).action()

    4.jQuery操作页面元素

    使用addClass( )方法为元素添加样式

    使用css( )方法设置元素样式

    使用show( )、hide( ) 方法设置元素的显示和隐藏

    5.jQuery应用方法:addClass()、css()方法、show() 、hide()、 next()

    1)使用jQuery弹出提示框

    <script>

    $(document).ready(function() {                为页面加载事件绑定方法

    alert("我的第一个jQuery示例!");

    });

    </script>

    2)addClass()方法:为元素添加样式

    语法:jQuery 对象.addClass([样式名]);

    示例:

    $("tr:odd").addClass("odd");

    $("tr:even").addClass("even");

    3)css( )方法设置元素样式

    语法:

    css("属性","属性值");

    css({"属性1":"属性值1","属性2":"属性值2"...})

    示例

    $(this).css({"background":"#c81623"});

    4)show() 和hide()设置元素的显示和隐藏

    语法:

    $(selector).show( );

    $(selector).hide( );

    示例:

    $(this).children("div").show();

    $(this).children("div").hide();

    6.jQuery代码风格

    “$”等同于“jQuery

    链式操作:对一个对象进行多重操作,并将操作结果返回给该对象

     示例:$("h2").css("background-color","#ccffff").next().css("display","block")

    隐式迭代

    示例:$(document).ready(function() {

    $("li").css({"font-weight":"bold","color":"red"});

    });

    7.DOM对象和jQuery对象的区别:

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

    jQuery:是一个简洁而快速的JavaScript库,可用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。jQuery简化了HTML的客户端脚本,从而简化了Web 2.0应用程序的开发

    DOM对象:直接使用JavaScript获得的节点对象   var objDOM=document.getElementById("title");   var objHTML=objDom.innerHTML;

    jQuery对象:使用jQuery包装产生的能够使用jQuery中的方法的对象   $("#title").html();等同于document.getElementById("title").innerHTML;

    DOM对象转换jQuery对象   使用$()进行转化:$(DOM)对象

    jQuery对象转换DOM对象:1)通过index方法得到相应的DOM对象

                                                2)通过get(index)得到相应的DOM对象

    8.jQuery能做什么?

    访问和操作DOM元素

    控制页面样式

    对页面事件进行处理

    与Ajax技术完美结合

    9.jQuery的优势

    体积小,压缩只有100KB左右

    强大的选择器

    出色的DOM包装

    可靠的事件处理机制

    出色的浏览兼容性

  • 相关阅读:
    Linux学习笔记(20)linux exec
    【最佳实践】filezilla软件用bat自动化ftp传输文件
    Windows定时任务定时执行bat文件标准输出默认位置
    安装mysql odbc5.3.13
    如何查看windows server是否有web发布?
    C#串口通讯
    asp.net中通过post的方式导出文件操作。
    C#USB口通讯
    jquery UI的Widet
    asp.net中的常规认证方式枚举(涵盖mvc)(一)
  • 原文地址:https://www.cnblogs.com/pan520/p/13181207.html
Copyright © 2020-2023  润新知