美文网首页
jq基础(一)——样式篇———选择器

jq基础(一)——样式篇———选择器

作者: 王翔爱摇滚乐爱电影爱心理学爱哲 | 来源:发表于2017-08-02 11:15 被阅读0次

1、

如何引入jq语句

    <script type="text/javascript">
          $(document).ready(function(){
 
          // 开始写 jQuery 代码...
 
         });
    </script>

简洁写法(与以上写法效果相同):

$(function(){
 
   // 开始写 jQuery 代码...
 
});

2、

    <!-- 使用JS原生语法 -->
    <script type="text/javascript">
        window.onload = function(){
            var p = document.getElementById('imooc1');
            p.innerHTML = 'P1:您好!通过慕课网学习jQuery才是最佳的途径';
            p.style.color = 'red';  
        }
    </script>
    
    <!-- 使用jQuery语法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            var $p = $('#imooc2');
            $p.html('P2:您好!通过慕课网学习jQuery才是最佳的途径').css('color','red');
        });
    </script>

3、

jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。

如何把jQuery对象转成DOM对象? get()方法

<script type="text/javascript">
        var $div = $('div'); //jQuery对象
        var div = $div.get(0) //通过get方法,转化成DOM对象
                /*var div = $div[0] //转化成DOM对象*/
        div.style.color = 'red'; //操作dom对象的属性
</script>

4、

DOM对象转化成jQuery对象: $(div)

 <script type="text/javascript">
            var div = document.getElementsByTagName('div'); //dom对象
            var $div = $(div); //将dom节点div转化为$div的jquery对象
            var $first = $div.first(); //找到第一个div元素
            $first.css('color', 'red'); //给第一个元素设置颜色
    </script>

5、jQuery选择器之层级选择器

http://js.jirengu.com/vufujurabo/1/

$( "parent > child" ) 子选择器:选择所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant") 后代选择器:选择给定的祖先元素的所有后代元素, 一个元素的后代可能是该元素的一个孩子,孙子,曾孙等
$("prev + next") 相邻兄弟选择器:选择所有紧接在“prev”元素后的“next”元素
$("prev ~ siblings") 一般兄弟选择器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素,并匹配过滤“siblings”选择器

6、jQuery选择器之基本筛选选择器

http://js.jirengu.com/lezaterimi/1/

7、jQuery选择器之内容筛选选择器

http://js.jirengu.com/jegezimiqi/1/

8、??

9、??jQuery选择器之属性筛选选择器

在这么多属性选择器中[attr="value"]和[attr="value"]是最实用的
[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等
[attr
="value"]能在网站中帮助我们匹配不同类型的文件
http://js.jirengu.com/zequwovuke/1/

10、jQuery选择器之子元素筛选选择器

Paste_Image.png

注意事项:

: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) 的区别前者是从前往后计算,后者从后往前计算
http://js.jirengu.com/natuxojaka/1/

11、jQuery选择器之表单元素选择器

Paste_Image.png
http://js.jirengu.com/rozewivuma/1/

12、jQuery选择器之表单对象属性筛选选择器

Paste_Image.png
注意事项:
选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器
在某些浏览器中,选择器:checked可能会错误选取到<option>元素,所以保险起见换用选择器input:checked,确保只会选取<input>元素
http://js.jirengu.com/mocucafudo/1/

13、jQuery选择器之特殊选择器this

this,表示当前的上下文对象是一个html对象,可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象,可以调用jQuery的方法和属性值。
http://js.jirengu.com/petubuzefo/1/

相关文章

  • jq初始,选择器,事件,内容操作,样式操作

    jq初始 jq选择器 jq事件 jq内容操作 jq样式操作

  • jq基础(一)——样式篇———选择器

    1、 如何引入jq语句 简洁写法(与以上写法效果相同): 2、 3、 jQuery是一个类数组对象,而DOM对象就...

  • CSS

    一、CSS样式 外链样式: 页内样式: 行内样式: 二、CSS选择器: 4种基础选择器:标签选择器、class选择...

  • jq基础(一)——样式篇———属性与样式

    1、jQuery的属性与样式之.attr()与.removeAttr() 操作特性的DOM方法主要有3个,getA...

  • CSS 学习总结

    CSS 选择器 { 样式 } 选择器:基础选择器(单个选择器物),复合选择器物 基础选择器:标签选择器,类选择器,...

  • 选择器

    jq 选择器完全继承了 CSS 的风格,与CSS不同的是CSS找到元素后添加的是样式,而jq找到元素后添加的是行为...

  • jQuery 整理

    样式篇 jQuery选择器 ①id选择器:$( "#id" )②类选择器:$( ".class" )③元素选择器:...

  • 可扩展、模块化CSS--基础样式规则(翻译文)

    基础样式规则是被应用到元素选择器、派生选择器、子选择器或者伪类,并不包括class和ID选择器。这些样式一般是默认...

  • CSS样式的权重计算方式

    CSS样式6中基础选择器 id选择器:#id 类选择器:.class 属性选择器:a[href="http://w...

  • CSS基础(表现标准)

    css选择器分类 基础选择器 标签选择器 类选择器 ID选择器 复合选择器 样式表书写位置 选择器 写法:选择器{...

网友评论

      本文标题:jq基础(一)——样式篇———选择器

      本文链接:https://www.haomeiwen.com/subject/nucmhxtx.html