Methods commonly jq data selector data storage

dom selector $ start symbol as an argument to css

Select the method further related elements:   

 .get () Gets in Your selected tag specifies the index of the selected element or attribute is selected and the native dom is an array, it can not be achieved chained calls

 .eq () get similar screening method selected on the basis of, but he will return jq object implements a chained calls

 .find () be consistent with the selection parameters and $ dom progressive layers to find a method that returns the object property efficiency savings prevObject recorded in the parent to find that in the following figure shown in the previous infrastructure

  .filter () filter in your selected range for screening. At this time different from the target return jq traversal, filtering criteria parameter is not selected in the range of your internal filter during a filter belonging to the same level may only ji'sh limit is selected, but not both screening limit. Parameters may also be a function similar to the method of traversing the index and data foreach but returns to the native dom, this refers to the process of traversal native dom

 .not () refer to filter the unselected condition is not satisfied  

dom .is () returns a boolean value contained in the foregoing range selected subsequent conditions are true as long as there is an intersection true

 .has()     

  

Select ul li tag has a label different from the filter selection is carried out under a sibling selection

 .add () centralized operation   

.end () rollback operation to that level pervObject attribute points is the process of calling prevobject

---------------------------------------------------------------------------------------------------------------------------------------------------------

CAUTION summary jq ways to put function: dom text manipulation

Precautions: jq operating dom often operate in html here but a bunch of exceptions to a single operation

html () jq get the selected structure html structure and form of the text string can be assigned

It will take the value when the first value is assigned to all but the label assignment will parse the string into html tag

 The argument is not resolved when the labels are text () Gets the selected text label information does not get assigned to html tag information parsing into text

size () Returns the length of the array is selected label class

Note: The above three methods may not realize the value chain calls from time to time subject them to return jq

-------------------------------------------------------------------------------------------------------------------------------------------------------------

dom class name Operation 

.addClass, add the class name for the label

.removeClass, remove the class name to add parameters to remove the specified class name does not fill in the name of the class is to remove all of the operating cycle for all dom. Also can transfer function

.hasClass determine whether the selected dom contain the specified class name

Returns a Boolean value

.css () assignment to write directly attribute name attribute value string. The value may be acquired parameter passing property name attribute value corresponding

.attr () indicate the value of direct constituency dom and attribute names assigned specify the property name and property value

This value is consistent before and after writing the attributes of a fine

 

.prop () operation based js dom either native or values ​​can be assigned only characteristic map must be custom property attribute tag comes not free characteristic map can not 

For the average value of its attribute names acquired as in FIG returns a Boolean value

----------------------------------------------------------------------------------------------------------------------------------------------------------------

.val()    

该方法操作表单元素使用  获取表单元素的val值

------------------------------------------------------------------------------------------------------------------------------------------------------------------

基于jQuery对象查改删增相关方法:

    .next()  获取选中的元素的兄弟元素节点  可接受参数指定条件

、.prev()、 参看next 一前一后就行了

.preAll()、 参看上面的就行区别是上面选中单个节点 下面选中一组节点  同样为兄弟节点

.nextAll()    参看上面的就行区别是上面选中单个节点 下面选中一组节点  同样为兄弟节点

 .prevUntil() 、一句上方方法一样在选取dom基础之上进行兄弟节点的筛选 添加条件直到那个标签位置

.nextUntil()   一句上方方法一样在选取dom基础之上进行兄弟节点的筛选 添加条件直到那个标签位置

 .siblings()   只要你是兄弟节点就获取你  某一节点的所有兄弟节点 注意所有的jq方法都可以添加条件条件可以是标签还可以是函数

   .parent()、不传参数直接获取父级,

.parents()、 不加参数直接获取 该标签的所有父级 如果选中多个标签那么会获取他们所有的父级标签。直到html

.offsetParent()、 获取离你最近的含有定位的父级元素

.closest()    获取到离你最近的满足条件的父级元素 要填条件啊

   .slice()    截取选中包含jq对象的类数组如下

--------------------------------------------------------------------------------------------------------------------------------------------------------------

常用的jq方法如下:

 

 .insertAfter()、  参照before即可

.After()   

 .insertBefore()、 将选中标签放在目标标签的前面 注意两者的区别   第一位置前后的区别 第二before 选取dom必须要jq对象选取 如果填写字符串会将字符串填写到dom前面

.before()   

 .appendTo()、 添加到目标标签 相当于原生的appendchild()方法

.append()   同样append后面必须添加jq对象否则将解析成为字符串

 .prependTo()、

.prepend()    参考与apend方法该方法在目标标签的前方添加内容 

   .remove()  删除标签的方法  此方法针对于事件处理有删除功能  标签可以还原但是事件没了

、.detach()    效果参照remove()方法  但是会保留事件绑定  不会失效

 $() 参数:标签字符串 创建jQuery对象

该符号允许接受任意形式的dom结构如下:

---------------------------------------------------------------------------------------------

基于jQuery对象增删改查相关方法:    

    .wrap()、 为选取的标签添加一个直接的父级,父级名称为参数名称  字符串或者函数实现循环配置

wrapInner()、为选中标签内部的标签添加父级

wrapAll、 为你选中的满足条件的所有标签添加一个公共父级   区别于wrap为满足条件的标签分别添加父级 只可以为同级的内部标签添加父级 不可以一个内部一个外面

unWrap     与wrap相反  属于去掉选中标签的直接父级  一直调用一直去到body为止

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

原生js中的clone针对于数据类型实现的功能 jq中区别于此 更加贴近于现实意义的克隆 针对于dom而言返回jq对象

.clone()     

不是所有的属性都可以进行克隆的,当参数填写true

jq方法  data 可以使得dom用来存储数据信息   数据信息格式不限   数据存储与dom对象上而不只是直接存储与dom上

-------------------------------------------------------------------------------------------------------------------------------------------------------------------

.data() 习惯性用法及其注意点

数据渲染之前可以将数据保存到了jq对象中去 方便后续使用 之后可以通过data()方法来获取存储的数据

jq获取数据操作的是jq对象 而不是原生dom 节省性能 jq对象与dom只是存在映射关系 不是一回事

 

关于数据存储与行间  dom等不同位置的理解

前端编程数据存储  

 

html  标签属性可以存储信息      标签对应js中dom对象也可以存储信息(tag    tag-dom)使得结构拥有自己的信息实现信息结构对应  这就是data方法存储‘

attr和prop也可以实现数据存储以属性的方式 存储于标签之上

但是鉴于jq开发流程  

但数据以att()方法存储于行间时 ,但是实现数据渲染时会再一次操作dom太耗性能(从内存还有操作上);

而jqdata方法操作的是jsjq对象  属于映射池中的数据 并不是直接操作dom 

 

vue框架 数据存储于行间 不必要进行dom操作 dom操作已经委托出去 而且涉及dom操作时或通过diff算法进行最小dom操作因而效率很高  vue仅仅操作数据层  以及视图层就可以了

 

 

发布了56 篇原创文章 · 获赞 1 · 访问量 1205

Guess you like

Origin blog.csdn.net/qq_40819861/article/details/102543128