博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
PHP jQuery
阅读量:7237 次
发布时间:2019-06-29

本文共 3501 字,大约阅读时间需要 11 分钟。

jquery可以说是js的封装,大多数情况下jquery比js简单,它们两个可以相互写对方的里面,使用jquery需要导入jquery文件。

<script src="jquery-1.1.min.js"></script>
jquery文件名格式为,jquery-版本号[.min] .js    其中min表示压缩版
 
jquery与js相似,所以他们的操作基本一一对应,只是方式不同:
主要操作有:
找对象:通过id、name、className、TagName找对象
操作对象:操作属性:取值,赋值,删除
                 操作样式:获取样式,设置样式
                 操作内容:
                                表单元素:获取内容,添加内容
                                非表单元素:获取内容,添加内容
                 操作元素:添加子元素、删除元素
添加事件:添加绑定事件、解除绑定事件
 
一一对应:
HTML页面
<div id="one"><span>one</span></div>
<div class="test" bs="aa">two</div>
<div class="test">three</div>
<div class="test">four</div>
<input type="text" name="uid" bs="aa" id="uid" />
<input type="button" id="btn" value="取消绑定" />
<input type="button" id="add" value="绑定事件" />
 
Jquery代码:都写在script里面
<script type = "text/javascript">
//$在jquery中专门用来做选择,相当于选择器,括号里面是根据什么来选,后面点事件
//这里的意思是说,给当前页面加了一个事件是加载完成,就是当前页面加载完成后执行里面的function(匿名函数)
$(document).ready(function(e){       
        
//Jquery与js找对象
        //JS通过id、name、className、TagName找对象
        var a = document.getElementById("one");                //id
        var b = document.getElementsByClassName("test");//classname
        var d = document.getElementsByTagName("div");    //tagname
        var c = document.getElementsByName("uid");          //name
        //JQUERY通过id、name、className、TagName找对象
        var aj = $("#one");                 //id
        var bj = $(".test");                    //classname
        var cj = $("div");                        //tagname
        var dj = $("[name='uid']");    //name注意中括号,特别注意属性可以自己定义例如:bb="aa"
        var ej = $("div.test");                //div中class为test的元素,Jquery可以使用选择器找对象。。。
==========================================================================
        //Jquery与js操作对象
==========================================================================
       
 //JS操作属性:
        a.setAttribute("","");            //设置属性,修改属性
        a.remove("");                        //移除属性
        a.getAttribute("");                //获取属性
        //JQUERY操作属性
        aj.attr("","");                          //设置属性,修改属性
        aj.removeAttr("");                //移除属性
        aj.attr("");                              //获取属性
==========================================================================
      
  //JS操作内容
        a.innerText;                   //非表单元素的取值,赋值是:a.innerText = "aaaa";             
        a.innerHTML;                //非表单元素的取值,赋值是:a.innerHTML = "<a>123</a>";  可以解析html标签
        a.value;                         //表单元素的取值,赋值是:a.value = "aaaa";
        //JQUERY操作内容
        aj.text();                        //非表单元素的取值,赋值是:aj.text("aaaa");
        aj.html();                       //非标单元素的取值,赋值是:aj.html("<a>123</a>");    可以解析html标签
        aj.val();                         //标签元素的取值,赋值是:aj.val("aaaa");
==========================================================================
       
 //JS操作样式
        a.style.backgroundColor = red;    //设置样式
        a.style.color;                                    //获取样式,只能获取内联样式,也就是写在标签里面的样式
        //JQUERY操作样式
        aj.css("color","yellow");                                    //设置样式
        aj.css("color");                                        //可以获取到内嵌式的样式属性
==========================================================================
         
 
//JS操作元素,创建元素两种方式
          //第一种用html赋值来创建元素
            var s = "<input type='button' value='"+i+"' class='bbb' οnclick='doselect(this)'>"
            var dd = document.getElementById("test");
            dd.innerHTML += s;
            //第二种是使用createElement
            var ab = document.createElement("input");
            ab.setAttribute("type","button");
            ab.setAttribute("value",i);
            ab.setAttribute("class","bbb");
            ab.setAttribute("onclick","doselect(this)");
 
            var dd = document.getElementById("test");
            dd.appendChild(ab);
            //删除元素
            var dd = document.getElementById("test");
            dd.remove;
             //JQUERY操作元素,创建元素             
            var str = "<div id='a' style='width:100px; height:100px; background-color:red'></div>";         
            div.append(str);
            //删除元素
            $("#a").remove();
==========================================================================
           
 //JQUERY中的事件
            $(".test").click(function(){
                    alert($(this).text());
                });
 
            $(".test").bind("click",function(){                //绑定事件,注意可以同时绑定多个
                    alert($(this).text());
                });
 
            $("#btn").click(function(){
                    $(".test").unbind("click");                    //解除绑定事件
            });
           $("#add").click(function(){
                    $(".test").bind("click",function(){
                    alert($(this).text());
 
                    });
            });
});
 
</script>

转载于:https://www.cnblogs.com/panyiquan/p/5602017.html

你可能感兴趣的文章
SGU 188.Factory guard
查看>>
ASP.NET MVC 4 (十二) Web API
查看>>
C# 三种打印方式含代码
查看>>
关于适配器模式一些分析
查看>>
PAT天梯赛L2-001. 紧急救援 dijk经典最短路劲+点权最大+记录路径
查看>>
简单的JS功能
查看>>
python基础学习笔记一
查看>>
国外主机海外主机测评总结
查看>>
POJ 3186 Treats for the Cows ——(DP)
查看>>
Java之多线程(1) - Race Condition引起的性能问题
查看>>
Python_collections_namedtuple可命名元组
查看>>
纯js日历插件
查看>>
TransactionScope
查看>>
144. Binary Tree Preorder Traversal
查看>>
Python中出现的问题
查看>>
笔试题--奇虎360-2010
查看>>
原生js之canvas时钟组件
查看>>
1354. Palindrome. Again Palindrome
查看>>
Spring AOP和事务的相关陷阱
查看>>
NYOJ-Color the fence
查看>>