jQuery的样式篇

jQuery获取元素:

JavaScript中获取元素节点的时候是通过document.getElementsById(" ");的方法来获取这个等价于jQuery中的$("");

在jQuery中要想获取元素节点和JavaScript一样是三个方法

ID选择器  $("#id");

class选择器  $(".class");

元素选择器  $(" ");   这些都等价于对应的JavaScript中的方法

在jQuery中有一个层级选择器作用就是1:在一个父节点的限定下寻找子节点或者子孙节点  2:在已知节点下寻找相邻的兄弟节点 但是要求这些节点的父节点是同一个。

$("parent>child");  这个就是在parent节点下的child子节点  child要求是子节点  而不可以是孙子节点等等。

$("parent descendant")  这个是在parent节点下的descendant节点  是parent的子孙节点都可以

$("prev+ next")  这个是prev节点后面紧连着的next节点  这个节点只是第一个有用

$("prev~siblings") 在prev节点后相邻的所有是siblings节点

$(":first")   匹配第一个元素

$(":last")  匹配最后一个元素

$(":not(  )“)  过滤掉()内的元素

$(" :eq(index)")  选择索引值为index的元素

$(":gt(index)") 选择索引值比index大的元素

$(":lt(index)") 选择索引值比index小的元素

$(":even")   选择所有索引值为偶数的元素

$(":odd")  选择所有索引值为奇数的元素

$(":header")  选择所有标题元素

$(":root")  选择根元素

$(":contains(text)")  选择所有包含指定文本的元素  包含就是拥有即可

$(":parents")   选择所有 有子元素或者文本元素的元素

$(":empty")  选择所有没有子元素(包括文本节点)的元素

$(":has(selected)")  选择所有包含指定选择器的元素

$(":visible") 选择所有显示的元素

$(":hidden") 选择所有的隐藏元素

隐藏元素的条件是满足一下的其中一条;

  1. CSS display的值是none。
  2. type="hidden"的表单元素。
  3. 宽度和高度都显式设置为0。
  4. 一个祖先元素是隐藏的,该元素是不会在页面上显示
  5. CSS visibility的值是hidden
  6. CSS opacity的值是0

$(":first-child") 父元素下的第一个子元素

$(":last-child")  父元素下的最后一个子元素

$(":nth-child(index)")  父元素下的第几个子元素  第几个子元素index就是几

$(":nth-last-child(index)")  父元素下的倒数第几个子元素  倒是第几个子元素index就是几

$(":only-child")   如果这个元素是父元素的唯一子元素那么它就会被选中

$(":input")  匹配所有的input表单元素(text password button等等)

$(":text")    匹配所有的文本框

$(":password")  匹配所有的密码框

$(":radio")  匹配所有的单选框

$(":checkbox")  匹配所有的复选框

$(":button") 匹配所有的按钮

$(":reset")  匹配所有的重置框

$(":submit")  匹配 所有的提交按钮

$(":image")  匹配所有的图像域

$(":file")  匹配所有的文件域

$(":enable")  选取所有可用的表单元素

$(":disable") 选取所有不可用的表单元素

$(":checked") 选取所有被选中的input元素(多选框)

$(":selected")  选取所有被选中的option元素(单选框)

$("this")  将this包装成jquery对象

获取或设置属性值:

attr("属性名","属性值/函数值")

只传入属性名的话就是获取属性值

传入属性名和属性值/函数值就是设置新的属性值

如果给一个元素设置多个属性值的话就要把每对属性名和属性值放在一起 attr("{属性名1:‘属性值1‘, 属性名2:’属性值2‘}")

removeattr("属性名"); 移除匹配元素的属性

.html()和.text()方法

.html()方法是获取和设置集合中第一个元素的html内容 不传入参数就是获取html内容  传入参数就是设置元素内的html内容

.text()方法是获取和设置集合中每个元素的文本内容 不传入参数就是获取文本内容 传入参数就是设置元素的文本内容

两个方法都可以传入函数   .html()方法只能用于html文件  text可以用于xml和html文件

例: <p>你好吗<a>新同学<a>?<p>

$("p‘).html();  得出结果是你好吗<a>新同学<a>?

$("p").text();   得出结果是你好吗新同学?

text()方法只会获取和设置文本内容不会添加标签

.val()方法 用于处理表单中元素集合的值

.val() 不传入参数就是获取匹配元素中第一个的元素的值  传入参数就设置匹配元素中每一个元素的值

注意事项: val来返回selec元素时如果没有被选中的元素则返回null

val来返回multiple元素时会返回一个数组数组中包含着所有被选中的项

.val() .html() .text() 方法的差别:

html() text() 不能用在表单上 val()只能用在表单上

html()和val()方法只会作用在匹配元素中的第一个元素 而text则会作用在每一个后代

.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

.addClass(className) 为匹配元素增加一个或者多个类名  只是增加类名却不会替换类名

.removeClass(className)  为匹配元素移除一个或多个类名

.toggleClass()方法  这是一个互斥方法向匹配元素集合中的每个元素添加或删除类名  如果这个传入的类名存在就删除  如果不存在就增添

.toggleClass("className",switch)   switch(可选参数)用于判断样式是该增添还是删除  true(增添)  false(删除)

.css()方法对匹配元素的第一个元素添加css样式

.css(propertyName) 返回一个propertyName的值   .css(propertyNames)  返回一个对象

.css({"propertyname":"value","propertyname":"value"})

.css和.addClass 方法的区别与使用:

addClass()一般是对一类元素统一进行改变类名  需要的样式提前写在一个class内

css()一般是对某一个特定样式进行处理

css的优先级要高于addClass()的优先级  因为.css()输入内联式

一般对于静态的html代码使用addClass比较好

动态的html代码一般使用.css比较好因为不确定添加什么样式

时间: 2024-12-09 16:45:46

jQuery的样式篇的相关文章

jQuery基础——样式篇

jQuery基础--样式篇 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别 在于 2.x 不再兼容 IE6.7.8 为移动端而优化,由于减少了一些代码,使得该版本比 jQuery 1.x 更小且更快. 如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了. $(document).ready 的意思是等页面的文档(document)中的节点都加载完毕后,在执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正

jQuery基础--样式篇(4)

jQuery选择器: 1.id选择器:通过id名来获取节点,id是唯一的,每个id在页面上只能使用一次. $( "#id" ) 2.类选择器:通过class样式类名来获取节点 $( ".class" ) 3.元素选择器:根据给定(html)标记名称选择所有的元素 $( "element" ) 4.全选择器:可以选取所有的元素 $( "*" )

jQuery基础--样式篇(5)

jQuery的属性与样式 (1).attr()与.removeAttr():每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息. attr()有4个表达式 attr(传入属性名):获取属性的值 attr(属性名, 属性值):设置属性的值 attr(属性名,函数值):设置属性的函数值 attr(attributes):给指定元素设置多个属性值,即:{属性名一: “属性值一” , 属性名二: “属性值二” , … … } removeAttr()删除方法 .remove

jQuery基础--样式篇(3)

1.jQuiery对象与DOM对象 对于刚刚接触jQuery的初学者,我们要清楚认识一点:jQuery对象与DOM对象是不一样的.可能一时半会分不清楚哪些是jQuery对象,哪些是DOM对象,下面重点介绍一下jQuery对象,以及两者相互间的转换. 下面举一个简单的例子: <p id="cnblogs"></p> 使用原生的javascript处理:通过原生DOM模型提供的document.getElementById(“snblogs”) 方法获取的DOM元素

jQuery基础--样式篇(1)

1.jQuery简介:JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器.jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用).events.实现动画效果,并且方便地为网站提供AJAX交互.jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用

jQuery基础--样式篇(2)

老套路,最开始上手就是写一个“Hello world!”,使用jQuery后获取元素十分简单,如下面获取div的对象,原生的javascript代码:document.getElementsByTagName(div) 使用jQuery就是:$("div),是不是觉得简单很多. <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>第一个简单的jQu

Jquery(一)—— 样式篇(转)

Jquery(一)--样式篇1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码, 因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. 2.jQuery对象与DOM对象 DOM对象:var p = document.getElementById('imooc'); jQuery对象:var $p = $('#imooc');  $p是一个类数组对象 3.jQuery对象转化

Jquery(一)—— 样式篇

Jquery(一)--样式篇1.$(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码, 因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. 2.jQuery对象与DOM对象 DOM对象:var p = document.getElementById('imooc'); jQuery对象:var $p = $('#imooc');  $p是一个类数组对象 3.jQuery对象转化

JQuery之选择器篇(一)

??今天回顾了之前学习的JQuery选择器,现在简单的总结一下. JQuery选择器类型 ??主要分为四类 基本选择器 层级选择器 过滤选择器 表单选择器 基本选择器 ??基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class和标签名等来查找DOM元素.在网页中,每个id名称只能用一次,class允许重复使用. 标签选择器??div { color:Red;} ID选择器??#myDiv {color:Red;} 类选择器??.divClass {color:R