JQuery基础

来源：互联网发布：中企网络通信项目经理编辑：程序博客网时间：2024/05/23 21:27

1.jQuery对象转化成DOM对象

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

利用数组下标的方式读取到jQuery中的DOM对象

<div>元素一</div><div>元素二</div><div>元素三</div>

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对象的属性

2.DOM对象转化成jQuery对象

<div>元素一</div><div>元素二</div><div>元素三</div>

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

3.id选择器

$( "#id" )

原生方法：document.getElementById()

4.类选择器

$( ".class" )

原生方法：document.getElementsByClassName()

$(".imooc").css("border", "3px solid red");

5.元素选择器

$( "element" )

原生方法：document.getElementsByTagName('div');

$("p").css("border", "3px solid red");

6.全选择器（*选择器）

$( "*" )

7.层级选择器

仔细观察层级选择器之间还是有很多相似与不同点

层级选择器都有一个参考节点

后代选择器包含子选择器的选择的内容

一般兄弟选择器包含相邻兄弟选择的内容

相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

8.基本筛选选择器

<body>    <h2>基本筛选器</h2>    <h3>:first/:last/:even/:odd</h3>    <div class="left">        <div class="div">            <p>div:first</p>            <p>:even</p>        </div>        <div class="div">            <p>:odd</p>        </div>        <div class="div">            <p>:even</p>        </div>        <div class="div">            <p>:odd</p>        </div>        <div class="div">            <p>:even</p>        </div>        <div class="div">            <p>div:last</p>            <p>:odd</p>        </div>    </div>    <script type="text/javascript">    //找到第一个div    $(".div:first").css("color", "#CD00CD");    </script>        <script type="text/javascript">    //找到最后一个div    $(".div:last").css("color", "#CD00CD");    </script>        <script type="text/javascript">    //:even 选择所引值为偶数的元素，从 0 开始计数    $(".div:even").css("border", "3px groove red");    </script>        <script type="text/javascript">    //:odd 选择所引值为奇数的元素，从 0 开始计数    $(".div:odd").css("border", "3px groove blue");    </script>            <h3>:eq/:gt/:lt</h3>    <div class="left">        <div class="aaron">            <p>:lt(3)</p>        </div>        <div class="aaron">            <p>:lt(3)</p>        </div>        <div class="aaron">            <p>:eq(2)</p>        </div>        <div class="aaron">        </div>        <div class="aaron">            <p>:gt(3)</p>        </div>        <div class="aaron">            <p>:gt(3)</p>        </div>    </div>    <script type="text/javascript">    //:eq    //选着单个    $(".aaron:eq(2)").css("border", "3px groove blue");    </script>        <script type="text/javascript">    //:gt 选择匹配集合中所有索引值大于给定index参数的元素    $(".aaron:gt(3)").css("border", "3px groove blue");    </script>         <script type="text/javascript">    //:lt 选择匹配集合中所有索引值小于给定index参数的元素    //与:gt相反    $(".aaron:lt(2)").css("color", "#CD00CD");    </script>        <h3>:not</h3>    <div class="left">        <div>            <input type="checkbox" name="a" />            <p>Aaron</p>        </div>        <div>            <input type="checkbox" name="b" />            <p>慕课</p>        </div>        <div>            <input type="checkbox" name="c" checked="checked" />            <p>其他</p>        </div>    </div>    <script type="text/javascript">        //:not 选择所有元素去除不匹配给定的选择器的元素        //选取所有input中,没有checked属性的p元素，赋予颜色        $("input:not(:checked) + p").css("background-color", "#CD00CD");    </script></body>

9.内容筛选选择器

注意事项：

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。

:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

10.可见性筛选选择器

:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

我们有几种方式可以隐藏一个元素：

CSS display的值是none。

type="hidden"的表单元素。

宽度和高度都显式设置为0。

一个祖先元素是隐藏的，该元素是不会在页面上显示

CSS visibility的值是hidden

CSS opacity的指是0

如果元素中占据文档中一定的空间,元素被认为是可见的。

可见元素的宽度或高度，是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

$('#div1:visible')

11.属性筛选选择器

[attr="value"]和[attr*="value"]是最实用的

12.子元素筛选选择器

注意事项：

:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素

如果子元素只有一个的话，:first-child与:last-child是同一个

:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配

jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

13.表单元素选择器

14.表单对象属性筛选选择器

注意事项：

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器

在某些浏览器中，选择器:checked可能会错误选取到<option>元素，所以保险起见换用选择器input:checked，确保只会选取<input>元素

15.特殊选择器this

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

var imooc = {    name:"慕课网",    getName:function(){        //this,就是imooc对象        return this.name;    }}imooc.getName(); //慕课网

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

p.addEventListener('click',function(){    //this === p    //以下两者的修改都是等价的    this.style.color = "red";    p.style.color = "red";},false);

换成jQuery的做法：

$('p').click(function(){    //把p元素转化成jQuery的对象    var $this= $(this)     $this.css('color','red')})

通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象，我们就可以用jQuery提供的快捷方法直接处理样式了

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

15..attr()与.removeAttr()

attr()有4个表达式

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

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

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

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

removeAttr()删除方法

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

注意：

Attribute就是dom节点自带的属性例如：html中常用的id、class、title、align等：

而Property是这个DOM元素作为对象，其附加的内容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法进行取值或赋值等

16.html()及.text()

.html()方法

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

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

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

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

这个操作是针对整个HTML内容（不仅仅只是文本内容）

.text()方法

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

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

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

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

17..val()

.val()方法

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

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

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

注意事项：

通过.val()处理select元素，当没有选择项被选中，它返回null

.val()方法多用来设置表单的字段的值

如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值

.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()都可以使用回调函数的返回值来动态的改变多个元素的内容。

18.增加样式.addClass()

.addClass( className )方法

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

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

19.删除样式.removeClass()

.removeClass( )方法

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

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

20.切换样式.toggleClass()

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

21.样式操作.css()

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值

.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

.css(propertyName, value )：设置CSS

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

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

样式的优先级：

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

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

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

通过.css()方法处理的是内联样式，直接通过元素的style属性附加到元素上的

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

总结：

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

如果是动态的HTML结构，在不确定规则，或者经常变化的情况下，一般多考虑.css()方式

22.元素的数据存储

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

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

.data( key, value ) //实例接口,存数据

.data( key ) //实例接口,存数据

<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        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>

转自慕课网

0 0