jQuery的实例及必知重要的jQuery选择器详解


Posted in Javascript onMay 20, 2016

Jquery能做什么

访问和操作DOM元素
 
控制页面样式
 
 对页面事件进行处理
 
 扩展新的jQuery插件
 
与Ajax技术完美结合

Jquery的优势

 
体积小,压缩后只有100KB左右
 
l强大的选择器
 
出色的DOM封装
 
l可靠的事件处理机制
 
出色的浏览器兼容性
 
使用隐式迭代简化编程
 
丰富的插件支持

jQuery的知识的分解:

1.关于window.onload和$(function(){})区别
 
解析:window.onload等待页面上所有资源(html标签,css,img,js)都加载完成后,才执行,包括(文本素材,图片,js,css)
 
$(function(){}):等待页面上的标签素材加载完成后就开始执行
 
第二点:
 
Window.onload只能调用一次
 
$(function(){})可以调用多次
 
2.怎么通过Jquery设置样式
 
1).通过$(“选择器”).css(“属性名”,”属性值”);
 
//这里的书写的属性名和css中书写的一致
 
2).$(“选择器”).html():获取两个标签之间的html代码
 
3).$(“选择器”).addClass(“属性值”)
 
可以动态的改变dom文档结构。进而设置样式。
 
3.DOM对象和Jquery对象的转换
 
jquery对象转换成 dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。
 
ar cr= cr=("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

dom对象转换成jquery对象

对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);

代码:

var cr=document.getElementById("cr"); //dom对象
var cr= cr=(cr); //转换成jquery对象

光棒效果案例:

js代码:

$(function () {
        var lis = document.getElementsByTagName('li');

        for (var i = 0; i < lis.length; i++) {
          lis[i].onmouseover = function () {
            this.style.background = 'red';
          };
          lis[i].onmouseout = function () {
            this.style.background = '';

          }
        }
      });

jQuery的代码:

$(function () {
        $('li').mouseover(function () {
          $(this).css('background','red');
        }).mouseout(function () {
          $(this).css('background', '');
        })
      });

jQuery瀑布流案例:

<script>
  var margin = 10;//这里设置间距
  var li = $("li");//这里是区块名称
  var li_W = li[0].offsetWidth + margin;//取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了)
  function liuxiaofan() {//定义成函数便于调用
    var h = [];//记录区块高度的数组
    var n = document.documentElement.offsetWidth / li_W | 0;//窗口的宽度除以区块宽度就是一行能放几个区块
    for (var i = 0; i < li.length; i++) {//有多少个li就循环多少次
      li_H = li[i].offsetHeight;//获取每个li的高度
      if (i < n) {//n是一行最多的li,所以小于n就是第一行了
        h[i] = li_H;//把每个li放到数组里面
        li.eq(i).css("top", 0);//第一行的Li的top值为0
        li.eq(i).css("left", i * li_W);//第i个li的左坐标就是i*li的宽度
      }
      else {
        min_H = Math.min.apply(null, h);//取得数组中的最小值,区块中高度值最小的那个
        minKey = getarraykey(h, min_H);//最小的值对应的指针
        h[minKey] += li_H + margin;//加上新高度后更新高度值
        li.eq(i).css("top", min_H + margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
        li.eq(i).css("left", minKey * li_W);  //第i个li的左坐标就是i*li的宽度
      }
      $("h3").eq(i).text("编号:" + i + ",高度:" + li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
    }
  }
  /* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
  function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
  /*这里一定要用onload,因为图片不加载完就不知道高度值*/
  window.onload = function () { liuxiaofan(); };
  /*浏览器窗口改变时也运行函数*/
  window.onresize = function () { liuxiaofan(); };
</script>

JQuery选择器

 解析:为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签

1.层次选择器

<!-- 当点击h2元素时,为#menu下的<span>元素添加色为#09F的颜色背景 -->
  <!-- <script type="text/javascript">
    $(function () {
      $('h2').click(function () {
        $('#menu span').css('background-color','#09F');
      });
    });
  </script>-->

2.基本选择器

<!-- 为标签选择器添加样式 -->
  <script type="text/javascript">
    $(function () {
      $('h2').click(function () {
        $('h3').css('background-color', '#09F');
       
      });
    });
  </script>

3.基本过滤选择器

<script type="text/javascript">
    $(function () {
      $('h2').click(function () {
        //$('li:first').css('background-color', '#09F');//第一个
        //$('li:last').css('background-color', '#09F');//最后一个
        //$('li:not(.three)').css('background-color', '#09F');//class不为three的元素
        // $('li:even').css('background-color', '#09F');//索引值为偶数的元素
        // $('li:eq(1)').css('background-color', '#09F');//索引值为1的元素
         //$('li:gt(1)').css('background-color', '#09F');//索引值大于1的元素
        //$('li:lt(1)').css('background-color', '#09F');//索引值小于1的元素
        //$(':header').css('background-color', '#09F');//所有标题的元素
        $(':focus').css('background-color', '#09F');//获取焦点的元素

      });
    });
  </script>

 

4.可见性过滤选择器

<script src="js/jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function () {
      // $('p:hidden').show();//显示文字
      $('p:visible').hide();//隐藏文字
    });
  </script>
  <style type="text/css">
    #txt_show
    {
      display:none;color:#00C;
    }
    #txt_hide
    {
      display:block;color:#F30;
    }
  </style>
</head>
<body>
  <p id="txt_hide">点击按钮,我会被隐藏哦~</p>
   <p id="txt_show">隐藏的我,被显示了,嘿嘿~</p>
  <input type="button" name="show" value="点击显示文字 " />
   <input type="button" name="hide" value="点击隐藏文字 " />
</body>

5.属性选择器

<!--改变class属性的值为odds的元素的背景颜色 -->
   <script type="text/javascript">
     $(function () {
       $("h2").click(function () {
         $("[class=odds]").css("background-color", "#FFFFFF");
       })
     });
  </script>

以上这篇jQuery的实例及必知重要的jQuery选择器详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
基于AngularJS实现iOS8自带的计算器
Sep 12 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
JS判断数组那点事
Oct 10 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
angular2 组件之间通过service互相传递的实例
Sep 30 Javascript
深入理解setTimeout函数和setInterval函数
May 20 #Javascript
JavaScript基础教程——入门必看篇
May 20 #Javascript
jQuery选择器及jquery案例详解(必看)
May 20 #Javascript
Jquery $when done then的用法详解
May 20 #Javascript
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
jQuery通过deferred对象管理ajax异步
May 20 #Javascript
Bootstrap3学习笔记(三)之表格
May 20 #Javascript
You might like
一个很不错的PHP翻页类
2009/06/01 PHP
Ajax+PHP 边学边练之四 表单
2009/11/27 PHP
php下载远程大文件(获取远程文件大小)的实例
2017/06/17 PHP
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
利用window.name实现windowStorage代码分享
2014/01/02 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
JQuery 使用attr方法实现下拉列表选中
2014/10/13 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python下载指定页面上图片的方法
2016/05/12 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
项目建议书范文
2014/05/12 职场文书
社区助残日活动总结
2014/08/29 职场文书
北京青年观后感
2015/06/15 职场文书
自考生自我评价
2019/06/21 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers