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

Dear 丶 2022-07-14 09:24 155阅读 0赞

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

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

### jQuery优点: ###

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

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

### jQuery与DOM ###

#### 差异 ####

> 获取页面上这个id为imooc的p元素，然后给这个文本节点增加一段文字：“您好!”，并且让文字颜色变成红色。
    
    
    var $p = $('#imooc');
    $p.html('您好！').css('color','red');
    
    
    var p = document.getElementById('imooc');
    p.innerHTML = '您好！';
    p.style.color = 'red';

通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
    
    DOM对象就是一个单独的DOM元素。
    
    通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

#### 相互转化 ####

> 如何把jQuery对象转成DOM对象

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

> DOM对象转化成jQuery对象

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

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

### 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选择器 ##

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')
    })

$( "#id" )

$( ".class" )

$( "element" )

$( "*" )

$( "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)")//选择元素中至少包含指定选择器的元素

$(":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) ) ： 一个函数，返回一个或多个将要被移除的样式名

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

### .toggleClass() ###

.toggleClass()方法方法

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

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

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

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

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

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

### .css() ###

.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 ] )