jQueryInAction Reading Note 3.

属性和特性

操作元素属性

jQuery没有用于获取或者修改元素属性的命令。需要利用javascript,首先需要做的就是获得元素的引用。

each(function)

  对包装集中的各个元素,进行function操作,function有默认的参数为当前元素的位置,function具有当前对象this的引用。

$("img").each(function(n){
    this.alt = "this is " + n+1 + "th img, id is " + this.id;
});

获取元素特性

attr(name)

  返回当前包装集中第一个元素的name属性的值,如果没有设定该属性返回值为undefined。其中name不区分大小写

$(‘div‘).attr("name")

this.id vs. $(‘#id‘).attr(‘id‘)

this.id 返回值为DOM中的值,如果没有设定id,那么id为空"";

$(‘#id‘).attr(‘id‘),它的返回值为html中指定的id的值,如果没有指定的话,返回值为undefined。

属性和特性的区别

属性是与生俱来的,即使用户没有设定值他也是有默认值的,能够通过javascript直接改变或者获取;

特性是用户设定的,标准的特性能够通过javascript获取,非标准的只能通过attr(name)来获取。

设置元素特性

attr(name, value)

  这个方法的作用是把value的值设定

  name跟上面一样;

  value可以是一个字符串,这很简单

  value可以是一个函数,这能够理解,就是把返回值作为值

attr(attributes)

  attributes是一个对象,而这个对象是一个属性<->值所组成的对象,如{id:"some", value:"0"}。

以上两个方法会把包装集中所有的元素的属性都进行修改。

IE中input元素的name属性是不能够进行修改的,如果想要达到相同的效果的话,需要移除原来的input,再追加一个新的input。

删除特性

removeAttr(name)

  移除包装集元素中的name特性。特性是能够被删除的,但是属性还是存在的,只不过值发生变化了。

元素样式修改

元素样式,属性为className,特性为class。

对它的修改或者操作不使用className属性或者attr(name)命令,jQuery提供了更加优雅的方式。

追加样式

addClass(names)

  给所有的包装集元素追加names样式类。

  names可以是一个classs样式,也可以是以空格分隔的多个class样式。

删除样式

removeClass(names)

  把指定的样式从包装集元素的样式中移除。

  names可以是一个classs样式,也可以是以空格分隔的多个class样式。

样式更迭

toggleClass(name)

  对于包装集元素,如果有name指定的样式类,那么删除这个样式类,如果没有这个样式类的话,追加这个样式类。

        function swap() {
            $(‘tr‘).toggleClass("bg-blue");
        }

直接操作css

css(name, value)

css(properties)

  这两个跟attr很像,相当直接了。

css(name)

  返回包装集中第一个元素的css中name属性的值。

width(value) / width

height(value) / height

用来设定和获取元素的高度或高度,单位为px

hasClass(name)

name是一个样式类的名称,不带"."。

is(selector) vs. hasClass(name)

他俩在样式判断这方面可以替换,只不过is的参数是一个jQuery选择器,而hasClass的参数是一个样式类;

selector的基本样式为:.className

name的基本样式为className

操作HTML

html()  // 获取包装集第一个元素的html

html(text)  // 设定包装集元素的html

text()  // 获取包装集里元素的所有文本(连不连接起来,不知道。。。)

text(content)  // 设定包装集元素的内容,会把<翻译成&lt;。。。

append(content)

  content可以是html片段或者是元素(需要用$("")选择出来,,,)

  会把content追加到包装集元素内,所有的既有元素之后。

  $(‘table‘).append("<h1>some</h1>");  // 生成的h1会存在于table里面,这里需要注意

appendTo(target)

  target是一个jQuery选择器,或DOM元素

  该方法会把包装集里的所有元素追加到target获得的所有的元素内,既有元素之后。

$("source selector").appendTo("target selector")

如果target有一个的话,那么source会被移动;

如果target有多个的话,那么source会被复制。

与append和appendTo相似的有

prepend和prependTo

  在目标元素内,所有元素之前插入;

before和insertBefore

  在目标元素之外,前面插入;

after和insertAfter

  在目标元素值外,后面插入。

A.append(B), A.prepend(B), A.before(B), A.after(B) : 在A中处理B,A是目标,B是处理对象;

A.appendTo(B), A.prependTo(B), A.innertBefore(B), A.innertAfter(B): 把A处理到B中,A是处理对象,B是目标。

包裹元素

实在不知道这个东西的用途。。。

  ...可以实现全文搜索,将搜索结果用某种特殊的样式表现出来。。。

wrap(wrapper)

  wrapper是包装器,用来包装包装集元素的

  包装集中的每一个元素都会被包装器包装

wrapAll(wrapper)

  包装集中的每一个元素都会被包装在一个包装器中

wrapInner(wrapper)

  把包装集中的每一个元素的内容用包装器包装起来

<ul>
  <li title=‘苹果‘>苹果</li>
  <li title=‘橘子‘>橘子</li>
  <li title=‘菠萝‘>菠萝</li>
</ul>

$(‘li‘)wrap("<div></div>")
-----------------------------------------
<ul>
  <div><li title="苹果">苹果</li></div>
  <div><li title="橘子">橘子</li></div>
  <div><li title="菠萝">菠萝</li></div>
</ul>

$(‘li‘)wrapAll("<div></div>")
-----------------------------------------
<ul>
  <div>
    <li title="苹果">苹果</li>
    <li title="橘子">橘子</li>
    <li title="菠萝">菠萝</li>
  </div>
</ul>

$(‘li‘)wrapInner("<div></div>")
-----------------------------------------
<ul>
    <li title="苹果"><div>苹果</div></li>
    <li title="橘子"><div>橘子</div></li>
    <li title="菠萝"><div>菠萝</div></li>
</ul>

删除元素

remove()

  将DOM中的包装集元素删除

  这个方法仍然对包装集元素具有引用,这些元素可以进行其它操作,如insertAfter等。

  $("div.elementToReplace").after("<p>New Element!</p>").remove();// 新建的p,放到div.elementToReplace后,然后把div.elementToReplace删除;

  $("div.elementToReplace").remove().after("<p>New Element!</p>");// 先把div.elementToReplace删除了,又把它放到了新建的p之后。。。

empty()

  将包装集元素的内部节点都删除

克隆元素

clone(copyHandlers)

  将包装集中的元素进行克隆,进而进行其它的操作。

  copyHandlers是一个boolean型的值,是否将节点上的事件一起克隆,一起克隆的话,true,反之,false。

表单元素

val()

  获取包装集中第一个元素的value的值,注意,如果第一个元素不存在value属性的话,会抛出javascript错误。

  对radio不友好,因为它总会获得第一个radio的value值,但是可以这么获取:$(‘input[type=radio, name=some]:checked‘).val();

  如果radis一个也没有选择的话,上述代码返回值为undefined。

  

val(value)

  把value的值设定给包装集中的每一个元素,需要注意!!!

  设置的貌似只限于输入型的

val(values)

  values是一个数组,数组中提供多个值[a, b, c]

  这个方法会作用于各种类型的input,select等。但是结果挺乱的

输入型的input:会把值a, b, c输入到文本框内

select的话,会把value相匹配的选项选中

radio的话,没有找到什么规律,不敢乱讲

checkbox的话,会把value相匹配的选项选中

jQueryInAction Reading Note 3.,布布扣,bubuko.com

时间: 2024-08-02 19:00:26

jQueryInAction Reading Note 3.的相关文章

jQueryInAction Reading Note 7.

jQuery插件命名规则 jquery.pluginName.js pluginName指代的是插件的名称,如voctrals,tlaliu或者更有意义的名称. 简化jQuery函数的参数列表 如果有一个函数有多个参数,但是并不是每一个参数都是必须的,可以把必须的参数放到前面,不必须的参数包装成一个object. 如: function complex(param, options){ var settings = $.extend( { option1 : defaultValue1, opt

jQueryInAction Reading Note 6.

这一章的前面一部分实在是无法理解,略过吧... $.noConflict() 无参数,无返回值,是用来把$符号交给其它的javascript库的. 但是并没有放弃使用jQuery的意思,jQuery仍然可以使用,并且可以把jQuery指派给另外一个别的名称,如$j,但是仍然会让人不爽. 但是如果在调用了$.noConflict()方法之后,还是想要使用$的话,可以使用一种方法,这种方法说白了就是设定一个形式参数$,而形式参数对应着的实体参数是jQuery,也就是说使用函数的方式. functio

jQueryInAction Reading Note 5.

$(function(){ $('li:has(ul)') .click(function(event){ if (this == event.target){ if($(this).children().is(':hidden')){ $(this) .css('list-style-image', 'url(minus.gif)') .children().show(); } else { $(this) .css('list-style-image', 'url(plus.gif)') .

jQueryInAction Reading Note 4.

事件模型:javascript相关 事件模型的概念是浏览器的内容,却又与javascript相关 DOM第0级事件模型 在出现标准的事件模型之前,网景公司的网景航海家浏览器中引入了事件模型的概念. $("#someId")[0].onclick = function(event){//...} <img src="..." onclick="someFunction();" /> Event实例 javascript的每一个函数都有一

jQueryInAction Reading Note 2.

创建元素包装集 选择元素 1 CSS选择器 这个小猿比较熟悉,为了给一组相同的页面元素设置相同的样式,会用到CSS选择器: 2 子选择器 也就是万能的“>”号了吧.选择父元素的直接子元素,li > a,选择作为无序列表直接子元素的所有链接. 3 特性选择器 a[href^=http://]选择是以http://开头的所有的链接,a[href$=.pdf]选择指向一个pdf文件的所有链接. 如果我们并不关心其特性,可以省略=,如form[method],不管form是post还是get.据我所知

thinking in java ----reading note (1)

# thinking in java 4th# reading note# victor# 2016.02.10 chapter 1 对象入门 1.1 抽象的进步    (1) 所有东西都是对象.    (2) 程序是一大堆对象的组合,对象间通过消息联系.    (3) 通过封装现有对象,可制作出新型对象.    (4) 每个对象都有一种类型(某个类的实例).    (5) 同一类的所有对象都能接受相同的消息.    1.2 对象的接口 & 1.3 实现方法的隐藏     接口规定了可对一个特定

thinking in java -----reading note(2)

# thinking in java 4th# reading note# victor# 2016.02.16 chapter 2 一切都是对象 2.1 用句柄操纵对象    使用句柄作为标识符指向一个对象.但拥有句柄并不意味着有一个对象同它连接.    例如,创建一个String句柄: String s;    此时,这里创建的是句柄,并不是对象.如果向s发一条消息,就会获得一个错误.因此,较为安全的做法是:创建一个句柄时,无论如何都进行初始化. 2.2 创建对象    通常使用 new 关

thinking in java ----reading note (3)

# thinking in java 4th# reading note# victor# 2016.03.13 chapter 3 控制程序流程 3.1 java 运算符    几乎所有运算符都只能操作"基本值类型"."=","=="和"!=" 能操作所有对象,String类支持"+"和"+=". 3.1.1 优先级    运算符的优先级决定了存在多个运算符时一个表达式个部分的计算顺序

Programming In Scala Reading Note 3

Class and Object class TestClass { val some = 1 } 生成的class文件中会包含一个some()方法,并且这个方法是public的,也就是说类外可以通过类的对象来获取这个some的值 修改: class TestClass { private val some = 1 } 会生成一个private的some()方法,返回值也是some.但是现在类外是访问不到的 类的方法的参数默认是val类型的 副作用大部分用来修改一个属性的值或者开关一个I/O,只