美文网首页
jQuery设计思想

jQuery设计思想

作者: lin_lilili | 来源:发表于2020-10-10 19:38 被阅读0次

1 jQuery 如何获取元素

  • jQuery获取选择器对应的元素对象,返回可操作对象.
  • 利用操作对象的原型对象上的api进行操作元素对象.

1.1 使用CSS的选择器模式获得元素.

$('selector')

1.2 使用自定义模式获得元素

$('a:first') //选择网页中第一个a元素

$('tr:odd') //选择表格的奇数行

$('#myForm :input') // 选择表单中的input元素

$('div:visible') //选择可见的div元素

$('div:gt(2)') // 选择所有的div元素,除了前三个

$('div:animated') // 选择当前处于动画状态的div元素

1.3 使用内置过滤器,获得元素

$('div').has('p'); // 选择包含p元素的div元素

$('div').not('.myClass'); //选择class不等于myClass的div元素

$('div').filter('.myClass'); //选择class等于myClass的div元素

$('div').first(); //选择第1个div元素

$('div').eq(5); //选择第6个div元素

1.4 结果集二次选择

$('div').next('p'); //选择div元素后面的第一个p元素

$('div').parent(); //选择div元素的父元素

$('div').closest('form'); //选择离div最近的那个form父元素

$('div').children(); //选择div的所有子元素

$('div').siblings(); //选择div的同级元素

2 jQuery 的链式操作是怎样的

  • 为了获得链式对象,将函数中的结果集再次传入$(result)中二次封装.
  • 这样新的jQuery对象就可以进行链式操作.

2.1 使用end(),让结果集后退到上一次的jQuery对象.

3 jQuery 如何创建元素

$(),可以传入数组,选择器,以及HTML代码创建对象.

  • 这里使用了重载模式

3.1 jQuery 创建对象

  • $('<div>1</div>')

4 jQuery 如何移动元素

  • .insertAfter()和.after():在现存元素的外部,从后面插入元素
  • .insertBefore()和.before():在现存元素的外部,从前面插入元素
  • .appendTo()和.append():在现存元素的内部,从后面插入元素
  • .prependTo()和.prepend():在现存元素的内部,从前面插入元素
//以下效果相同
$("<span>Hello World!</span>").appendTo(".p1");
$(".p2").append(" <b>插入文本</b>.");

5取值与赋值统一api.

  • 使用了可读即可写
.html()   //取出或设置html内容

.text()  //取出或设置text内容

.attr()  //取出或设置某个属性的值

.width() //取出或设置某个元素的宽度

.height() //取出或设置某个元素的高度

.val()  //取出某个表单元素的值

相关文章

  • jQuery

    参考 阮一峰的《jQuery设计思想》 jQuery 中文文档 jQuery 如何获取元素jQuery的基本设计思...

  • jQuery

    jQuery设计思想 jQuery最佳实践 如何做到jQuery-free jQuery-deferred对象 同...

  • jQuery设计思想

    1 jQuery 如何获取元素 jQuery获取选择器对应的元素对象,返回可操作对象. 利用操作对象的原型对象上...

  • jQuery设计思想

    jQuery[http://jquery.com/] 是目前使用最广泛的 javaScript 函数库。 现在在 ...

  • jQuery设计思想

    JQuery简单说就是,这是一个封装了 DOM 操作的库,使用它比直接使用原生 DOM API 更方便,更好读 链...

  • 2.jQuery学习笔记第二节/Jq的设计思想之选择元素

    jQuery学习笔记第二节/Jq的设计思想之选择元素 1.jQuery的设计思想 选择网页元素模拟 CSS 选择符...

  • 简单-jQuery设计思想

    阮一峰老师原文【目录】一、选择网页元素二、改变结果集三、链式操作四、元素的操作:取值和赋值五、元素的操作:移动六、...

  • jQuery设计思想笔记

    原文来自jQuery设计思想--阮一峰,虽然距今已有八年之久,但依然有许多可借鉴之处。 1. 选择网页元素 jQu...

  • jQuery博客

    jQuery 如何获取元素 jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。...

  • jQuery功能概述

    jQuery 如何获取元素 jQuery的基本设计思想和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。...

网友评论

      本文标题:jQuery设计思想

      本文链接:https://www.haomeiwen.com/subject/vipjpktx.html