jquery的介绍与使用美洲杯赔率
分类:计算机教程

点击当前标签给其添加class,兄弟标签class删除

  当前流行的JavaScript库有:

美洲杯赔率 1

  jQuery, MooTools,Prototype, Dojo, YUI,EXT_JS DWR

演示地址: https://xibushijie.github.io/static/addClass.html

  jQuery由美国人JohnResig创建,至今已吸引了来自世界各地的众多javascript高手加入其team。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>vue 点击当前元素添加class 去掉兄弟的class</title>
    <script src="../js/vue.js"></script>
</head>
<style type="text/css">
    .blue {color: #2175bc;}
</style>
<body>
    <div id="app">
      <ul>
        <li v-for="(todo, index) in todos" v-on:click="addClass(index)" v-bind:class="{ blue:index==current}">
            {{ todo.text }}
        </li>
    </ul>
</div>
<script>
new Vue({
    el: '#app',
        data: {
        current:0,
            todos: [
            { text: '选项一' },
            { text: '选项二' },
            { text: '选项三' }
        ]
    },
    methods:{
        addClass:function(index){
            this.current=index;
        }
    }
})
</script>
</body>
</html>

  jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITELESS,DO MORE,写更少的代码,做更多的事情。

  

  它是轻量级的js库(压缩后只有21k),这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器(IE 6.0 , FF 1.5 , Safari 2.0 , Opera 9.0 )。

  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。

  jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

  jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

  jQuery对象就是通过jQuery包装DOM对象后产生的对象。

  引入jquery: 将js文件导入项目中,在引入页面

  jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法: $(“#test”).html();

  比如:

  $("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

  这段代码等同于用DOM实现代码:

  document.getElementById("test ").innerHTML;

  虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错

  约定:如果获取的是 jQuery对象,那么要在变量前面加上 $.

  •var$variable =jQuery对象

  •varvariable = DOM对象

  选择器是jQuery的根基,在jQuery中,对事件处理, 遍历DOM和Ajax 操作都依赖于选择器

  jQuery选择器的优点:

  •简洁的写法

  •完善的事件处理机制

  ==========================基本选择器

  $("#id")//通过id查找节点元素

  $("标签名")//通过标签名查找节点元素

  $(".class的值")//通过class属性的值查找节点元素

  $("*")//查找所有的节点标签

  ==========================层次选择器

  $("标签或者id或者class 标签或者id或者class")//查找标签或者id或者class节点中的所有标签或者id或者class节点---“ ”空格代表指定标签里面的所有标签,class,id

  $("标签或者id或者class>标签或者id或者class")//查找标签或者id或者class节点中的子节点标签或者id或者class--“>”代表父子关系

  $("标签或者id或者class 标签或者id或者class")//查找标签或者id或者class的下一个标签或者id或者class节点--“ ”下一个节点

  $("标签或者id或者class~标签或者id或者class")//查找标签或者id或者class的以后的所有的标签或者id或者class节点--“~”以后的所有节点

  $("id或者class").siblings("div")//查找id或者class并且是指定节点的节点元素

  ==========================基础过滤选择器

  --------$(节点元素:条件)

  $("标签或者id或者class:first")//查找标签或者id或者class第一个出现的节点元素

  $("标签或者id或者class:last")//查找标签或者id或者class最后一个出现的节点元素

  $("div:not(标签或者id或者class)")//查找某节点上不为标签或者id或者class节点元素,注意没有id或者class属性也包括在内

  $("标签或者id或者class:even")//查找标签或者id或者class出现顺序为偶数的节点元素

  $("标签或者id或者class:odd")//查找标签或者id或者class出现顺序为奇数的节点元素

  $("标签或者id或者class":gt(index))//查找标签或者id或者class索引值大于指定index的节点元素;gt是 greater than的缩写

  $("标签或者id或者class:eq(index)")//查找标签或者id或者class索引值等于指定index的节点元素;eq是equals的简写

  $("标签或者id或者class:lt(index)")//查找标签或者id或者class索引值小于指定index的节点元素;lt是less than的简写

  $(":header")//查找所有的标题节点元素;是固定写法

  $("标签或者id或者class").slideToggle(800,method);//让标签或者id或者class节点元素动起来,800表示动画时长的毫秒数,method回调的方法

  ==========================内容过滤选择器

  $("标签或者id或者class:contains('di')")//查找标签或者id或者class内容里面包含指定内容的节点元素

  $("标签或者id或者class:empty")//查找标签或者id或者class没有任何子元素的节点元素

  $("标签或者id或者class:has(标签或者id或者class)")//查找标签或者id或者class包含标签或者id或者class元素的节点元素

  $("标签或者id或者class:parent")//查找标签或者id或者class包含子元素的节点元素

  $("标签或者id或者class:not(:contains('di'))")//查找标签或者id或者class不包含指定文本内容的节点元素

  ==========================可见度过滤选择器

  $("标签或者id或者class:visible")//查找标签或者id或者class为可见元素的节点元素

  $("标签或者id或者class:hidden").show()//查找标签或者id或者class为隐藏元素的节点元素

  each(function(index,domEle){

  alert(index "===" domEle.value);

  });//jquery的遍历方法:index是角标,domEle是将节点元素对象转换成dom对象返回

  $.each(需要遍历的对象或数组,function(index,domEle){})//jquery的静态方法

  ==========================属性过滤选择器

  $("标签或者id或者class[title]")//查找标签或者id或者class节点元素属性为title的节点元素

  $("标签或者id或者class[title=test]")//查找标签或者id或者class节点元素属性为title并且等于指定值的节点元素

  $("标签或者id或者class[title!=test]")//查找标签或者id或者class节点元素属性为title并且不等于指定值的节点元素;注意没有title属性的也包括在内

本文由美洲杯赔率发布于计算机教程,转载请注明出处:jquery的介绍与使用美洲杯赔率

上一篇:name-mysql经常挂掉,重启主机就好了美洲杯赔率 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • 应用canvas绘制动态时钟--每秒自动动态更新时间,
    应用canvas绘制动态时钟--每秒自动动态更新时间,
    使用canvas绘制时钟 下文是部分代码,完整代码参照: https://github.com/lemoncool/canvas-clock ,可直接下载。 首先看一下效果图:每隔一秒会动态更新时间 一、前
  • Expression经验之前言,Expression经验美洲杯赔率
    Expression经验之前言,Expression经验美洲杯赔率
    对于C#中的Expression特性想必从事C#开发的同学都不会陌生,网上和园子里都有很多的好的文章介绍。我想也没有必要再去写一些文章去介绍,科普或是从入
  • 10分钟学会前端调试利器——FireBug
    10分钟学会前端调试利器——FireBug
    10分钟学会前端调试利器——FireBug 2015/09/17 · HTML5 , JavaScript · 1评论 · 调试 原文出处: 惟吾德馨(@Allen_Bryant)     作者:惟吾德馨‘ 原文地址: http:
  • Data URI(转)
    Data URI(转)
    细说 Data URI 2015/08/27 · HTML5 · URI 原文出处: 李靖(@Barret李靖)     Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema定义陆续出现在 
  • Chrome开发者工具不完全指南:(三、性能篇)美
    Chrome开发者工具不完全指南:(三、性能篇)美
    Chrome开发者工具不完全指南:(三、性能篇) 2015/06/29 · HTML5 · 2评论 · Chrome 原文出处: 卖烧烤夫斯基     卤煮在前面已经向大家介绍了Chrome开发者工具