JQuery初识

最新推荐文章于 2021-05-27 19:31:18 发布
最新推荐文章于 2021-05-27 19:31:18 发布
阅读量289 收藏
点赞数
分类专栏： 前端学习

一.jQuery基础——样式篇

1、jQuery轻量级的JavaScript库，核心是JavaScript，兼容css和各种浏览器，核心理念是写得少做得多。
2、优势：容易上手，强大的选择器，节约开发时间，丰富的UI，完善的事件机制，Ajax的封装。
3、特性和方法：链式操作、回调函数、迭代器、延迟对象、队列...
@搭建环境
搭建JQuery环境时，需在头文件中通过<script>引入JQuery库。
$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码

API（Application Programming Interface，应用程序编程接口）

4.
通过标准的JavaScript操作DOM与jQuyer操作DOM的对比，我们不难发现：

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

 
 

  
  5.JQuery对象转换成DOM对象
 
 

 
 

  
  <div>HTML</div>
 
 

 
 

  
  

 
 

 
 

  
  <script>
 
 

 
 

  
  $div=$('div');
 
 

 
 

  
  div=$div[0]   或者  div=$div.get(0);
 
 

 
 

  
  div.style.color='red';
 
 

 
 

  
  </script>
 
 

 
 

  
  
  
  

   
   

    
    6.
    
    DOM
    
    对象转换成
    
    JQuery
    
    对象
   
   

   
   

    
    <div>HTML</div>
   
   

   
   

    
    

   
   

   
   

    
    <script>
   
   

   
   

    
    div=document.getElementById('div');
   
   

   
   

    
    $div=$(div);
   
   

   
   

    
    var $first=$div.first();
   
   

   
   

    
    $first.css('color','red');
   
   

   
   

    
    </script>
   
   
7.JQuery选择器
 
 

 
 

  
  @：id选择器：$("#id");      
 
 

 
 

  
  @：类选择器：$(".class")     通过document.getElementByClassName（‘name’）实现
 
 

 
 

  
  @：元素选择器：$("element")
 
 

 
 

  
  @：全选择器（*选择器）：$("*")【===表示数据跟类型都相等】
 
 

 
 

  
  @：层级选择器：{子选择器、后代选择器、相邻兄弟选择器、一般兄弟选择器}
 
 

 
 

  
  

 
 

 
 

  
  

 
 

 
 

  
  $('div  p'):选择所有div里面的p元素
 
 

 
 

  
  例子：
 
 

 
 

  
  <!DOCTYPE html>
<html>


<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>


<body>
    <h2>子选择器与后代选择器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>


    <script type="text/javascript">
        //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
        $('div>p').css("border", "1px groove red");
    </script>


    <script type="text/javascript">
        //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
        $('div p').css("border", "1px groove yellow");
    </script>




    <h2>相邻兄弟选择器与一般兄弟选择器</h2>
    <div class="bottom">
        <div>兄弟节点div, +~选择器不能向前选择</div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div>兄弟节点div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>


    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $(".prev+div").css("border", "3px groove blue");
    </script>


    <script type="text/javascript">
        //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $(".prev~div").css("border", "3px groove green");
    </script>


</body>


</html>

 
 

 
 

  
  

 
 

 
 

  
  

 
 

 
 

  
  微笑：基本筛选选择器

 
 

 
 

  
  筛选选择器很多都不是CSS的规范，而是jQuery自己为了开发者的便利延展出来的选择器

 
 

 
 

  
  

 
 

 
 

  
  eg:$("input:not(:checked))+p")
 
 

 
 

  
  微笑：内容筛选选择器

 
 

 
 

  
  
  
  

 
 

 
 

  
  

 
 

 
 

  
  
  1. contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
  2. 如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
  3. :parent与:empty是相反的，两者所涉及的子元素，包括文本节点

  
  生气
  
  可见性筛选选择器
  
  

  
  
  
  

 
 

 
 

  
  

 
 

 
 

  
  生气
  
  属性筛选选择器
  
  

 
 

 
 

  
  

 
 

 
 

  
  
  
  
[attr="value"]能帮我们定位不同类型的元素，特别是表单form元素的操作，比如说input[type="text"],input[type="checkbox"]等
[attr*="value"]能在网站中帮助我们匹配不同类型的文件

  
  

   
   //查找所有div中，属性name=p1的div元素
        $('div[name=p1]').css("border", "3px groove red");

  
  

  
  

   
   //查找所有div中，有属性p2的div元素 //查找所有div中，属性name的值是用imooc结尾的
         $('div[name$=imooc]').css("border", "3px groove blue"); 
        $('div[p2]').css("border", "3px groove blue"); 

  
  

  
  

   
   //查找所有div中，有属性name中的值只包含一个连字符“-”的div元素
  
  

  
  

   
           $('div[name|="-"]').css("border", "3px groove #00FF00"); 

  
  

  
  

   
   //查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素
        $('div[name~="a"]').css("border", "3px groove #668B8B"); 

  
  

  
  

   
   //查找所有div中，属性name的值是用imooc开头的
        $('div[name^=imooc]').css("border", "3px groove red");
  
  

  
  

   
   //查找所有div中，属性name的值是用imooc结尾的
        $('div[name$=imooc]').css("border", "3px groove blue"); 
  
  

  
  

   
   //查找所有div中，有属性name中的值包含一个test字符串的div元素
        $('div[name*=test]').css("border", "3px groove #00FF00");
  
  

  
  

   
    
   
   //查找所有div中，有属性testattr中的值没有包含"true"的div
  
  

  
  

   
           $('div[testattr!="true"]').css("border", "3px groove #668B8B");

  
  

  
  生气子元素筛选选择器
  
  

 
 

 
 

  
  

 
 

 
 

  
  :nth-child(index)从1开始的，而eq(index)是从0开始的

 
 

 
 

  
  
  
  
  1. nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算
应用：<!DOCTYPE html>
  
  
<html>
  
  

  
  

  
  
<head>
  
  
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  
  
    <title></title>
  
  
    <link rel="stylesheet" href="imooc.css" type="text/css">
  
  
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  
  
</head>
  
  

  
  

  
  
<body>
  
  
    <h2>子元素筛选选择器</h2>
  
  
    <h3>:first-child、:last-child、:only-child</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>
  
  
        </div>
  
  
        <div class="div">
  
  
            <a>:first-child</a>
  
  
            <a>第二个元素</a>
  
  
            <a>:last-child</a>
  
  
        </div>
  
  
    </div>
  
  

  
  

  
  
    <script type="text/javascript">
  
  
        //查找class="first-div"下的第一个a元素
  
  
        //针对所有父级下的第一个
  
  
        $(".first-div a:first-child").css("color", "#CD00CD");
  
  
    </script>
  
  

  
  

  
  
    <script type="text/javascript">
  
  
        //查找class="first-div"下的最后一个a元素
  
  
        //针对所有父级下的最后一个
  
  
        //如果只有一个元素的话，last也是第一个元素
  
  
        $('.first-div a:last-child').css("color", "red");
  
  
    </script>
  
  

  
  

  
  
    <script type="text/javascript">
  
  
        //查找class="first-div"下的只有一个子元素的a元素
  
  
        $(".first-div a:only-child").css("color", "blue");
  
  
    </script>
  
  

  
  

  
  

  
  

  
  
    <h3>:nth-child、:nth-last-child</h3>
  
  
    <div class="left last-div">
  
  
        <div class="div">
  
  
            <a>:first-child</a>
  
  
            <a>第二个元素</a>
  
  
            <a>第三个元素</a>
  
  
            <a>:last-child</a>
  
  
        </div>
  
  
        <div class="div">
  
  
            <a>:first-child</a>
  
  
            <a>第二个元素</a>
  
  
        </div>
  
  
        <div class="div">
  
  
            <a>:first-child</a>
  
  
            <a>第二个元素</a>
  
  
            <a>第三个元素</a>
  
  
            <a>:last-child</a>
  
  
        </div>
  
  
    </div>
  
  

  
  

  
  
    <script type="text/javascript">
  
  
        //查找class="last-div"下的第二个a元素
  
  
        $(".last-div a:nth-child(2)").css("color", "#CD00CD");
  
  
    </script>
  
  

  
  

  
  
    <script type="text/javascript">
  
  
        //查找class="last-div"下的倒数第二个a元素
  
  
        $(".last-div a:nth-last-child(2)").css("color", "red");
  
  
    </script>
  
  

  
  

  
  
</body>
  
  

  
  

  
  
</html>
 
 

 
 

  
  

 
 

 
 

  
  生气表单元素选择器

 
 

 
 

  
  

 
 

 
 

  
  
  
  
生气表单对象属性筛选选择器

  
  
  
  

 
 

 
 

  
  
 
 

 
 
  1. 选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
  2. 在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

 
 

  
  
jQuery选择器之特殊选择器this

  
  this是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的所有者

 
 

 
 

  
  

 
 

 
 

  
  在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用
  
  

 
 

 
 

  
  
  
  
this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

  
  

 
 

 
 

  
  
  
  
JQuery属性与样式：

  
  
attr()有4个表达式

  
  
  1. attr(传入属性名)：获取属性的值
  2. attr(属性名, 属性值)：设置属性的值
  3. attr(属性名,函数值)：设置属性的函数值
  4. attr(attributes)：给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }

  
  
removeAttr()删除方法

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

  
  
Attribute跟Property都有属性的意思

  
  
获取Attribute就需要用attr，获取Property就需要用prop

  
  

 
 

 
 

  
  
  
  
.html()方法 

  
  
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法：

  
  
  1. .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
  2. .html( htmlString )  设置每一个匹配元素的html内容
  3. .html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数

  
  
.text()方法

  
  
得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。，具体有3种用法：

  
  
  1. .text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
  2. .text( textString ) 用于设置匹配元素内容的文本
  3. .text( function(index, text) ) 用来返回设置文本内容的一个函数

  
  
.html与.text的异同:

  
  
  1. .html与.text的方法操作是一样，只是在具体针对处理对象不同
  2. .html处理的是元素内容，.text处理的是文本内容
  3. .html只能使用在HTML文档中，.text 在XML 和 HTML 文档中都能使用
  4. 如果处理的对象只有一个子文本节点，那么html处理的结果与text是一样的
  5. 火狐不支持innerText属性，用了类似的textContent属性，.text()方法综合了2个属性的支持，所以可以兼容所有浏览器

  
  
.val()方法

  
  
  1. .val()无参数，获取匹配的元素集合中第一个元素的当前值
  2. .val( value )，设置匹配的元素集合中每个元素的值
  3. .val( function ) ，一个用来返回设置值的函数

  
  
 注意事项：

  
  
  1. 通过.val()处理select元素， 当没有选择项被选中，它返回null
  2. .val()方法多用来设置表单的字段的值
  3. 如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

  
  

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

  
  
  1. .html(),.text(),.val()三种方法都是用来读取选定元素的内容；只不过.html()是用来读取元素的html内容（包括html标签），.text()用来读取元素的纯文本内容，包括其后代元素，.val()是用来读取表单元素的"value"值。其中.html()和.text()方法不能使用在表单元素上,而.val()只能使用在表单元素上；另外.html()方法使用在多个元素上时，只读取第一个元素；.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。
  2. .html(htmlString),.text(textString)和.val(value)三种方法都是用来替换选中元素的内容，如果三个方法同时运用在多个元素上时，那么将会替换所有选中元素的内容。
  3. .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。

  
  
.addClass( className )方法

  
  
  1. .addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名
  2. .addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

  
  
.addClass()方法不会替换一个样式类名。它只是简单的添加一个样式类名到元素上

  
  .removeClass()【删除样式】
 
 

 
 

  
  
  
  
.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

  
  
  1. .toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
  2. .toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
  3. .toggleClass( [switch ] )：一个用来判断样式类添加还是移除的 布尔值
  4. .toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数
  5. 
    
    
    1. toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
    2. toggleClass会保留原有的Class名后新增，通过空格隔开


 
 

 
 

  
  
  
  
.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

  
  
获取：

  
  
  1. .css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
  2. .css( propertyNames )：传递一组数组，返回一个对象结果

  
  
设置：

  
  
  1.  .css(propertyName, value )：设置CSS
  2. .css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
  3. .css( properties )：可以传一个对象，同时设置多个样式

  
  
注意事项：

  
  
  1. 浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
  2. .css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
  3. 当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

  
  
可维护性：

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

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

  
  
灵活性：

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

  
  
样式值：

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

  
  
样式的优先级：

  
  
css的样式是有优先级的，当外部样式、内部样式和内联样式同一样式规则同时应用于同一个元素的时候，优先级如下

  
  
外部样式 < 内部样式 < 内联样式

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

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

  
  
总结：

  
  
.addClass与.css方法各有利弊，一般是静态的结构，都确定了布局的规则，可以用addClass的方法，增加统一的类规则
如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

  
  
元素的数据存储

  
  

   
   

    
    
html5 dataset是新的HTML5标准，允许你在普通的元素标签里嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由JavaScript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。那么在不支持HTML5标准的浏览器中，我们如何实现数据存取?  jQuery就提供了一个.data()的方法来处理这个问题

    
    
使用jQuery初学者一般不是很关心data方式，这个方法是jquery内部预用的，可以用来做性能优化，比如sizzle选择中可以用来缓存部分结果集等等。当然这个也是非常重要的一个API了，常常用于我们存放临时的一些数据，因为它是直接跟DOM元素对象绑定在一起的

    
    
jQuery提供的存储接口

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

    
    
2个方法在使用上存取都是通一个接口，传递元素，键值数据。在jQuery的官方文档中，建议用.data()方法来代替。

    
    
我们把DOM可以看作一个对象，那么我们往对象上是可以存在基本类型，引用类型的数据的，但是这里会引发一个问题，可能会存在循环引用的内存泄漏风险

    
    
通过jQuery提供的数据接口，就很好的处理了这个问题了，我们不需要关心它底层是如何实现，只需要按照对应的data方法使用就行了

    
    
同样的也提供2个对应的删除接口，使用上与data方法其实是一致的，只不过是一个是增加一个是删除罢了

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

   
   

  
  
<!DOCTYPE html>
  
  
<html>
  
  

  
  

  
  
<head>
  
  
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  
  
    <title></title>
  
  
    <style>
  
  
    .left,
  
  
    .right {
  
  
        width: 300px;
  
  
        height: 120px;
  
  
    }
  
  
    
  
  
    .left div,
  
  
    .right div {
  
  
        width: 100px;
  
  
        height: 90px;
  
  
        padding: 5px;
  
  
        margin: 5px;
  
  
        float: left;
  
  
        border: 1px solid #ccc;
  
  
    }
  
  
    
  
  
    .left div {
  
  
        background: #bbffaa;
  
  
    }
  
  
    
  
  
    .right div {
  
  
        background: yellow;
  
  
    }
  
  
    </style>
  
  
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  
  
</head>
  
  

  
  

  
  
<body>
  
  
    <h2>jQuery.data()静态方法</h2>
  
  
    <div class="left">
  
  
        <div class="aaron">
  
  
            <p>点击看结果</p>
  
  
            <p>jQuery.data</p>
  
  
        </div>
  
  
        <div><span></span></div>
  
  
    </div>
  
  
    <h2>.data()实例方法</h2>
  
  
    <div class="right">
  
  
        <div class="aaron">
  
  
            <p>点击看结果</p>
  
  
            <p>.data</p>
  
  
        </div>
  
  
        <div><span></span></div>
  
  
    </div>
  
  
    <script type="text/javascript">
  
  
    $('.left').click(function() {
  
  
        var ele = $(this);
  
  
        //通过$.data方式设置数据
  
  
        $.data(ele, "a", "data test")
  
  
        $.data(ele, "b", {
  
  
            name : "慕课网"
  
  
        })
  
  
        //通过$.data方式取出数据
  
  
        var reset = $.data(ele, "a") + "</br>" + $.data(ele, "b").name+"</br>"
  
  
        ele.find('span').append(reset)
  
  
    })
  
  
    </script>
  
  
    <script type="text/javascript">
  
  
    $('.right').click(function() {
  
  
        var ele = $(this);
  
  
        //通过.data方式设置数据
  
  
        ele.data("a", "data test")
  
  
        ele.data("b", {
  
  
            name: "慕课网"
  
  
        })
  
  
        //通过.data方式取出数据
  
  
        var reset = ele.data("a") + "</br>" + ele.data("b").name
  
  
        ele.find('span').append(reset)
  
  
    })
  
  
    </script>
  
  
</body>
  
  

  
  

  
  
</html>

Bravemo
关注
专栏目录
jQuery中的样式操作、元素操作、属性操作
wutong_jun的博客
04-12 779
主要是遍历、创建、添加、删除元素操作。 遍历元素 jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一元素做不同操作,就需要用到遍历。 语法1: $ ("div") .each (function (index, domEle) { xxx; } ) $('div').each(function (index, domELe) { console.log(index);//得到索引号 可以自己指定索引号名称 console.log(domELe);// <div>1
初识jQuery
04-01
**初识jQuery** jQuery是一个广泛应用于Web开发的JavaScript库，它的设计目的是简化HTML文档遍历、事件处理、动画以及Ajax交互。自2006年发布以来，jQuery因其易用性和丰富的功能集，成为了开发者们的首选工具之一...
jQuery的属性和样式
ssisse的博客
04-23 652
本文转自慕课网 （一）.attr()与.removeAttr() 每个元素都有一个或者多个特性，这些特性的用途就是给出相应元素或者其内容的附加信息。如：在img元素中，src就是元素的特性，用来标记图片的地址。 操作特性的DOM方法主要有3个，getAttribute方法、setAttribute方法和removeAttribute方法，就算如此在实际操作中还
【jQuery】jQuery的属性和样式
空空
10-24 408
.attr 1.attr(传入属性名) 获取属性的值 2.attr(属性名, 属性值) 设置属性的值 3.attr(属性名,函数值) 设置属性的函数值 4.attr(attributes) 给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … } .removeAttr() .removeAttr( attributeName ) : 为匹配的元...
jQuery的属性与样式
weixin_44538083的博客
05-16 208
开发工具与关键技术：VS，jQuery 作者：陈梅 撰写时间：2019年5月16日 所有代码来源与老师教学 这次分享的是jQuery的属性与样式中的三个属性，addClass、removeClass、toggleClass这三个属性。其中addClass为增加样性的属性，可以以动态的形式改变类的名字，可以让其修改元素呈现出不同的效果出来。addClass方法是不会替换一个样式的类名，它只是简单的添...
JQuery的属性与样式之元素的数据存储
21号先锋者
02-05 150
@{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width" /&gt; &lt;title&gt;ChapterThreeData&lt;/title&gt;
学习前端的第六天，对jQuery的初识
10-16
学习前端的第六天，对jQuery的初识
初识JQuery 实例一(first)
10-28
标题"初识JQuery 实例一(first)"暗示这是一个关于入门级jQuery操作的示例，重点在于`first()`和`next()`方法的使用。 首先，jQuery库通过引入`<script>`标签加载，这里使用的版本是`...
jQuery学习笔记（一）
3y先生的博客
04-30 322
新技术要了解学习，老技术也不能忘，还要查缺补漏。
JQuery学习笔记
waectr的博客
08-04 1542
语法： 通过选取HTML元素，对他们执行“操作” 基础语法：$(selector).action() JQuery入口函数： $(document).ready(functiom(){ //JQ代码 });   JQ的加载比JS快，JQ的加载不存在覆盖问题，加载时顺序执行 JQ无法操作JS中的属性和方法   选择器：   基本上可以选择CSS中的所有选择器，还可以有一些自...
【学习笔记】JQuery学习笔记
heshan1992的博客
08-28 510
一、选择器 在CSS规则中两个选择器中添加空格和不添加空格是有区别的：加空格表示的是后代选择器（可以不是直接子元素），而不加空格则表示的是在一个元素上同时满足两个条件，即不加空格表示的是“且”的关系。.example .pp{ color: orange; } .example.pp2 { color: green; }第一个表示的是具有.example类元素中具有.pp类的子元素：<p
jQuery属性
yanjin_xiaoxiao的博客
05-27 122
开发工具与关键技术： MVC 作者：陈珊珊 撰写时间：2021/5/27 $(function () { 1.attr()：设置或返回被选元素的属性值，包括自定义属性； (1)读取 获取id为div1的元素的style样式,并在控制台中输出 var valAttr =$("#div1").attr("style"); console.log(valAttr); (2)写入 设置id为div1的元素的style样式 $("#div1").attr("style","background-color:#cccc
jQuery基础使用与样式篇
WangM2001的博客
04-30 302
开发工具与关键技术：vs JavaScript 作者：王民 撰写时间：2020年4月30日 知识点罗列： 一.jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 ...
jQuery学习笔记
尚硅谷铁杆粉丝的博客
10-29 2597
认识 jQuery 对象 认识$符 在jQuery库中，$是jQuery的简写形式。例如： $(“#app”)等价于jQuery(“#app”) $.ajax等价于jQuery.ajax 这里jQuery是一个顶级对象，所有的函数方法都在这个对象之下，$是它的别名。 jQuery对象 jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象，只有通过jQ...
jQuery-css()方法总结——获取/设置样式
刘伟佳的博客
11-15 2710
css()方法总结 总结一下jQuery中使用css()方法获取和设置样式的特性。 首先新建一个html文件，内容如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置/获取样式内容</title> <style type="te...
alexnet模型-通过CNN卷积神经网络的动漫角色识别-不含数据集图片-含逐行注释和说明文档.zip
最新发布
11-07
本代码是基于python pytorch环境安装的。 下载本代码后，有个环境安装的requirement.txt文本 首先是代码的整体介绍 总共是3个py文件，十分的简便 本代码是不含数据集图片的，下载本代码后需要自行搜集图片放到对应的文件夹下即可 需要我们往每个文件夹下搜集来图片放到对应文件夹下，每个对应的文件夹里面也有一张提示图，提示图片放的位置 然后我们需要将搜集来的图片，直接放到对应的文件夹下，就可以对代码进行训练了。 运行01生成txt.py,是将数据集文件夹下的图片路径和对应的标签生成txt格式,划分了训练集和验证集 运行02CNN训练数据集.py,会自动读取txt文本内的内容进行训练，这里是适配了数据集的分类文件夹个数，即使增加了分类文件夹，也不需要修改代码即可训练 训练过程中会有训练进度条，可以查看大概训练的时长,每个epoch训练完后会显示准确率和损失值 训练结束后，会保存log日志，记录每个epoch的准确率和损失值 最后训练的模型会保存在本地名称为model.ckpt 运行03pyqt界面.py，就可以实现自己训练好的模型去识别图片了
电商购物网站 SSM毕业设计 附带论文.zip
11-07
电商购物网站 SSM毕业设计 附带论文 启动教程:https://www.bilibili.com/video/BV1GK1iYyE2B
题目源码2024年强网杯全国网络安全挑战赛 Pwn题目chat-with-me源码
11-07
强网杯
手把手教你：初识jQuery，自定义图片透明度插件
本篇教程旨在指导新手如何动手编写一个简单的jQuery插件，以模仿天猫网站中图片鼠标悬停时透明度变化的效果。以下是关键知识点的详细解析： 1. **需求分析**：首先，明确要实现的功能是基于鼠标悬停操作改变图片的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值