id jquery选择器开头_python_jQuery所有笔记

weixin_39560924

于 2021-01-05 11:05:20 发布

阅读量140

点赞数

文章标签： id jquery选择器开头

本文链接：https://blog.csdn.net/weixin_39560924/article/details/112400518

版权

这篇博客全面介绍了jQuery的基础知识，包括认识jQuery的$符号，使用选择器操作页面元素，改变样式和属性，处理文本和值。还详细讲解了事件处理、动画功能，并探讨了jQuery的封装原理和实际应用案例。

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

JQuery

一、jQuery概述
1.为什么使用jQuery（遇到问题）
    （1）选择器功能弱
    （2）DOM操作繁琐之极
    （3）浏览器兼容性不好
    （4）动画效果不好
2.什么是jQuery（概念）
    （1）jQuery（javaScriptQuery）JavaScript代码库
    （2）官方网站：http//jquery.com/
3.目前jQuery有三个版本：
    （1）兼容ie678，使用最为广泛的，官方制作BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4（2016年5月20日）
    （2）不兼容ie678，很少人使用，官方只做BUG维护，功能不再增长。如果不考虑兼容低版本的浏览器就可以使用2.x，最终版本：2.2.4（2016年5月20日）
4.jQuery就相当于将javacript做成了一个包（功能函数）
    eg：（1）创建一个html文件（同时与js文件建立连接联系）：
            <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/js.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var div =document.getElementById("div");
             var div2=$（"div"）；#和上边那一段代码功能一致：div2=div1
        </script>
    </head>
    <body>
    </body>
</html>
（2）创建一个js文件（文件中写一个功能函数提供给html调用）：
function $(id){
    var dom=document.getElementById("id");
    return dom;
}

认识jQury的$

一、jQuery中$的含义（$相当于jQuery）：
    1.  作用1：$（function）
        1.相当于window.onload=function（）{}
        2.功能比window.onload更强大
          （1）window onload一个页面只能写一个，但是可以写多个$()而不冲突
          （2）window onload要等整个页面加载完后再执行（包括图片、超链接、音频），但是$的执行时间
        要早。
二、jQuery中5种选择器
1.id选择器#    只能获得一个标签
a.$（function（）{
    #js方法获得对象
        var tr=decoment.ElementById("tr");
    #jq方法获得对象的集合，#代表id选择器
        var tr=$（"#tr"）;
        alert（tr）;
    #jq方法获得对象,#表示id选择器
        var tr=$("#tr");
        alert（tr[0]）
}）
2.元素选择器
    var tr=$('tr');
 3.类选择器
    var tr=$（'.tr'）
4.通用选择器(页面的所有元素)
    var tr=$('*').css("background-color","greenyellow");
5.分组选择器
    HTML代码:
        <div>div</div>
        <p class="myClass">p class="myClass"</p>
        <span>span</span>
        <p class="notMyClass">p class="notMyClass"</p>
     jQuery代码：
        $("div，span，p.myClass")
6、层级选择器
    $(function(){
        #获得div下面包含的所有span标签
        a.$（div  span）.css（"backgroundColor"，"green"）;
        #获得div的直系标签
        b.$(div>span).css("background","color");
        #获得与sp1紧挨着的标签
        c.$(#sp1 +span).css("background","color");
        #获得指定元素的同级标签
        d.$(#sp1~span).css（"backgroud","color"）      
    })       
 7.几种以":"指定索引下标获取对象的选择器
       $(function(){
           #只有第一行变颜色
           $('ul li:first').css("background-color","red");
           $('ul li').first().css("background-color","red");
           #只有最后一行变色
           $('u1 li: last').css("background-color","red");
           $('ul li').last().css("background-color","red");
           #获得索引是奇数对象，索引从0开始
           $('ul li:odd').css("background-color","red");
           #获得索引是偶数对象，索引从0开始
           $('ul li:even').css("background-color","red");
           #获得指定索引下标的对象
           $('ul li:eq(3)).css("background-color","red"）；
              #获得大于指定索引下标的对象
              $('ul li:gt(3)').css("background-color","red");
              #获得小于指定索引下标的随想
              $('ul li:lt(3)').css("background-color","red");
        })
8.子选择器
9.属性选择器
  a.  
10. a.表单选择器
    b.表单对象选择器
11.内容选择器

js实现数据的单双行颜色:

jQuery创建方法的三种方式_$的含义:

js和jQuery获得元素_JS和JQ对象之间的转化:

JQ中5种选择器:

以冒号获得某个单标签的普通选择器:

几种获得单项的普通选择器：

子选择器：

jQuery中的6种属性选择器：

表单选择器及表单对象属性选择器:

内容选择器:

操作页面元素的样式

一、操作页面样式
1.操作页面样式第1种方法
    a.导入jQuery
    b.head中创建一组style
        <style>
        #div{
            width：100px；
            height：100px；
            border：1px solid red；
        }
        </style>
    c.head中创建一个jQuery函数
    $（function（）{
        #创建一个click事件
        $("#but").click（function（）{
            #创建div的对象
            var div2=$（"#div1"）;
            #获得css样式
            var wid=div2.css（"width"）;
            var hei=div2.css("height");
            #操作元素对象的样式
            div2.css("width","1000");
            div2.css("backgroudColor","red");#驼峰式
            div2.css("backgroud-color","red");
            #以上内容综合
            div2.css({"backgroudColor":"yellow","width":"deepred"});
        }）
    }）
    d:body中
        <input type="button" id="but" value="更新样式"/>
        <div id="div1"></div>
2.操作页面样式第2种方法
    a.style标签创建一个类属性
    .class{
        width：100px；
        height：100px；
        border：1px solid red；
    }
    b.head中创建一个jQuery函数
    $（function（）{
    #创建一个click事件
    $("#but").click（function（）{
    #获得div对象 ----通过天津爱类的方式添加css样式.
    $（"#div1"）.attr（"class"，"div"）；#和下边那条语句同义.    
    $（"#div1"）.addClass（"div"）；#和上边那条语句同义.
    c:body中
    <input type="button" id="but" value="更新样式"/>
    <div id="div1"></div>

jQuery操作元素对象的样式：

jQuery操作元素对象的样式第二种方法调用类用于同时添加多个样式:

jQuery操作元素对象的样式第二种方法_调用类class代码:

操作页面元素的属性

一、操作页面元素属性的第一种方法
1.通过创建对象获得元素属性和元素属性的值
a.创建一个函数和一个click单击事件
$(function(){
    $("#but1").click（function（）{
         #获得div对象 
        var tex=$("#tex");
        #获得对象的属性
        var val=tex.attr（"value"）
        console.log（tex,value）
    }）
})
b.body中
  <input type="button" id="but" value="更新样式"/>
  <input type="text" id="tex" value="请输入："/>
  <div id="div1"></div>

2.将属性替换成另一个属性
a.创建一个函数并创建一个单击事件：
$(function(){
    $("#but1").click（function（）{
         #获得div对象 
        var tex=$("#tex");
        #替换对象的属性
        var val=tex.attr（"value"，"我要代替原来的value属性的值"）
        var val1=tex.attr（"type"，"button"）#将原来的type属性的值text替换成button
        console.log（tex,value）
    }）
})
b.body中
  <input type="button" id="but" value="更新样式"/>
  <input type="text" id="tex" value="请输入："/>
  <div id="div1"></div>

操作页面元素的属性:

操作页面元素的属性的代码:

替换元素属性_prop返回true或false并让checkbox是否打钩:

操作页面的文本和值：

一、操作页面元素对象的文本内容和值1
1.用于双标签
a.获得元素内容，含有HTML标签的功能
    （1）获得内容：var ht=div.html（）；
            console.log（ht）；
b.获得元素内容，不好有元素不含HTML标签的功能
     （1）获得内容：var ht=div.text（）；
            console.log（ht）；
 2.用于单标签
    a.相当于获得文本框的值
    （1）var val=$（"#inp1"）.val（）；#创建对象var val=$(['inp1']).val()
        console.log（val
二、操作页面元素对象的文本内容和值2之文本内容的替换及更改
    1.div.html（"<b>我们不一样</b>"）#文本内容改变后打印下来
      div.text（"<b>我们不一样</b>"）#只是将文本内容全部打印下来了包括标签p也直接打印下来了
     2.在原文本内容的基础上添加新的文本内容
        div.text（div.text（）+"<p>真不一样</P>"）;
     3.无值的text标签的属性value添加值
        $("#div").val（"aaaa"）；
      4.text标签的属性value在原来值的基础上添加值
        $("#div").val($("#div").val()+"aaaa")；

一、操作页面元素对象的文本内容和值1：

操作页面元素对象的文本内容和值2之添加替换文本内容：

操作页面元素：

一、父标签中添加子元素
1.在父标签的子标签后面添加子元素：
    a.#创建新元素
    var p=$（"<p>List Item6</p>"）；
    #添加
    （1）$('#div1').append（p）；
    （2）p.appendTo（"#div1"）；
 2.在父标签的子标签前面添加子元素：
    （1）$（'#div'）.prepend（p）；
    （2）p.prependTo('#div1');
二、给平级添加标签
    1.给平级添加标签
      a.现有子标签之前
        (1)$('#div').before(p);
        (2)p.insertBefore($('#div'));
      b.现有子标签之后
        （1）$('#div').after(p);
        (2)p.insertAfter('#div');
三、

在父标签里面添加子元素：

添加节点之平级添加元素：

操作页面元素替换指定节点删除指定的元素_清空内容：

操作页面元素_父节点__同时添加多个元素：

操作页面元素_父节点parent__next_find方法：

事件处理

一、事件处理1
二、事件处理2

普通绑定事件方法和bind绑定事件_one绑定事件的方法：

strigger操纵事件_解绑事件：

jQuery动态添加事件并利用live方法绑定事件：

jQuery动态添加事件并利用live方法绑定事件代码：

动画功能

一、动画功能1
二、动画功能2

动画显示隐藏显隐互替滑动淡入淡出：

jQuery插件

一、

jQuery封装原理（闭包）

一、

无参数函数有参数函数的执行局部变量挂载后可全局使用无参数函数有参数函数的执行局部变量挂载后可全局使用：

闭包原理：

闭包优点：

案例

一、案例：操作1
1.
二、案例：操作2
1.
三、案例：操作3

jQuery实例1全选全不选代码：

jQuery实例1_选择框之间的勾选结果：

jQuery实例1反选代码:

jQuery实例2_添加行、删除checkbox行、复制行：

jQuery实例3_修改数量、删除行：

weixin_39560924

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
id jquery选择器开头_python_jQuery所有笔记

JQuery一、jQuery概述1.为什么使用jQuery（遇到问题）（1）选择器功能弱（2）DOM操作繁琐之极（3）浏览器兼容性不好（4）动画效果不好2.什么是jQuery（概念）（1）jQuery（javaScriptQuery）JavaScript代码库（2）官方网站：http//jquery.com/3.目前jQuery有三...
复制链接

扫一扫