jquery的使用

相关内容：

  • jquery的介绍
  • jquery的导入
  • 查找元素：
    • 选择器
    • 元素选取
  • 操作元素：
    • 文档DOM操作
    • CSS操作
    • 事件操作

 

 

首发时间：2018-03-09 20:17

jquery的介绍：

 

  • jquery是js的一个库，可以极大简化js编程，在jquery中定义事件，查找元素都极为方便、简洁。

 

jquery的导入：

 

  • jquery是js的一个库，需要导入对应的jquery文件才能使用jquery。
  • jquery当前有多个版本的jquery,主要分为1.x，2.x，3.x：
    • 1代：最常用的，支持兼容IE6\7\8,官方已经不再升级新增功能，最终版本为1.12.4,一般项目使用1.x 就够了
    • 2代：较少用，不支持兼容IE6\7\8，官方已经不再升级新增功能，最终版本2.2.4
    • 3代：未来趋势，不支持兼容IE6\7\8，很多老的jQuery插件不支持这个版本，是官方主要维护升级的版本。
    • 【不兼容IE6\7\8是考虑各个浏览器的市场占有率问题，如果未来IE6\7\8市场占有率极低了可能其他版本就是主流了】
  • jquery的导入：
    • 在<head>中的<script>导入：image【在html5中可以不写type】【另外，src也可以是外部地址】
    • jquery库的导入可以提前导入，但自定义的jquery函数需要注意一下：
      • 对于jquery函数，可以在<body>结束前使用<script>定义【当网页发生加载缓慢的时候，为了避免DOM未完全加载，需要使用这种方式】：image
      • 而如果是head中定义jquery函数，为了避免上述错误可以将jquery函数写在“(document).ready(function(){ --- jQuery functions go here ---- });”中
    • <script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
    • 而对于自定义的jquery函数，也可以定义到一个文件中，然后使用<script>来导入

查找元素：

 

  • 选择器： jquery支持css选择器式查找

      • 比如：$("p") 获取所有<p> 元素。
      • 比如：$("#id1")获取id="id1"的元素 。
      • 比如：$(".content")获取所有class="content"的元素。
      • 比如：$("div,a")获取div元素和a元素。
      • 比如：$("h1.many")获取class="many"的h1元素
      • 比如：$("#id1 a")获取id="id1"的元素下所有的<a>元素
      • 比如：$("[href$='.jpg']")获取所有带有以 ".jpg" 结尾的属性值的 href 属性
      • 下面是css3的一些伪类选择器：
        • $("p:first"):第一个 <p> 元素 image
        • $("p:last"):最后一个 <p> 元素 image
        • $("ul li:eq(3)"):列表中的第四个元素（index 从 0 开始） 【gt是大于，lt是小于】
      • $(":input")：所有 <input> 元素
      • $(":text")：所有 type="text" 的 <input> 元素
      • $(":checked")：所有被选中的 input 元素
      • 其它。。。

 

 

元素选取：查找到指定的元素之后还可以再按要求选取

  • eq():返回指定下标的元素image
  • first():获取第一个结果image
  • last():返回最后一个结果image
  • children():返回结果的孩子元素 [注意，只返回元素],children也可以有参数，该参数可以是任何 jQuery 选择器的语法，负责对孩子元素进行筛选过滤。
  • find():找出指定元素 ,find可以有参数，该参数可以是任何 jQuery 选择器的语法，image
  • next():返回值为多个选择结果元素的下一个元素 , image
  • nextAll(): 返回值为多个选择结果元素的后面所有元素image
  • nextUntil(): 返回后续元素，直到指定条件，该参数可以是任何 jQuery 选择器的语法image
  • prev():与next相同，不过是方向是向前
  • prevAll():与nextAll相同，不过是方向是向前
  • prevUntil():与nextUntil相同，不过是方向是向前
  • parent():返回当前选定元素的父元素image
  • parents(): 返回当前选定元素的祖先元素，顶层为<html>
  • parentsUntil():返回当前选定元素的祖先元素,直到指定条件，该参数可以是任何 jQuery 选择器的语法image
  • siblings():返回当前选定元素的兄弟元素

 

操作元素：

 

 

文档DOM操作：

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

  • text() - 设置或返回所选元素的文本内容 ，当text中有参数时为设置image
  • html() - 设置或返回所选元素的内容（包括 HTML 标记） ，当html中有参数时为设置image
  • val() - 设置或返回表单字段的值 （与设置属性中value的值效果类似）,当val中有参数时为设置 image
  • attr(attribute) 方法也用于设置/改变属性值。,当attr中有第二个参数时为设置，第二个参数是属性值image
  • removeAttr(attribute):用于删除属性image
  • append() - 在被选元素体内的结尾前插入内容，右图中选择元素是div image
  • prepend() - 在被选元素体内的开头插入内容，右图中选择元素是div image
  • after() - 在被选元素之后插入内容，右图中选择元素是div image
  • before() - 在被选元素之前插入内容 ，右图中选择元素是div image
  • remove()： 删除被选元素（及其子元素），remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。 image
  • empty() - 从被选元素中删除子元素 image

 

 

 

CSS操作：

  • addClass() - 向被选元素添加一个或多个类 image
  • removeClass() - 从被选元素删除一个或多个类 image,这个方法的后遗症是如果完全清空了class，但元素中还会留下class这个属性
  • toggleClass() - 对被选元素进行添加/删除类的切换操作 【没有就加，有就删除】image
  • css() - 设置或返回样式属性
    • 如需返回指定的 CSS 属性，使用如下语法：css("propertyname");image
    • 如需设置指定的 CSS 属性，使用如下语法：css("propertyname","value"); image
    • 如需设置多个 CSS 属性，使用如下语法：css({"propertyname":"value","propertyname":"value",...});image
  • width() ： 返回或设置匹配元素的宽度
  • height() ： 返回或设置匹配元素的高度

 

     

     

     

    事件操作：事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

    • $(selector).click(function):鼠标单击事件 
      $("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
    • $(selector).dbclick(function):鼠标双击事件
    • $(document).ready(function): DOM记载完成事件
    • $(selector).submit(function):提交表单事件 ，该事件只适用于表单元素。 
      $("#form1").submit(function(){console.log("!!!");});
    • $(selector).scroll(function):滚动条事件
    • $(selector).focus(function):获得焦点事件
    • $(selector).hide(speed,callback)：隐藏元素事件，speed是隐藏速度（可以取以下值："slow"、"fast"、"normal" 或毫秒。），callback是隐藏完毕后执行的回调函数,speed,callback可以为空
    • $(selector).show(speed,callback)：显示元素事件，speed是显示速度（可以取以下值："slow"、"fast" 、"normal" 或毫秒。），callback是显示完毕后执行的回调函数，speed,callback可以为空 
      $("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

       

    • $(selector). toggle(speed,callback) ：自动切换 hide() 和 show() 方法。

     

     

     

    posted @ 2018-03-09 20:17  随风行云  阅读(357)  评论(0)  编辑  收藏  举报