Reproduced record-jquery Detailed operating element position

2010-12-20  来源:本站原创  分类:Web  人气:124 

Learn how to use jQuery to obtain and operate the properties and CSS style elements.

Reserved Address: http://www.cnblogs.com/oneword/archive/2010/11/11/1874809.html

Dom element attributes and properties

A label for the following elements:

<img src="1.jpg" alt='1'> </ img>

We usually id, src, alt, class called properties, that element attributes. However, when the browser to parse the tag element, the element will be resolved to Dom object, the corresponding elemental attribute property will resolve to Dom .

Dom element attributes and properties only when we resolve its differences with different names.

It is worth noting:

1. Element is parsed into the Dom, the Dom element properties and attributes is not necessarily the original name.

For example, img a class property, in the performance attributes for the element is the class; in the performance of Dom property, the property name is className

2. In JavaScript, we can directly attribute to get or set Dom

Action element attributes using jQuery

In jQuery, provide the attr function to manipulate element properties, as follows:

Function name Help Examples
attr (name) Of the first matched element of the property value. $ ("Input"). Attr ("value")
attr (property) A "name / value" in the form of object to all matched elements $ ("Input"). Attr ({value: "txt", title: "text"});
attr (key, value) Set of all elements that match the value of a property $ ("Input"). Attr ("value", "txt");
attr (key, fn) For all matched elements to set a property to a value $ ("Input"). Attr ("title", function () {return this.value});
removeAttr (name) From all matched elements to delete an attribute $ ("Input"). RemoveAttr ("value");

Note:

1. If you want to set the class attribute must be used as a property name className.

2. We can use removeAttr delete element attributes, but the corresponding Dom property will not be deleted, only its value is changed only

Several functions based on the above, we can use to obtain the value dom values and innerHTML value:

$ ("# Txt1"). Attr ("value") $ ("# txt1"). Attr ("value", "1234"); $ ("# dv1"). Attr ("innerHTML", 'this is a div '); $ ("# dv1"). attr ("innerHTML");

In fact, jQuery provides a more simple way to access the value, innerHTML, specific functions are as follows:

Function name Help Examples
val () Get the first element of the value matches the value of $ ("# Txt1"). Val ()
val (val) Set the value to match the value of the element $ ("# Txt1"). Val ("txt1")
html () Get the first matching element html content $ ("# Dv1"). Html ()
html (val) Set each element of the html content match $ ("# Dv1"). Html ("this is a div")
text () To obtain the contents of all the matching text nodes, and connect it up $ ("Div"). Text ()
text (val) All matches will be set to val elements $ ("Div"). Text ("divs")

CSS operations using jQuery

1. Modify CSS class

Function name Help Examples
addClass (classes) Matched elements for each class name specified $ ("Input"). AddClass ("colorRed borderBlack");
hasClass (class) Set of matched elements to determine whether at least one contains a specific css classes, if there is a css class with the specified, returns true alert ($ ("input"). hasClass ("borderBlack"));
removeClass ([classes]) Remove all elements from the Match or the specified css class $ ("Input"). RemoveClass ("colorRed borderBlack");
toggleClass (classes) If (not exist) to delete (add) the specified class $ ("Input"). ToggleClass ("colorRed borderBlack");
toggleClass (classes, switch) When the switch is true, add a class, switch to false, delete the class $ ("Input"). ToggleClass ("colorRed borderBlack", true);

Note:

1.addClass, removeClass, toggleClass can add multiple classes, multiple classes separated by a space between the

2.removeClass method parameter is optional, if you have parameters, then delete the specified class, if there is no argument, remove all the class matches the element

3. In calling toggleClass (classes, switch), we can have more usage, for example:

/ / When the button is clicked three times, adding style var i = 0; $ ("# btn"). Click (function () {$ ("input"). ToggleClass ("colorRed borderBlack", true);}) ;

2. Modify the CSS style

Function name Help Examples
css (name) Access to the first matching element style property $ ("Input"). Css ("color")
css (properties) To a "name / value" to set the style for all properties matching elements $ ("Input"). Css ({border: "solid 3px silver", color: "red"})
css (name, value) Element set to match the style property if the same number, will automatically be converted into a pixel value $ ("Input"). Css ("border-width", "5");

Note:

Is a numeric code for the example of the style and results:

Example Generated source code
$ ("Input"). Css ("border-width", "5"); <input />

Note:

For some common attributes, such as width, height and the like, using the attr ("width") and css ("width") is not normal to get its value, and now we come to some common attributes.

Access to common property

1. Width, and height-related

Function name Help Examples
width () Get the width of the first matched element, the default is px $ ("# Txt1"). Width ()
width (val) Set to match the width of the element, default is px $ ("# Txt1"). Width (200)
height () Get the height of the first matched element, the default is px $ ("# Txt1"). Height ()
height (val) Set to match the width of the element, default is px $ ("# Txt1"). Height (20)
innerWidth () Get the first matching element in the inner width (including the padding, not including border) $ ("# Txt1"). InnerWidth ()
innerHeight () Get the first matching element within the region height (including the padding, not including border) $ ("# Txt1"). InnerHeight ()
outerWidth ([margin]) Get the first matching element in external width (including padding, border)
include margin for the true margin, otherwise do not include
$ ("# Txt1"). OuterWidth ()
outerHeight ([margin]) Get the first matching element in the external zone height (including padding, border)
include margin for the true margin, otherwise do not include
$ ("# Txt1"). OuterHeight (true)

Note:

Returns the height, width are digital, without px

Reference to a map, will be more easier to understand.

Reproduced record-jquery Detailed operating element position

2. Position-dependent

Some pop-up objects in the design of the script, often need to coordinate and set the dynamic for the pop-up position of the element. JQuery provides us with the various location related functions.

Function name Help Examples
offset () Get matched element relative offset in the current window
Only visible elements
$ ("# Btn"). Offset (). Top $ ("# btn"). Offset (). Left
position () Matched elements of the offset parent element
Only visible elements
$ ("# Btn"). Position (). Top $ ("# btn"). Position (). Left
scrollTop () Matched elements of the offset of the scroll bar at the top
Both visible and hidden elements elements
$ ("Div"). ScrollTop ()
scrollTop (val) Set the vertical scroll bar at the top of the value of the offset
Both visible and hidden elements elements
$ ("Div"). ScrollTop (200)
scrollLeft () Matched elements left scroll offset of the Department of
Both visible and hidden elements elements
$ ("Div"). ScrollLeft ()
scrollLeft (val) Set the offset of the horizontal scroll bar on the left
Both visible and hidden elements elements
$ ("Div"). ScrollLeft (200)

Note:

offset is relative to the current window's relative offset, while the position is offset relative to the parent element

相关文章
  • Reproduced record-jquery Detailed operating element position 2010-12-20

    Learn how to use jQuery to obtain and operate the properties and CSS style elements. Reserved Address: http://www.cnblogs.com/oneword/archive/2010/11/11/1874809.html Dom element attributes and properties A label for the following elements: <img src=&qu

  • Jquery中offset()和position()的区别分析 2014-09-18

    这篇文章主要介绍了Jquery中offset()和position()的区别,实例分析了offset()与position()的使用的技巧与区别,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例分析了Jquery中offset()和position()的区别.分享给大家供大家参考.具体分析如下: 一.Jquery中offset() 获取匹配元素在当前视口的相对偏移. 总是计算相对于文档的位置,无论元素的父元素或祖先元素的position属性是什么. 返回的对象包含两个整形属性:top 和 l

  • jQuery get element position and adjust the height and width of the dynamic open a new window 2010-09-13

    The period of jQuery simulated a new window to open easily use javascript to create a new window in an article by jQuery simulation a new window opens to create a new window to see jQuery open a new window mechanism theory, but by carefully we find t

  • JQuery document for element size. Offsets and position and the scroll bar position, method of collection 2011-05-18

    Because the browser compatibility issues, if you use javascript to get these values is a very painful process. Fortunately, JQuery provides a simple and elegant, and is compatible with the solution. Access to the document browser and the page width a

  • jQuery 属性选择器element[herf*='value']使用示例 2014-09-28

    一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解,感兴趣的朋友可以参考下 一个针对jQuery属性选择器的小例子,增加对jQUery属性选择器的理解: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.9.1.js

  • Jquery Select form element usage operation (transfer) 2010-07-23

    Select elements for jQuery, and select the Text and Value: Case Study: 1. $ ("# Select_id"). Change (function (){// code ...}); / / add the event for the Select, when you select one of the trigger 2. Var checkText =$("# select_id "). F

  • JQuery 学习笔记 element属性控制 2014-11-05

    JQuery元素属性控制 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&

  • jquery实现IE6支持position:fixed 2014-02-15

    引用自:http://www.codeweblog.com/code/snippet_260395_9548 我做了点修改,原来的有点鸡肋,样式必须CSS放到head里面才行,现在可以直接放到任何地方了,比如<div style="--"> 首先是ie6fixed.js,这个是兼容IE6的 position:fixed插件,是修改过的,使用时把它复制到ie6fixed.js中 (function($){ var isIE = !!window.ActiveXObject;v

  • jQuery newly added element to the page, can not set the event state solution: 2010-07-16

    Page generated when the DOM tree has been identified, the new elements added to the page will not be bound to the jQuery event, or are listening to, when to call on the event to re-live what we should use livequery blow plug into js file : <script sr

  • linux yum reproduced using the detailed use of management 2010-11-21

    yum is yellowdog updater modified acronym. yellowdog is a Linux-distribution, RH will upgrade the technology used in this form their own distribution now yum (a similar principle and apt, but apt is the compiled code, the efficiency is much higher th

  • java reproduced record 2011-08-26

    Often seen in a number of technical forums, some people complain that do develop for many years, there is not much technology grow, there is no salary raise; Often encounter students who do outsourcing, that I every day coding, coding, for this club

  • Record a detailed description of IPC, there are many orders 2010-07-15

    http://www.hudong.com/wiki/ipc $

  • (Reproduced) http protocol Detailed 2011-10-08

    http://www.iteye.com/topic/563082

  • jquery一些问题,jquery change new element 2014-11-26

    jquery1.4使用.live(),1.7以后开始使用.on() http://stackoverflow.com/questions/12950201/jquery-onchange-not-firing-for-dynamically-added-elements

  • Element JQuery get real top.left.height and width property value of object 2010-06-08

    In an e-commerce website implementation process, it was found that the actual JQuery1.3.2 get Element top, left, height and width, the IE browser, and Chrome for the need to use different code to get. In order to facilitate the reunification of use,

  • JQuery skills summary (reproduced) 2009-11-10

    1, on a reference page elements by jquery's $ () reference element, including through the id, class, element names, as well as elements of the level of relations and conditions of dom, or xpath method, and returns the object for the jquery object (a

  • jquery how to set the control position 2010-05-10

    First need to set the control's position property position attribute provides the positioning element type, this attribute defines the layout element used to establish the positioning mechanism. Any element can be located, but the absolute or fixed e

  • Detailed position property 2011-01-04

    positioning position attribute specifies the type of elements, this attribute defines the establishment of elements of the positioning mechanism used in the layout. Any element can be located, but the absolute or fixed elements will generate a block-

  • [Change] UML in the data flow diagram, use case diagram, class diagram, object diagram, role diagram, activity diagram, sequence diagram for detailed information about preservation 2010-04-26

    * One-way association In a one-way association, two classes are related, but only one class to know the existence of such links. A one-way association, expressed as an open class with the arrow pointing to the known (not shut down arrow or triangle,

  • jQuery source code to read (2): Selector 2010-04-24

    JQuery on an article about the construction of Qi, but ignored the jQuery how to construct under the css selector jQuery object, which is the content of this article. Those who used jQuery's surely the most impressive thing is its flexible selector,