jQuery学习——基础篇(选择器、属性与样式)

最新推荐文章于 2023-07-12 17:26:44 发布

anfangw

最新推荐文章于 2023-07-12 17:26:44 发布

阅读量755

点赞数

分类专栏： javascript js jQuery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/anfangw/article/details/53465522

版权

javascript 同时被 3 个专栏收录

12 篇文章 2 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

本文介绍了jQuery的基本概念，包括其作为JavaScript库的优势，与DOM的交互，以及选择器、属性和样式的操作方法。详细讲解了如$.attr()、.removeAttr()、html()、.text()、.val()、.addClass()、.removeClass()、.toggleClass()、.css()和.data()等关键函数的使用，并对比了它们之间的差异。

摘要由CSDN通过智能技术生成

jQuery是一个给javascript提供了函数编程接口的开源库，他的核心在于构建CSS选择器上的，用来操作DOM元素。通过链式调用，jQuery代码看上去更像是对应该发生什么的描述。

jQuery优点:

 1. 容易上手 
 2. 强大的选择器
 3. 解决浏览器兼容
 4. 完善的时间机制
 5. 出色的Ajax封装
 6. 丰富的UI

jQuery与DOM

差异

> 获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好!”，并且让文字颜色变成红色。

<!--jQuery的处理：-->
var $p = $('#imooc');
$p.html('您好！').css('color','red');

<!--普通处理，通过标准JavaScript处理：-->
var p = document.getElementById('imooc');
p.innerHTML = '您好！';
p.style.color = 'red';

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。

DOM对象就是一个单独的DOM元素。

通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

相互转化

如何把jQuery对象转成DOM对象


<!--方法1-->
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作DOM对象的属性
<!--用jQuery找到所有的div元素，因为jQuery对象也是一个数组结构，通过数组下标索引找到第一个div元素，返回div对象，调用它的style属性修改第一个div元素的颜色。这里需要注意的一点是，数组的索引是从0开始的，也就是第一个元素下标是0-->

<!--方法2-->
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

<!--jQuery对象自身提供一个.get() 方法,直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引。get方法就是利用的第一种方式包装成一个get。-->

DOM对象转化成jQuery对象


var div = document.getElementsByTagName('div'); //DOM对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

<!--通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。-->

jQuery方法

 1. 链式操作
 2. 回调函数
 3. 迭代器
 4. 延迟对象
 5. 队列

隐藏一个元素的方法

1.CSS display的值是none
2.宽度和高度都显式设置为0
3.CSS visibility的值是hidden 
4.CSS opacity的指是0

jQuery环境搭建

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
        <title>环境搭建</title>
    </head> 
    <body>
        <script type="text/javascript"> alert($) </script>
    </body>
</html>

jQuery选择器

<!--特殊 选择器this-->
var imooc = 
{
    name:"慕课网",
    getName:function()
    {//this,就是imooc对象
        return this.name;
    }
}
imooc.getName(); //慕课网

 jQuery 的做法：

$('p').click(function()
{//把p元素转化成jQuery的对象
    var $this= $(this) 
    $this.css('color','red')
})
    <!--通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了-->

<!--id 选择器  document.getElementById("#xxx")-->
    $( "#id" )

<!--类 选择器  document.getElementsByClassName(".xxx")-->
    $( ".class" )

<!--元素 选择器  document.getElementsByTagName('div')-->
    $( "element" )

<!--全 选择器  document.getElementsByTagName()-->
    $( "*" )

<!--层级 选择器  子元素 后代元素 兄弟元素 相邻元素 -->
    $( "parent > child" )//子选择器：选择所有"parent"元素中指定的child的第一个子元素。
    $( "ancestor descendant" )// 后代选择器：选择所有"parent"元素中的所有后代元素（孩子、孙子……）。
    $( "prev + next" )//相邻兄弟选择器：选择所有紧接在"prev"元素后的"next"元素。 
    $( "prev ~ siblings" )//一般兄弟选择器：匹配"prev"元素之后所有兄弟元素。具有相同的氟元素，并匹配过滤"siblings"选择器。

<!--基本筛选 选择器-->
    $(":first")//匹配第一个元素
    $(":last")//匹配最后一个元素
    $(":not(selector)")//一个用来过滤的选择器，选择所有元素去除不匹配给定的选择器元素
    $(":eq(index)")//在匹配的集合中选择索引为index的元素
    $(":gt(index)")//选择匹配集合中所有大于给定index的元素
    $(":even")//选择索引值为偶数的元素，从0开始计数
    $(":odd")//选择索引值为奇数的元素，从0开始计数
    $(":lt(index)")//选择匹配集合中所有小于于给定index的元素
    $(":header")//选择所有标题元素，例h1、h2、h3等
    $(":lang(language)")//选择指定语言的所有元素
    $(":root")//选择该文档的根元素
    $("animate")//选择所有正在执行动画效果的元素

<!--内容筛选 选择器-->
    $(":contains(text)")//选择所有包含指定文本的元素
    $(":parent")//选择所有含有子元素或者文本的元素
    $(":empty")//选择所有没有子元素的元素（包含文本节点）
    $(":has(selector)")//选择元素中至少包含指定选择器的元素
    <!--contains查找包含“指定文本”的元素,has查找包含“指定元素”的元素;   如果contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。   parent与empty是相反的，两者所涉及的子元素，包括文本节点-->

<!--shu性筛选 选择器-->
    $(":visible")//选择所有显示的元素
    $(":hidden")//选择所有隐藏的元素

<!--属性筛选 选择器-->
$('div[name|="-"]')//查找所有div中，属性name中的值只包含一个连字符“-”的div元素( 属性值等于给定字符串或以该字符串为前缀（该字符串后面跟一个连字符“-”）)
$('div[name*="test"]')//查找所有div中，有属性name中的值包含一个test字符串的div元素
$('div[name~="a"]')//查找所有div中，属性name中的值包含一个连字符“空”的div元素
$('div[name=p1]')//查找所有div中，属性name=p1的div元素
$('div[testattr!="true"]')//查找所有div中，有属性testattr中的值没有包含"true"的div
$('div[name^=imooc]')//查找所有div中，属性name的值是用imooc开头的
$('div[name$=imooc]')//查找所有div中，属性name的值是用imooc结尾的
$('div[p2]')//查找所有div中，有属性p2的div元素
$("[attributeFilter1][attributeFilter1N]")//选择匹配所有指定的属性筛选器的元素

<!--子元素筛选 选择器-->
    $(":first-child")//选择所有父元素下的第一个子元素
    $(":last-child")//选择所有父元素下的最后一个子元素
    $(":only-child")//如果某个元素是其父元素的唯一子元素，那么他就会被选中
    $(":nth-child")//选所有父元素的第n个子元素
    $(":nth-last-child")//选所有父元素的第n个子元素，从最后一个开始计数

<!--表单元素 选择器-->
    $(":input")//选择所有的input／textarea／select／button
    $(":text")//匹配所有文本框
    $(":password")//匹配所有密码框
    $(":radio")//匹配所有单选按钮
    $(":checkbox")//匹配所有复选框
    $(":submit")//匹配所有提交按钮
    $(":image")//匹配所有图像域
    $(":reset")//匹配所有重置按钮
    $(":button")//选匹配所有按钮
    $(":file")//匹配所有文件域

<!--表单元素 选择器-->
    $(":enabled")//选取可用的表单元素
    $(":disabled")//选取不可用的表单元素
    $(":checked")//选取被选中的input元素
    $(":selected")//选取被选中的option单元素

属性与样式

.attr()与.removeAttr()

attr()

attr(传入属性名)：获取属性的值

attr(属性名, 属性值)：设置属性的值

attr(属性名,函数值)：设置属性的函数值

attr(attributes)：给指定元素设置多个属性值={名一: “值一” , 名二: “值二” , … … }

removeAttr()

.removeAttr( attributeName ) : 为匹配的元素集合中的每个元素中移除一个属性（attribute）

html()与.text()

html()方法

.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容

.html( htmlString ) 设置每一个匹配元素的html内容

.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

.text()方法

.text() 得到匹配元素集合中每个元素的合并文本,包括他们的后代

.text( textString ) 用于设置匹配元素内容的文本

.text( function(index, text) ) 用来返回设置文本内容的一个函数

<body>
    <h3>.html()与.text()</h3>
    <div class="left first-div">
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>  
        <div class="div">
            <a>:first-child</a>
            <a>第二个元素</a>
            <a>:last-child</a>
        </div>
    </div>
    <h4>显示通过html方法获取到的内容</h4>
    <p></p>
    <h4>显示通过text方法获取到的内容</h4>
    <p></p>
  <script type="text/javascript">
        //显示出html方法获取到的内容
        //.html()是整个html文档结构
        $('p:first').text( $(".first-div").html() ) 
    </script>
    <script type="text/javascript">
        //显示出text方法获取到的内容
        //.text()是文本内容的合集
        $('p:last').text( $(".first-div").text() ) 
    </script>
    <script type="text/javascript">
        //通过.text()方法替换文本内容
        $(".left a:first").text('替换第一个a元素的内容')
    </script>
    <script type="text/javascript">
        //通过.html()方法替换html结构
        $(".left div:first").html('个div的子节点都被替换了')
    </script>
    <script type="text/javascript">
        //通过.text()的回调，获取原本的内容，修改，在重新赋值
        $(".left a:first").text(function(idnex,text){
            return '增加新的文本内容' + text
        })
    </script>
</body>
![运行结果]
(https://img-blog.csdn.net/20161205201314060)

.val()

val()方法

.val()无参数，获取匹配的元素集合中第一个元素的当前值

.val( value )，设置匹配的元素集合中每个元素的值

.val( function ) ，一个用来返回设置值的函数

.html(),.text()和.val()的差异总结

.html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

.html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。

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

.addClass()

.addClass( className )方法

.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

.removeClass()

.removeClass( )方法方法

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名

.removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名


<script type="text/javascript"> 
//.removeClass() 方法允许我们指定一个函数作为参数，返回将要被删除的样式
    $('.right > div:first').removeClass(function(index,className)
    {
//className = aa bb imoocClass
//把div的className赋给下一个兄弟元素div上作为它的class
    $(this).next().addClass(className)
//删除自己本身的imoocClass
    return 'imoocClass'
    })
</script>

.toggleClass()

.toggleClass()方法方法

一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名

.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除

.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的布尔值

.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

.css()

.css(propertyName, value )：设置CSS

.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

.css( properties )：可以传一个对象，同时设置多个样式

.css()与.addClass()设置样式的区别

可维护性：

.addClass()的本质是通过定义个class类的样式规则，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式

.addClass()可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

灵活性：

通过.css()方式可以很容易动态的去改变一个样式的属性，不需要在去繁琐的定义个class类的规则。一般来说, 动态生成的HTML代码结构中，都是通过.css()方法处理的

样式值：

.addClass()本质只是针对class的类的增加删除，不能获取到指定样式的属性的值，.css()可以获取到指定的样式值。

样式的优先级：

css的样式是有优先级的，优先级如下外部样式 < 内部样式 < 内联样式

.addClass()方法是通过增加class名的方式，那么这个样式是在外部文件或者内部样式中先定义好的，等到需要的时候在附加到元素上

通过.css方法设置的样式属性优先级要高于.addClass方法

总结：

.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则

.data()

.data

jQuery.data( element, key, value )   //静态接口,存数据
jQuery.data( element, key )  //静态接口,取数据   
.data( key, value ) //实例接口,存数据
.data( key ) //实例接口,存数据

jQuery.removeData( element [, name ] )
.removeData( [name ] )