Jquery复习（视频心得）

发表于 |分类于 jQuery相关|阅读次数: –
字数统计: 1608|阅读时间: 9 min

jquery函数

$(document).ready(fn) / $(fn)

  1. window.onload 与 $(document).ready(fn)的区别

    1.1 window.onload 需要等待页面完全加载完毕才能触发，即所有的Dom元素创建完毕、图片、Css等加载完毕后才可以触发。 $(document).ready() 只要Dom元素加载完成就可以触发，这样可以提供响应速度 1.2 $(document).ready() 可以注册多次事件处理程序，并且最终都会执行而 window.onload 每次注册新的事件处理程序时都会将前面的覆盖掉

  2. 使用jQuery实现 window.onload 的效果： $(window).load(fn)

$.map(array,callback(element,index))

对于数组 array 中的每个元素，调用 callback() 函数，最终返回一个新的数组，原数组不变

Example：

var arrInt = [1, 2, 3, 4, 5, 6, 7];
var arrIntNEW = $.map(arrInt, function (element, index) {
  if (index > 3) {
    return element * 2;
  } else {
    return element;
  }
});
console.log(arrIntNEW);

$.each(array,fn)

遍历数组，通过 return false 来退出循环，不能使用 break 来提出循环

Example：

var arrInt = [1, 2, 3, 4, 5, 6, 7];
$.each(arrInt, function (key, value) {
  if (key == 3) {
    return false; //跳出循环
  }
  //当使用each遍历，普通的数组的时候，索引就是键，值就是值
  console.log(key + ' , ' + value);
});

$.trim(字符串)

去掉两端空格，启动调试，可以F11进去源码查看原理

Example：

var msg = '   hello   ';
console.log(msg);
console.log($.trim(msg)); //去掉两边空格

jquery对象与Dom对象

Example：

window.onload = function() {
        document.getElementById('btn').onclick = function() {
            //获取层对象
            //从页面上的元素对象才叫做dom对象，数值，日期对象，这些都不是dom对象
            var dvObj = document.getElementById('div1');
            dvObj.innerText = 'Hello!';
            //当直接使用dom对象的时候存在浏览器兼容性问题
            //为了解决浏览器的兼容性问题，所以这时可以把dom对象转为jQuery对象，然后再操作
            //把dom对象转换为jQuery对象后，就可以调用对应的所有的jQuery对象的成员了
            //  Dom -> jQuery
            var $dvObj = $(dvOjb);
            $dvObj.text('您好！);

                //  jQuery -> Dom (两种方法)
                1.
                var domDiv = $dvObj[0]; 2.
                var domDiv = $dvObj.get(0); domDiv.innerText('我现在是dom对象书写出来的文字');

                //jQuery对象：
                //可以把dom对象装换为jQuery对象
                //也可以把jQuery对象转为dom对象
            }
        }

jquery选择器

  1. Id选择器 $("#id")
  2. 标签选择器 $("input");
  3. 类选择器 $(".class");
  4. 标签+类选择器 $("p.text");
  5. 组合选择器 $("选择器1","选择器2","选择器3"，"......");
  6. 层次选择器 后代元素选择器：使用空格隔开 $("选择器1 选择器2")，表示选取选择器1下所有的选择器2 子元素选择器：使用 > 隔开 $("选择器1 > 选择器2") 相邻元素选择器：使用 + 或者 ~

+ ：$(".a + div") == $(".a").next 如果相邻的不是div 则不会继续向后找 ~ ：$(".a ~ div") == $(".a").nextAll() 获取类名为a之后的所有兄弟div元素

\$("div").prev("span"); 获取div上一个兄弟元素，并且该元素必须是span
\$("div").prevAll("span"); 获取div前面的所有span兄弟元素
\$("div").siblings("span"); 获取div的所有span兄弟元素

特点：链式方程/隐式迭代

Example1:

$(function () {
  $('#bthSetText').click(function () {
    $('p')
      .text('我被改变了')
      .css('background', '#ff9')
      .mouseover(function () {
        $(this).css('background', '#ff9').siblings().css('background', '');
      });
  });
});

Example2:

<ul id="target">
  <li>公牛</li>
  <li>小牛</li>
  <li>牛奶</li>
  <li>母牛</li>
</ul>

<scirpt>
  $(function(){ $("#target li").mouseover(function() { //鼠标悬浮事件
  $(this).css("background","#ff9").siblings('li').css("background",""); }).click(function(){ //单击事件
  //有些方法会破坏链式编程中返回的对象，比如： next(),nextAll(),prev(),prevAll(),siblings()
  //无参数的：text()、val()、html() //当链式编程的链被破坏时可以用end()修复
  $(this).prevAll().css("background","green").end().nextAll().css("background","blue"); }); });
</scirpt>

jQuery1.6以后有以下区别，1.6之前都是用 attr

attr() 与 prop()

对于HTML元素本身就带有的 固有 属性，在处理时，使用 prop 方法。 对于HTML元素我们自己 自定义 的DOM属性，在处理时，使用 attr 方法。

过滤选择器（ : ）

:first 选取 第一个 元素 $("div:first")

:last 选取 最后一个 元素 $("div:last")

:not(选择器) 选取 不满足选择器 条件的元素 $("input:not(.myClass)")

:even \ :odd 选取索引是 偶数 、奇数 的元素 $("input:even")

:eq(索引序号) \ ：gt(索引序号) \ :lt(索引序号) 选取索引 等于 、大于 、小于 索引号的元素 $("input:lt(5)") | $("input:lt(3):gt(0)")

:animated 选取正在 执行动画 的 div 元素
$(".header") 选取所有 h1...h6 元素

Example1:

<input type="button" name="" id="btn" value="点我" />
<table id="t" border="1">
  <tr>
    <td>姓名</td>
    <td>成绩</td>
  </tr>
  <tr>
    <td>a</td>
    <td>100</td>
  </tr>
  <tr>
    <td>b</td>
    <td>99</td>
  </tr>
  <tr>
    <td>c</td>
    <td>98</td>
  </tr>
  <tr>
    <td>d</td>
    <td>97</td>
  </tr>
  <tr>
    <td>e</td>
    <td>98</td>
  </tr>
  <tr>
    <td>f</td>
    <td>97</td>
  </tr>
  <tr>
    <td>平均分</td>
    <td>97</td>
  </tr>
</table>
<script>
  $(function () {
    $('#btn').click(function () {
      $('#t tr:first').css('font-size', '70px');
      $('#t tr:gt(0):lt(3)').css('font-size', '28px');
      $('#t tr:last').css('color', 'red');
      $('#t tr:odd:not(:last)').css('background', 'red');
    });
  });
</script>

Example2:

<table id="b1" border="1" cellpadding="2" cellspacing="2">
  <tr>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
  </tr>
  <tr>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
    <td>Aa</td>
  </tr>
</table>
<script>
  $(function () {
    $('#b1 tr').click(function () {
      $('td').css('background', '');
      $('td:even', $(this)).css('background', 'red'); //$(this) == $("#b1 tr")
      $('td:odd', $(this)).css('background', 'blue');
    });
  });
</script>

$("td:even", $(this)) 表示在上文鼠标所点击的 tr 里面来选择 td

属性过滤选择器

$("div[id]") 选取有 id 属性的 <div>

$("div[title=test]") 选取 title 属性为test的 <div>

$("div[title!=test]") 选取 title 属性不为test的 <div>

Example1:

<input type="text" name="a1" />
<input type="text" name="a2" />
<input type="text" name="a3" />
<input type="text" name="a4" />
<input type="text" name="a5" />
<input type="text" name="a6" />
<input type="text" name="a7" />
<input type="text" name="a8" />
<script>
  //1.选取所有input属性，具有name属性的
  $('input[name]').css();
  //2.选取所有body下面具有name属性的元素
  $('body *[name]').css();
  //3.选取页面上具有name属性，同时name属性的开头为a的元素
  $('body *[name^=a]').css();
  //4.选取name属性为空的
  $('body *[name=]').css();
  //5.选取以name属性中a结尾的
  $('body *[name$=a]').css();
  //6.包含a的name的属性的元素
  $('body *[name*=a]').css();
  //7.name属性中不等于某个属性的
  $("body *[name!='spec']").css();
  //8.同时具有多个属性的
  $('body *[name*=a] [id] [value]').css();
</script>

表单选择器

$(":input") 选取所有 <input> 、 <textarea> 、 <select> 和 <button>

$("input") 不一样，只获得 <input>

$(":text") == $("input[type=text]") 选取所有的单行文本框
$(":password"); 选取所有密码框
上述同理的还有 :radio 、 :submit 、 :image 、 :reset 、 :button 、 :file 、 :hidden （替代了 $("input[type=***]") ）

表单对象属性过滤选择器

$("#form :enabled") 选取id为form的表单内所有 启用 的元素
$("#form :disabled") 选取id为form的表单内所有 禁用 的元素
$("#input:checked") 选取所有 选中 的元素(Radio/Checkbox), 中间不可有空格
$("select :selected") 选取所有选中的 选项 的元素(下拉列表)

© 2018 — 2025赖彬鸿
载入天数...载入时分秒...
0%